所属分类:网页特效-图片特效,悬浮层/弹出层
模板中的lightbox效果使用baguetteBox.js插件来制作。baguetteBox.js是一款支持移动设备的响应式lightbox插件。
在页面中引入baguetteBox.min.css和baguetteBox.min.js文件,以及4种模板对应的CSS文件。
<link rel="stylesheet" href="path/tobaguetteBox.min.css">
<link rel="stylesheet" href="css/gallery-clean.css">
<link rel="stylesheet" href="css/fluid-gallery.css">
<link rel="stylesheet" href="css/gallery-grid.css">
<link rel="stylesheet" href="css/thumbnail-gallery.css">
<script src="path/to/js/baguetteBox.min.js"></script>
图片画廊使用bootstrap的网格进行布局。最基本的HTML结构如下:
<div class="container gallery-container">
<h1>Bootstrap 3 Gallery</h1>
<p class="page-description text-center">Clean Layout With Minimal Styles</p>
<div class="tz-gallery">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail"> <a class="lightbox" href="images/park.jpg"> <img src="images/park.jpg" alt="Park"> </a>
<div class="caption">
<h3>Thumbnail label</h3>
<p>图片描述...</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail"> <a class="lightbox" href="images/bridge.jpg"> <img src="images/bridge.jpg" alt="Bridge"> </a>
<div class="caption">
<h3>Thumbnail label</h3>
<p>图片描述...</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail"> <a class="lightbox" href="images/tunnel.jpg"> <img src="images/tunnel.jpg" alt="Tuneel"> </a>
<div class="caption">
<h3>Thumbnail label</h3>
<p>图片描述...</p>
</div>
</div>
</div>
...... </div>
</div>
</div>
在页面DOM元素加载完毕之后,通过下下面的方法来初始化baguetteBox.js插件。
baguetteBox.run('.tz-gallery');