smart-zoom图片缩放插件、photoswipe插件

smart-zoom图片缩放插件

引入jq和e-smart-zoom-jquery.js

代码

<div class="imgChange">
    <img src="./2.jpg" alt="">
</div>

$(".imgChange img").smartZoom();

效果

photoswipe插件 

引入css，js

<link href="https://cdn.bootcss.com/photoswipe/4.1.3/photoswipe.min.css" rel="stylesheet"><link href="https://cdn.bootcss.com/photoswipe/4.1.3/default-skin/default-skin.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/photoswipe/4.1.3/photoswipe.min.js"></script>
<script src="https://cdn.bootcss.com/photoswipe/4.1.3/photoswipe-ui-default.min.js"></script>

 代码

<ul class="block-section mt30">
            <li class="list-photo">
                <a data-size="1024x768" class="fancybox-photoSwiper" rel="fancybox-thumb" href="./1.png">
                    <img alt='' class='img-responsive' src='./1.png' />
                </a>
                <a data-size="1024x768" class="fancybox-photoSwiper" rel="fancybox-thumb" href="./2.jpg">
                    <img alt='' class='img-responsive' src='./2.jpg' />
                </a>
                <a data-size="1024x768" class="fancybox-photoSwiper" rel="fancybox-thumb" href="./1.png">
                    <img alt='' class='img-responsive' src='./1.png' />
                </a>
                <a data-size="1024x768" class="fancybox-photoSwiper" rel="fancybox-thumb" href="./2.jpg">
                    <img alt='' class='img-responsive' src='./2.jpg' />
                </a>
            </li>
        </ul>

        <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="pswp__bg"></div>
            <div class="pswp__scroll-wrap">
                <div class="pswp__container">
                    <div class="pswp__item"></div>
                    <div class="pswp__item"></div>
                    <div class="pswp__item"></div>
                </div>
                <div class="pswp__ui pswp__ui--hidden">
                    <div class="pswp__top-bar">
                        <div class="pswp__counter"></div>
                        <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                        <button class="pswp__button pswp__button--share" title="Share"></button>
                        <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                        <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                        <div class="pswp__preloader">
                            <div class="pswp__preloader__icn">
                                <div class="pswp__preloader__cut">
                                    <div class="pswp__preloader__donut"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                        <div class="pswp__share-tooltip"></div>
                    </div>
                    <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
                    <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
                    <div class="pswp__caption">
                        <div class="pswp__caption__center"></div>
                    </div>
                </div>
            </div>
        </div>

效果