非常简单的使用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