开源的Web图片浏览效果-blueimp Gallery

blueimp Gallery 是支持触屏和响应式交互可以定制的图片和视频相册播放插件,在桌面WEB应用和移动应用有做很好的优化,支持键盘左右切换,支持全屏播放以及支持自己的扩展内容显示。

blueGallery_lightbox

项目地址:https://github.com/blueimp/Gallery

使用方法

非常简单,看项目README很快可以搞定,我使用的是Lightbox效果,配置步骤:

1.把css,img,js目录copy到网站存储。

2.网页头引入样式:

<link rel="stylesheet" href="css/blueimp-gallery.min.css">

3.将代码段落加入网页body中:

<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>

4.在body底部加入:

<script src="js/blueimp-gallery.min.js"></script>

5.上述代码后面加入script,处理点击事件:

<script>
document.getElementById('links').onclick = function (event) {
    event = event || window.event;
    var target = event.target || event.srcElement,
        link = target.src ? target.parentNode : target,
        options = {index: link, event: event},
        links = this.getElementsByTagName('a');
    blueimp.Gallery(links, options);
};
</script>

6.最后,创建图片列表即可(注意,最好使用大小相同的缩略图)

  
<div id="links">
  <a href="images/banana.jpg" title="Banana">
        <img src="images/thumbnails/banana.jpg" alt="Banana">
    </a>
    <a href="images/apple.jpg" title="Apple">
        <img src="images/thumbnails/apple.jpg" alt="Apple">
    </a>
    <a href="images/orange.jpg" title="Orange">
        <img src="images/thumbnails/orange.jpg" alt="Orange">
    </a>
</div>

还有其它的样式和配置项可选,具体内容可参考项目README。

相关cdn加速地址:http://www.bootcdn.cn/blueimp-gallery/

-END-

分享到:
赞(0)