photoswipe 實現圖片的單擊放大
阿新 • • 發佈：2019-01-10
1、專案結構
2、HTML 程式碼
<%@ 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" contentView Code="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