点击图片放大预览photoswipe插件
gooood个人博客网站
jquery特效
知道开发和产品及设计势不两立的局面吗？今天又深感同受了！本来呢设计稿上就没有说明图片放大功能这个需求的。项目到了尾声了。测试说：这里的图片需要点击放大并可以左右循环滑动切换。设计说：是有这样的功能！组长说：什么时候能开发完成！完成？想的到是挺美的！工作排的满满的怎么也得有个先来后到吧！这个一个个的都像是催命符。好吧!我妥协了，这就用photoswipe插件给你们弄个图片放大功能，堵上你们的嘴！看你们还说
引用文件：
photoswipe/4.1.0/photoswipe.css
photoswipe/4.1.0/default-skin/default-skin.css
photoswipe/4.1.0/photoswipe.min.js
photoswipe/4.1.0/photoswipe-ui-default.min.js
1、html代码：
<div> <figure role="img"> <a href="https://photo.page"> <img src="https://unsplash.it/1200/900/?image=702" data-caption="Sea side, south shore<br><em>© Dominik Schröder</em>" data-width="1200" data-height="900" alt="Image description"> </a> </figure> </div> <div tabindex="-1" role="dialog" aria-hidden="true"> <div></div> <div> <div> <div></div> <div></div> <div></div> </div> <div> <div> <div></div> <button title="Close (Esc)"></button> <button title="Share"></button> <button title="Toggle fullscreen"></button> <button title="Zoom in/out"></button> <div> <div> <div> <div></div> </div> </div> </div> </div> <div> <div></div> </div> <button title="Previous (arrow left)"> </button> <button title="Next (arrow right)"> </button> <div> <div></div> </div> </div> </div> </div> 2、JavaScript代码：
(function($) { var container = []; $('#gallery').find('figure').each(function() { var $link = $(this).find('img'), item = { src: $link.attr('src'), w: $link.data('width'), h: $link.data('height'), title: $link.data('caption') }; container.push(item); }); $('img').click(function(event) { event.preventDefault(); var $pswp = $('.pswp')[0], options = { index: $(this).closest('figure').index(), bgOpacity: 0.9, showHideOpacity: true }; var gallery = new PhotoSwipe($pswp, PhotoSwipeUI_Default, container, options); gallery.init(); }); }(jQuery));