相册一直没处理,这次抽空1.8版整合fancybox相册。下版本会放出,先告诉大家1.8版本怎么添加。
朋友上次问我相册一直没做,还留着干嘛。不如取消算了。其实我想的是给自己一点目标,相册是一开始就计划了的。
虽然一直没有添加,但是计划总是一步步的来的。现在整合了相册,想看看效果的可以点击相册去瞧瞧。
首先我们来了解下fancybox。点击了解
我们下载好demo后,需要的文件是
jquery.fancybox.css jquery.fancybox.js
然后再测试的时候,发现其中这个插件依赖的JQ库不支持2.1.3的,又考虑到bootstrap3的jq库最低要1.8。所以我把网站的jq库改成了1.11了。
在相册网页中引入这个CSS,然后再底部引入上面的js.
还需要一段代码:
<script type="text/javascript"> $(document).ready(function() { $('.fancybox-buttons').fancybox({ openEffect : 'none', closeEffect : 'none', prevEffect : 'none', nextEffect : 'none', closeBtn : false, helpers : { title : { type : 'inside' }, buttons: {} }, afterLoad : function() { this.title = '第 ' + (this.index + 1) + '张 共 ' + this.group.length + (this.title ? ' - ' + this.title : '张'); } }); }); </script>
然后修改图片显示。
<a class="fancybox-buttons thumbnail preview" data-fancybox-group="button" href="URL1"><img src="URL2" alt="" /></a>
修改URL1 URL2就可以了。
最后说下就是这样显示和点击的都是大图,对相册浏览速度有影响,然后还需要在上传图片的时候生成缩略图保存。这个还需要进一步的优化。
程序使用很多不足的地方,请给我留言。谢谢支持。
上一篇: 一道面试随机计算题...
下一篇: GitHub10大热门编程语言...