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

2025-01-31 技术教程

<html>其中用到了bootstrap的图片处理，响应式图片属性img-responsive，和图片形状，img-thumbnail写成class="img-responsiveimg-thumbnail"然后fancybox直接用默认$("a.grouped_elements").fancybox();$()这里的是选择器。<head><title></title><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/><linkrel="stylesheet"type="text/css"href="source/jquery.fancybox.css?v=2.1.5"media="screen"/><scripttype="text/javascript"src="lib/jquery-1.10.1.min.js"></script><scripttype="text/javascript"src="lib/jquery.mousewheel-3.0.6.pack.js"></script><scripttype="text/javascript"src="source/jquery.fancybox.js?v=2.1.5"></script><linkrel="stylesheet"href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"><scriptsrc="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script></head><body><scripttype="text/javascript">$(document).ready(function(){/*最基本的，使用了默认配置*/$("a.grouped_elements").fancybox();/*使用了自定义配置*//*一下配置支持组播放*///$("a.grouped_elements").fancybox({//'cyclic':'false',//'titleShow':'false'//});});</script><p><table><tr><td><aclass="grouped_elements"rel="group1"href="https://cache.yisu.com/upload/information/20200311/55/213505.jpg_1080x.jpg"title="title1"><imgsrc="https://cache.yisu.com/upload/information/20200311/55/213505.jpg_720x.jpg"alt=""class="img-responsiveimg-thumbnail"></a></td><td><aclass="grouped_elements"rel="group1"href="https://cache.yisu.com/upload/information/20200311/55/213522.jpg_1080x.jpg"title="title2"><imgsrc="https://cache.yisu.com/upload/information/20200311/55/213522.jpg_720x.jpg"alt=""class="img-responsiveimg-thumbnail"></a></td></tr><tr><td><aclass="grouped_elements"rel="group1"href="https://cache.yisu.com/upload/information/20200311/55/213524.jpg_1080x.jpg"title="title3"><imgsrc="https://cache.yisu.com/upload/information/20200311/55/213524.jpg_720x.jpg"alt=""class="img-responsiveimg-thumbnail"></a></td><td><aclass="grouped_elements"rel="group1"href="https://cache.yisu.com/upload/information/20200311/55/213526.jpg_1080x.jpg"title="title4"><imgsrc="https://cache.yisu.com/upload/information/20200311/55/213526.jpg_720x.jpg"alt=""class="img-responsiveimg-thumbnail"></a></td></tr><tr><td><aclass="grouped_elements"rel="group1"href="https://cache.yisu.com/upload/information/20200311/55/213540.jpg_1080x.jpg"title="title5"><imgsrc="https://cache.yisu.com/upload/information/20200311/55/213540.jpg_720x.jpg"alt=""class="img-responsiveimg-thumbnail"></a></td><td><aclass="grouped_elements"rel="group1"href="https://cache.yisu.com/upload/information/20200311/55/213541.jpg_1080x.jpg"title="title6"><imgsrc="https://cache.yisu.com/upload/information/20200311/55/213541.jpg_720x.jpg"alt=""class="img-responsiveimg-thumbnail"></a></td></tr><tr><td><aclass="grouped_elements"rel="group1"href="https://cache.yisu.com/upload/information/20200311/55/213542.jpg_1080x.jpg"title="title7"><imgsrc="https://cache.yisu.com/upload/information/20200311/55/213542.jpg_720x.jpg"alt=""class="img-responsiveimg-thumbnail"></a></td><td><aclass="grouped_elements"rel="group1"href="https://cache.yisu.com/upload/information/20200311/55/213543.jpg_1080x.jpg"title="title8"><imgsrc="https://cache.yisu.com/upload/information/20200311/55/213543.jpg_720x.jpg"alt=""class="img-responsiveimg-thumbnail"></a></td></tr><tr><td><aclass="grouped_elements"rel="group1"href="https://cache.yisu.com/upload/information/20200311/55/213551.jpg_1080x.jpg"title="title91"><imgsrc="https://cache.yisu.com/upload/information/20200311/55/213551.jpg_720x.jpg"alt=""class="img-responsiveimg-thumbnail"></a></td><td><aclass="grouped_elements"rel="group1"href="https://cache.yisu.com/upload/information/20200311/55/213552.jpg_1080x.jpg"title="title10"><imgsrc="https://cache.yisu.com/upload/information/20200311/55/213552.jpg_720x.jpg"alt=""class="img-responsiveimg-thumbnail"></a></td></tr></table></p></body></html>

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

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