非常简单的使用jquery fancybox插件实现的查看图片效果

简介:
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
< html >
其中用到了bootstrap的图片处理,响应式图片属性img-responsive,和图片形状,img-thumbnail
 
写成 class="img-responsive img-thumbnail"
然后fancybox直接用默认 $("a.grouped_elements").fancybox();   
$()这里的是选择器。
 
< head >
< title >
</ title >
< meta  http-equiv = "Content-Type"  content = "text/html; charset=UTF-8"  />
     < link  rel = "stylesheet"  type = "text/css"  href = "source/jquery.fancybox.css?v=2.1.5"  media = "screen"  />
     
 
     <!-- Add jQuery library -->
     < script  type = "text/javascript"  src = "lib/jquery-1.10.1.min.js" ></ script >
 
     <!-- Add mousewheel plugin (this is optional) -->
     < script  type = "text/javascript"  src = "lib/jquery.mousewheel-3.0.6.pack.js" ></ script >
 
     <!-- Add fancyBox main JS and CSS files -->
     < script  type = "text/javascript"  src = "source/jquery.fancybox.js?v=2.1.5" ></ script >    
 
     <!-- Add Media helper (this is optional) -->
 
 
 
<!-- 新 Bootstrap 核心 CSS 文件 -->
< link  rel = "stylesheet"  href = "//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" >
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
< script  src = "//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js" ></ script >
</ head >
< body >
< script  type = "text/javascript" >
$(document).ready(function() {   
     /* 最基本的,使用了默认配置 */       
     $("a.grouped_elements").fancybox();       
     /* 使用了自定义配置 */       
  
     /* 一下配置支持组播放 */       
     // $("a.grouped_elements").fancybox({  
        
     //     'cyclic'        :  'false',
     //    'titleShow' : 'false'
     // });  
        
}); </ script >
 
 
 
< p >   
     < table >
         < tr >
       < td >< a  class = "grouped_elements"  rel = "group1"  href = "http://godfs.3g.cn/soft/wp/wp5.jpg_1080x.jpg"  title = "title1"  >< img  src = "http://godfs.3g.cn/soft/wp/wp5.jpg_720x.jpg"  alt = ""  class = "img-responsive img-thumbnail" ></ a >  </ td >< td >
     < a  class = "grouped_elements"  rel = "group1"  href = "http://godfs.3g.cn/soft/wp/wp6.jpg_1080x.jpg"  title = "title2" >< img  src = "http://godfs.3g.cn/soft/wp/wp6.jpg_720x.jpg"  alt = ""  class = "img-responsive img-thumbnail" ></ a >        </ td >
</ tr >
    
    < tr > < td >< a  class = "grouped_elements"  rel = "group1"  href = "http://godfs.3g.cn/soft/wp/wp7.jpg_1080x.jpg"  title = "title3" >< img  src = "http://godfs.3g.cn/soft/wp/wp7.jpg_720x.jpg"  alt = ""  class = "img-responsive img-thumbnail" ></ a >   </ td >< td >
     < a  class = "grouped_elements"  rel = "group1"  href = "http://godfs.3g.cn/soft/wp/wp8.jpg_1080x.jpg"  title = "title4" >< img  src = "http://godfs.3g.cn/soft/wp/wp8.jpg_720x.jpg"  alt = ""  class = "img-responsive img-thumbnail" ></ a > </ td >  </ tr >
 
      < tr > < td >< a  class = "grouped_elements"  rel = "group1"  href = "http://godfs.3g.cn/soft/wp/wp9.jpg_1080x.jpg"  title = "title5" >< img  src = "http://godfs.3g.cn/soft/wp/wp9.jpg_720x.jpg"  alt = ""  class = "img-responsive img-thumbnail" ></ a >   </ td >< td >
     < a  class = "grouped_elements"  rel = "group1"  href = "http://godfs.3g.cn/soft/wp/wp10.jpg_1080x.jpg"  title = "title6" >< img  src = "http://godfs.3g.cn/soft/wp/wp10.jpg_720x.jpg"  alt = ""  class = "img-responsive img-thumbnail" ></ a > </ td >  </ tr >
 
      < tr > < td >< a  class = "grouped_elements"  rel = "group1"  href = "http://godfs.3g.cn/soft/wp/wp11.jpg_1080x.jpg"  title = "title7" >< img  src = "http://godfs.3g.cn/soft/wp/wp11.jpg_720x.jpg"  alt = ""  class = "img-responsive img-thumbnail" ></ a >   </ td >< td >
     < a  class = "grouped_elements"  rel = "group1"  href = "http://godfs.3g.cn/soft/wp/wp12.jpg_1080x.jpg"  title = "title8" >< img  src = "http://godfs.3g.cn/soft/wp/wp12.jpg_720x.jpg"  alt = ""  class = "img-responsive img-thumbnail" ></ a > </ td >  </ tr >
 
      < tr > < td >< a  class = "grouped_elements"  rel = "group1"  href = "http://godfs.3g.cn/soft/wp/wp13.jpg_1080x.jpg"  title = "title91" >< img  src = "http://godfs.3g.cn/soft/wp/wp13.jpg_720x.jpg"  alt = ""  class = "img-responsive img-thumbnail" ></ a >   </ td >< td >
     < a  class = "grouped_elements"  rel = "group1"  href = "http://godfs.3g.cn/soft/wp/wp14.jpg_1080x.jpg"  title = "title10" >< img  src = "http://godfs.3g.cn/soft/wp/wp14.jpg_720x.jpg"  alt = ""  class = "img-responsive img-thumbnail" ></ a > </ td >  </ tr >
     </ table >   
</ p >  
 
</ body >
 
</ html >

参考文档:http://blog.csdn.net/china_skag/article/details/23882281

http://v3.bootcss.com/css/#images-responsive

本文转自  陈小龙哈   51CTO博客,原文链接:http://blog.51cto.com/chenxiaolong/1677709


相关文章
|
3月前
|
JavaScript
jQuery实现无缝图片滚动效果
jQuery实现无缝图片滚动效果
154 67
|
2月前
|
JavaScript
jQuery 树型菜单插件(Treeview)
jQuery 树型菜单插件(Treeview)
63 2
|
14天前
|
JavaScript
jQuery实现弹窗消息提示特效插件
这是一个简单的jQuery弹窗消息提示插件,用于网站用户操作提示。包含默认、成功、失败、警告、提示弹窗等不同形式弹出的消息提示效果,轻量简单,欢迎下载!
25 4
|
6月前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
65 1
|
2月前
|
JavaScript 前端开发
jQuery Growl 插件(消息提醒)
jQuery Growl 插件(消息提醒)
55 4
jQuery Growl 插件(消息提醒)
|
2月前
|
存储 JSON JavaScript
jQuery Cookie 插件
jQuery Cookie 插件
48 4
jQuery Cookie 插件
|
1月前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
31 0
|
4月前
|
JavaScript 前端开发 数据安全/隐私保护
Validform jQuery插件详解
【8月更文挑战第21天】
|
6月前
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
|
6月前
|
JavaScript Perl PHP
一篇文章讲明白jQuery插件之jqueryeditableplugin
一篇文章讲明白jQuery插件之jqueryeditableplugin
36 0