此插件允许用户进入灯箱式浏览页面上的图片。
此插件允许用户进入灯箱式浏览页面上的图片。
为按钮或链接增加data-toggle="lightbox"
属性,点击按钮或图片来浏览图片大图。
增加data-caption="*"
属性来为图片增加额外的描述文本。
<!-- 使用按钮 -->
<a href="image.jpg" data-toggle="lightbox" class="btn btn-primary">浏览图片</a>
<!-- 使用图片 -->
<img data-toggle="lightbox" src="small-image.jpg" data-image="large-image.jpg" data-caption="小图看大图" class="img-thumbnail" alt="" width="200">
为多个data-toggle="lightbox"
指定相同的data-group="*"
属性,会启动分组浏览。图片左右两侧会显示图片切换按钮。
<!-- 分组图片浏览 -->
<a href="image-1.jpg" data-toggle="lightbox" data-group="image-group-1"><img src="small-image-1.jpg" class="img-rounded" alt=""></a>
<a href="image-2.jpg" data-toggle="lightbox" data-group="image-group-1"><img src="small-image-2.jpg" class="img-rounded" alt=""></a>
<a href="image-3.jpg" data-toggle="lightbox" data-group="image-group-1"><img src="small-image-3.jpg" class="img-rounded" alt=""></a>
...
为链接增加data-toggle="lightbox"
属性会自动初始化灯箱式式浏览效果。也可以手动为链接和图片进行初始化。
$('a.lightbox-toggle').lightbox();