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="data: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="data: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="data: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="data: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="data: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');