photoswipe 实现图片的单击放大
1、项目结构
2、HTML 代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PhotoSwipe.aspx.cs" Inherits="MvcAppTest.PhotoSwipe" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="PhotoSwipe/styles.css" rel="stylesheet" /> <script src="PhotoSwipe/klass.min.js"></script> <link href="PhotoSwipe/photoswipe.css" rel="stylesheet" /> <link href="PhotoSwipe/default-skin.css" rel="stylesheet" /> <script src="PhotoSwipe/jquery-1.7.2.min.js"></script> <script src="PhotoSwipe/photoswipe.js"></script> <script src="PhotoSwipe/photoswipe-ui-default.js"></script> <script src="PhotoSwipe/jquery.transit.js"></script> <script src="PhotoSwipe/hammer.js"></script> <script src="PhotoSwipe/jquery.hammer.js"></script> </head> <body> <div id="demo-test-gallery" class="demo-gallery"> <ul id="Gallery" class="gallery"> <li><a href="img/pic1.jpg" data-size="1600x1600" data-med="img/pic1.jpg" data-med-size="1024x1024"><img src="img/pic11.jpg" alt="Image 001" /></a></li> <li><a href="img/pic2.jpg" data-size="1600x1600" data-med="img/pic2.jpg" data-med-size="1024x1024"><img src="img/pic22.jpg" alt="Image 002" /></a></li> </ul> </div> <script src="PhotoSwipe/PhotoSwipeTool.js"></script> </body> </html> <script type="text/javascript"> (function (window, PhotoSwipe) { document.addEventListener('DOMContentLoaded', function () { var options = {}, instance = PhotoSwipe.attach(window.document.querySelectorAll('#Gallery a'), options); }, false); }(window, window.Code.PhotoSwipe)); </script>
3、引用文件下载地址
链接:https://pan.baidu.com/s/1qvyyeVdjlEfnDlMSkHtRrg 提取码:es1a
作者:学习靠自己
出处:http://www.cnblogs.com/net064/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。
土豪打赏
![](https://files.cnblogs.com/files/net064/wechat.bmp)
![](https://files.cnblogs.com/files/net064/zfb.bmp)