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. 《Linux命令行与shell脚本编程大全 第3版》
			
    第一部分 Linux 命令行 第1章  初识Linux she1.1   什么是Linux 21.1.1 深入探究Linux 内核 31.1.2 GNU 工具 61.1.3 Linux 桌面环境 81 ...
    
			
    2. 
						
  2. 驱动12.移植dm9000驱动程序
			
    1 确定相异性 1.1 选中网卡芯片nGCS4 1.2 确定相异性:基地址,中断号,设置时序(内存控制器BWSCON,BANKCONn) 1.3 修改相应的部分 2 测试DM9000C驱动程序:2.1 ...
    
			
    3. 
						
  3. 观察者模式在MVP中的应用
			
    先简单写下观察者模式.观察者模式,又叫做发布-订阅模式.观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状态发生变化时,会通知所有观察者对象,是他们能够自动 ...
    
			
    4. 
						
  4. libstdc++.so.6: version `GLIBCXX_3.4.20' not found
			
    libstdc++.so.6: version `GLIBCXX_3.4.20' not found 参考链接: (1)解决/usr/lib/libstdc++.so.6: version `GLIB ...
    
			
    5. 
						
  5. windows上安装Ipython notebook
			
    最近有一个培训机构找笔者来做一份Python的培训教材,顺带着研究了下python notebook,发现很好很强大,现把初步的安装步骤记录如下:         1.安装Python         ...
    
			
    6. 
						
  6. OpenLayers3 动画
			
    参考文章 openlayers3中三种动画实现
    
			
    7. 
						
  7. "visual studio 2012 安装引擎拒绝访问" 错误的解决
			
    首先,我们看一下错误的具体提示,如下图所示: 这个错误,是我安装了那么多年Visual Studio的经历中,第一次遇到.太恶心了,昨天一直安装失败,导致后续其它软件的安装一再拖延.目前网上的解决方案 ...
    
			
    8. 
						
  8. ios 使用 resignFirstResponder 无法hide键盘
			
    - (BOOL)disablesAutomaticKeyboardDismissal {    return NO;}
    
			
    9. 
						
  9. OpenGL step to step(2)
			
    这是一个类似于地球绕太阳旋转的demo 原有的例子是用键盘接受事件,我做了修改,使用了timer把他变成一个动态旋转的 #import <Foundation/Foundation.h> ...
    
			
    10. 
						
  10. 转:如何mac下使用wireshark
			
    Mac OS Mountain Lion默认是没有安装X11的,而wireshark运行需要x11,因此如果直接安装wireshark而没有安装x11,wireshark不会正常运行. 去苹果主页下载 ...
    
			
    11.