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" 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
												


											
photoswipe 实现图片的单击放大的更多相关文章
	

    
								
  1. 微信企业号办公系统-图片预览放大功能-previewImage
		
    在微信里看过文章的应该知道,文章里的图片点击后可以放大.分享和保存. 然而自己在微信里开发的网页,里面的图片点击后没办法实现这个效果,然后就去看了下微信JS文档,里面有个previewImage可以调 ...
    
		
    2. 
						
  2. 制作一个顶部图片可以拉伸放大缩小效果的tableViewHeader
		
    最近负责公司项目个人中心的项目模块研发,首页是一个头部图片可以拉伸放大缩小效果的tableViewHeader,今天这个demo和教程我增加了模糊效果和头像缩小效果.具体效果如图: 如果这个效果是想要 ...
    
		
    3. 
						
  3. iOS开发-UITableView顶部图片下拉放大
		
    关于顶部图片下拉放大,在用户展示的个人中心显示用户个人头像信息,设置UITableView的headerView实现,UITableView继承自UIScrollView,同样的设置UIScrollV ...
    
		
    4. 
						
  4. ios开发图片点击放大
		
    图片点击放大,再次点击返回原视图.完美封装,一个类一句代码即可调用.IOS完美实现 创建了一个专门用于放大图片的类,以下为.h文件 #import <Foundation/Foundation. ...
    
		
    5. 
						
  5. css3 实现图片等比例放大与缩小
		
    css3 实现图片等比例放大与缩小 在工作中,经常会碰到图片缩放的情况,比如服务器端返回的图片大小,可能大小不同,有的大,有的小,服务器端返回的图片大小我们不能控制的,但是在我们设计稿的时候,可能会规 ...
    
		
    6. 
						
  6. viewer && ImageFlow 图片滚动组件 图片点击放大 可以滚轮放大缩小 viewer
		
    ImageFlow https://finnrudolph.com/products/imageflow https://github.com/countzero/ImageFlow http://w ...
    
		
    7. 
						
  7. 【VUE】图片预览放大缩小插件
		
    From: https://www.jianshu.com/p/e3350aa1b0d0 在看项目时,突然看到预览图片的弹窗,感觉好僵硬,不能放大,不能切换,于是便在网上找下关于图片预览的插件,有找到 ...
    
		
    8. 
						
  8. android图片缩小和放大Matrix
		
    /**Bitmap放大的方法*/ private static Bitmap big(Bitmap bitmap) { Matrix matrix = new Matrix(); matrix.pos ...
    
		
    9. 
						
  9. jQuery点击图片弹出放大可拖动图片查看
		
    CSS代码: .popup-bigic { position: absolute; ; ; background: #eee; overflow: hidden; ; } .popup-bigic . ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 【CF1023C】Bracket Subsequence（模拟）
			
    题意:给定一个正则括号序列 s ,让你在当中选择一个长度正好为 t 的子串,使得 t 恰好也是一个正则括号序列 思路:用栈模拟 #include<cstdio> #include<c ...
    
			
    2. 
						
  2. 标准C程序设计七---61
			
    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...
    
			
    3. 
						
  3. cpu 性能
			
    我们平时使用的CPU利用率方法是极具误导性的,并且一年更甚一年.那么什么是CPU利用率?是你的CPU到底有多忙,是像“% CPU”这样到处在用的指标所显示的那样吗? 在top命令里,你看到90%的CP ...
    
			
    4. 
						
  4. 牛客网 牛客小白月赛1 A.简单题-控制输出格式setiosflags()函数+setprecision()函数
			
    水一水博客,都不好意思写这篇博客,毕竟已经不是大一的了. 难得能把一整套题都写出来(日常智障).但是在这里不写G题あなたの蛙は旅⽴っています的题解. 有毒,G题关了流同步只能过94%的样例,说我运行超 ...
    
			
    5. 
						
  5. HDU 5726 GCD（ST&RMQ）
			
    题目链接 GCD 先ST倍增预处理,f[i][j]表示从i开始(包含第i个数)的连续2^j个数的最大公约数. 这样就可以在O(1)内询问得到a[l]到a[r]之间的所有数的最大公约数的值. 然后对于每 ...
    
			
    6. 
						
  6. java  判断请求来自手机端还是电脑端
			
    根据当前请求的特征,判断该请求是否来自手机终端,主要检测特殊的头信息,以及user-Agent这个header public static boolean isMobileDevice(HttpSer ...
    
			
    7. 
						
  7. DELPHI 10.2(TOKYO) FOR LINUX的兼容性说明
			
    DELPHI 10.2(TOKYO) FOR LINUX的兼容性说明 自DELPHI 10.2(TOKYO) 始开始支持Linux . Delphi Linux 编译器 64 位 Linux 平台支持 ...
    
			
    8. 
						
  8. ssh登录时不校验被登录机器的方法
			
    在linux的用户目录下的.ssh文件下,touch config:注意config的权限控制,-rw-r--r--. 配置内容: cat config: Host * StrictHostKeyCh ...
    
			
    9. 
						
  9. QlikView显示所选时间前一年的数据
			
    客户常常提出这种需求,当用户选择某一时间时.图表中显示所选时间之前一年的数据.以下是我的方法.如有不当,请多不吝赐教: 数据准备例如以下所看到的: SalesData: LOAD Num(ID) as ...
    
			
    10. 
						
  10. SWF代码分析与破解之路 (YueTai VIP视频信息获取工具) Socket续篇
			
    引言 上一篇 <Socket与站点保密应用 (隐藏链接的视频下载)>大大咧咧地从 WEB 讲 Socket.再到 TCP/IP 等协议,又再讲到 Wireshark 怎样抓IP包分析.最还 ...
    
			
    11.