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. POJ1167 The Buses
			
    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 6234   Accepted: 1698 Description A man ...
    
			
    2. 
						
  2. 【CF1017B】The Bits（模拟）
			
    题意:给定两个二进制数字a,b,可以任意交换a中的两个bit位,求进行这样一次操作,最多可产生多少种不同的a or b n<=1e5 思路:模拟,分类讨论 #include<cstdio& ...
    
			
    3. 
						
  3. 不需 porting 就可充電的 charger ic。
			
    Origin : 今天同事問我一個關於配有 RT9458 charger ic 的手機的問題, 這手機可能要送到廠商那, 需要 porting charger ic, 看了一下,跟他說這個充電部份不需 ...
    
			
    4. 
						
  4. Web Cache
			
    我们都知道,网站对于一些常用数据做缓存,会加速网站访问,像下面这样: public string GetFoo() { if ( cache.get("Foo") == null  ...
    
			
    5. 
						
  5. 洛谷——P2878 [USACO07JAN]保护花朵Protecting the Flowers
			
    P2878 [USACO07JAN]保护花朵Protecting the Flowers 题目描述 Farmer John went to cut some wood and left N (2 ≤  ...
    
			
    6. 
						
  6. Xamarin.Forms的相对布局RelativeLayout
			
    Xamarin.Forms的相对布局RelativeLayout   相对布局RelativeLayout是App中常用的布局方式.它是以界面中的某个元素为基准,设置另外一个元素的位置和大小.通过这种 ...
    
			
    7. 
						
  7. 在spring中使用数据库
			
    若要在spring中使用数据库,首先需要配置数据源. 1.使用数据源连接池,可以使用DBCP(Data Base Connection Pooling) <bean id="datas ...
    
			
    8. 
						
  8. Netty学习_Netty框架入门教程：Netty入门之HelloWorld实现
			
    我们可能都学过Socket通信/io/nio/aio等的编程.如果想把Socket真正的用于实际工作中去,那么还需要不断的完善.扩展和优化.比如很经典的Tcp读包写包问题,或者是数据接收的大小,实际的 ...
    
			
    9. 
						
  9. jvm 问题分析
			
    jmap dump:file=[文件名].dump [进程号]  生成dump root@VM-185-251-ubuntu:/opt/scripts# jmap -dump:file=three.d ...
    
			
    10. 
						
  10. python学习笔记之heapq内置模块
			
    heapq内置模块位于./Anaconda3/Lib/heapq.py,提供基于堆的优先排序算法 堆的逻辑结构就是完全二叉树,并且二叉树中父节点的值小于等于该节点的所有子节点的值.这种实现可以使用 h ...
    
			
    11.