A-A+

点击图片弹出放大预览jQuery插件Lightbox(转)

2021年11月27日 方法、技巧 暂无评论

使用方法:

载CSS样式文件

1
2
3
<link rel="stylesheet" href="css/bootstrap-grid.min.css">
<link rel="stylesheet" href="dist/zoomify.min.css">
<link rel="stylesheet" href="css/style.css">

HTML部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div class="examples">	
  <div class="row">
      <div class="example  col-md-12 col-xs-12 ">
          <p><img src="img/1.jpg" class="img-rounded" alt=""></p>
      </div>
  </div>
  <div class="row">
      <div class="example  col-xs-6 col-md-6">
          <p><img src="img/2.jpg" class="img-rounded" alt=""></p>
      </div>
      <div class="example col-xs-6 col-md-6">
          <p><img src="img/3.jpg" class="img-rounded" alt=""></p>
      </div>
  </div>
  <div class="row">
      <div class="example col-xs-3 col-md-3">
          <p><img src="img/4.jpg" class="img-rounded" alt=""></p>
      </div>
      <div class="example col-xs-3 col-md-3">
          <p><img src="img/5.jpg" class="img-rounded" alt=""></p>
      </div>
      <div class="example col-xs-3 col-md-3">
          <p><img src="img/6.jpg" class="img-rounded" alt=""></p>
      </div>
      <div class="example col-xs-3 col-md-3">
          <p><img src="img/7.jpg" class="img-rounded" alt=""></p>
      </div>
  </div>
</div>

载入jQuery库文件、插件JS文件、插件初始化配置

1
2
3
4
5
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js">script>
<script src="dist/zoomify.min.js">script>
<script type="text/javascript">
	$('.example img').zoomify();
</script>

对“.example img”范围内的图片都有效

本文来源:https://www.sucainiu.com/lightbox.html

演示地址

给我留言

Copyright © 众人搜索网 保留所有权利.   Theme  Ality 鲁ICP备11032800号-1

用户登录 ⁄ 注册