用PhotoSwipe制作相册，手势可放大

1、引入css和js

          <link href="css/photoswipee.css" rel="stylesheet"  type="text/css"/>
          <link href="css/default-skin.css" rel="stylesheet"  type="text/css"/>
          <link rel="stylesheet" type="text/css" href="css/indexLarger.css">
          <script src="js/jquery.min.js" type="text/javascript"></script>
          <script src="js/photoswipe.min.js" type="text/javascript"></script>
          <script src="js/photoswipe-ui-default.min.js" type="text/javascript"></script>
          <script src="js/myswipe.js" type="text/javascript"></script>

2、引用

                     <div class="gallery">
                        <a  href="images/thumb/001.jpg"  data-size="393x584" data-med="images/full/001.jpg" data-med-size="1179x1752">
                            <img src="images/thumb/001.jpg" alt="image 001" />
                        </a>
                        <a  href="images/thumb/002.jpg"  data-size="584x393" data-med="images/full/002.jpg" data-med-size="1752x1179">
                            <img src="images/thumb/002.jpg" alt="image 002" />
                        </a>
                        <a  href="images/thumb/003.jpg"  data-size="393x584" data-med="images/full/003.jpg" data-med-size="1179x1752">
                            <img src="images/thumb/003.jpg" alt="image 003" />
                        </a>
                        <a  href="images/thumb/004.jpg"  data-size="574x811" data-med="images/full/004.jpg" data-med-size="1752x1179">
                            <img src="images/thumb/004.jpg" alt="image 004" />
                        </a>
                        <a  href="images/thumb/005.jpg"  data-size="393x584" data-med="images/full/005.jpg" data-med-size="1179x1752">
                            <img src="images/thumb/005.jpg" alt="image 005" />
                        </a>
                    </div>
                    <!--photoSwipe-->
                      <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>
                                        <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__caption">
                                        <div class="pswp__caption__center">
                                        </div>
                                    </div>
                                </div>
                            </div>
                     </div>

3、初始化

     

 initPhotoSwipeFromDOM('.gallery');　　

　　

转载于:https://www.cnblogs.com/karila/p/6197797.html