我想创建一个引导库,用户可以上传到 [英] I want to create a bootstrap gallery that users can upload to

查看:301
本文介绍了我想创建一个引导库,用户可以上传到的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在为我的服务器构建一个minecraft网站,该网站主要使用bootstrap api构建,我想在网站上有一个画廊,信任的玩家可以登录和上传屏幕截图,并让他们自动添加到画廊。我猜我需要某种CMS,我希望实现类似这样 http://blueimp.github

如果您想要轮播,那么我认真建议您使用 http://owlgraphic.com/owlcarousel/index.html 猫头鹰旋转木马,有很多不同的方式可以让你的图像显示。另外,我推荐它的主要原因是因为它是使用bootstrap,所以将CSS集成到您的实际网站不会太多的问题。



我伤了进入更多的细节,因为有这么多不同品种的旋转木马你可以加载,所以当它都在他们的网站上,这将是无意义的解释。



灯箱



对于你的完整图库灯箱,我会推荐使用这个JavaScript在 http://www.lokeshdhakar.com/projects/lightbox2/?u=9 他提供了一些非常干净和专业的输出。



最好的事情是你可以简单地使用



script src =http://www.lokeshdhakar.com/projects/lightbox2/js/lightbox.js>< / script>





< script src =http: /code.jquery.com/jquery-1.11.1.min.js\"> ;</script>



您将需要加载页面底部的JS,这样就不会降低性能。对于上帝的爱LOAD THE JQUERY BEFORE任何其他JS或你的脚本将失败。



在页面的顶部加载css:
< link href =http://www.lokeshdhakar.com/projects/lightbox2/css/lightbox.css =stylesheet/>



然后,显然需要使用类似以下内容的HTML代码到您的网站:



< a href =img / image-1.jpgdata-lightbox =image-1data-title =我的字幕>图片#1< / a>



登录系统



我不打算在这里解释。因为我没有足够的声誉,包括两个以上的链接。但是你需要使用一个SQL登录,并确保它是安全的。随时给我发一条消息,我将在StackOverflow上为你写一篇关于如何使它工作的帖子。



最终笔记



猫头鹰旋转木马和灯箱的好处在于,我使用它们运行在相同的Jquery,这是伟大的。我也知道在脚本和css外部加载可能很慢,有它的缺点。但我只是想帮助你直接到点,如果你想加载它正常通过从你的网络服务器加载资源,然后按照他们的网站上的指南。



您可以使SQL与登录系统链接,是的,这是一回事。但允许用户上传自己的图片和您的网站发布它们是一个完全不同的事情,这将需要一段时间才能完成,并确保他们如何工作。



无论如何,我希望这真的有帮助,我已经进入了很多细节,希望尽可能多地覆盖。如果你有什么问题,那么随后随意评论下面,我会回来使用,一旦我看到它。如果你需要一些更多的指导帮助,我可以帮助你的消息,但我喜欢保持所有的资源公开。 :)



感谢,
Luke


I am building a minecraft website for my server, the website is mainly built using the bootstrap api, I want to have a gallery on the website that trusted players can login and upload screenshots and have them automatically added to the gallery. Im guessing I need some sort of CMS, I am hoping to achieve something that looks like this http://blueimp.github.io/Gallery/ but some way to upload pictures into it

解决方案

Carousel

If you are wanting carousels then I seriously recommend you use http://owlgraphic.com/owlcarousel/index.html Owl Carousel, there are so many different ways you can get your images displayed. Plus the main reason I recommend it is because it is build using bootstrap so integrating the CSS into your actual site wouldn't be too much on an issue.

I wound go into much detail because there are so many different varieties of carousels you can load so it would be pointless explaining it all when it is all on their site. They explain it really well on the more HOW TO tab so check that out.

Lightbox

And for your full gallery lightbox I would reccomend using this JavaScript over at http://www.lokeshdhakar.com/projects/lightbox2/?u=9 He provides some really clean and professional output.

Plus the best thing is you can include it by simply using

<script src="http://www.lokeshdhakar.com/projects/lightbox2/js/lightbox.js"></script>

and then you will want to make sure you include the jquery to ensure it loads fine

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

You will want to load the JS at the bottom of the page so it doesn't decrease performance. And for the love of god LOAD THE JQUERY BEFORE ANY OTHER JS or your scripts will just fail.

At the top of the page load in the css: <link href="http://www.lokeshdhakar.com/projects/lightbox2/css/lightbox.css" rel="stylesheet" />

Then will obviously need the HTML code onto your site using something like:

<a href="img/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>

Login System

I am not going to explain this here. As I don't have enough reputation to include more than two links yet. But you would need to use an SQL login and make sure that is is secure as well. Feel free to send me a message and I will write out a post for you on StackOverflow on how to make it all work.

Final Notes

The good thing about the Owl Carousel and Lightbox is that I have used them running off the same Jquery which is great. I also know that loading in scripts and css externally can be slow and has its downsides. But I am just trying to help you get straight to the point if you want to load it in normally by loading the resources from your webserver then follow the guides on their site.

You can make the SQL link up with a login system, yes, that's one thing. But allowing users to upload their own images and your site distributing them is a completely different thing which will both take quite a while to get done and ensure that they work how they should.

Anyway, I hope this really does help and I have gone into a lot of detail to hopefully cover as much as possible. If you have any questions what so ever then feel free to comment below and I will get back to use as soon as I see it. If you need some more guided help then I can help you over messaging but I like to keep all resources public. :)

Thanks, Luke

这篇关于我想创建一个引导库,用户可以上传到的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆