国外优秀Bootstrap主题的jQuery相册插件 Bootstrap Image Gallery

非常漂亮的 Bootstrap 主题jQuery 相册插件特效，功能也非常的炫，在新版浏览器上有较好的
表现，如：Chome,FireFox，在以webkit为核心基本没有啥问题。

 Bootstrap Image Gallery 是基于blueimp Gallery 相册插件改造，支持触摸响应式和自定义
图片和视频的播放，支持全屏以及自定义内容的显示。



所需插件版本：

jQuery v. 1.9.0+

Bootstrap v. 3.0.0+

blueimp Gallery v. 2.11.0+

使用方法：

首先拷贝相关css、js、图片到你的网站目录。

1.拷贝下面的HTML代码片段添加到您的网页的head部分

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
<link rel="stylesheet" href="css/bootstrap-image-gallery.min.css">

2.拷贝下面的代码到你的网页body部分

<!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery">
    <!-- The container for the modal slides -->
    <div class="slides"></div>
    <!-- Controls for the borderless lightbox -->
    <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>
    <!-- The modal dialog, which will be used to wrap the lightbox content -->
    <div class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" aria-hidden="true">×</button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body next"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left prev">
                        <i class="glyphicon glyphicon-chevron-left"></i>
                        Previous
                    </button>
                    <button type="button" class="btn btn-primary next">
                        Next
                        <i class="glyphicon glyphicon-chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

3.拷贝下面的代码片段到你的body尾部

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<script src="js/bootstrap-image-gallery.min.js"></script>

4.拷贝下面的代码片段到你的body主题部分

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

以上代码基本搭建好了，为了保证预览效果，上面的图片路径必须
是你自己的图片路径，而且图片必须存在，试下看看。全文：http://www.js-css.cn/a/openframe/jqueryapi/gallery/2013/1022/968.html

 

之前我不知道什么是web插件，web工具，这些下载到本地的插件怎么用？现在看了这些案例终于明白，就是js，css的引入文件而已。