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. Ubuntu 16.04 LTS 成功编译 Android 6.0 源码教程
			
    sudo apt-get install -y git flex bison gperf build-essential libncurses5-dev:i386 \  libx11-dev:i386 ...
    
			
    2. 
						
  2. PhpStorm配置svn:Can't use Subversion command line client:svn
			
    Can't use Subversion command line client:svn 感谢: 萌芽的绿豆的文章:https://www.cnblogs.com/yuanchaoyong/p/616 ...
    
			
    3. 
						
  3. 数据结构自己实现——Linklist
			
    //单???链???表??? #include <iostream> using namespace std; typedef char datatype; typedef struct  ...
    
			
    4. 
						
  4. 微信小程序 wx.navigateTo()传参及多个参数方法
			
    var workModeAndPriceList = res.data.data.workModeAndPriceList; //var result = JSON.stringify(workMod ...
    
			
    5. 
						
  5. K&R——第五章 指针与数组
			
    #include <stdio.h> #define maxsize 5000 char buf[maxsize]; char *head = buf; char *new(int siz ...
    
			
    6. 
						
  6. Java中泛型的Class<Object>与Class<?>的区别（转）
			
    Object是一个具体的类名,而?是一个占位符号,表示任何类型,只要是SomeClass类或者子类就可以. List<Object>可以放任何类对象. List<? extends  ...
    
			
    7. 
						
  7. js文件/图片从电脑里面拖拽到浏览器上传文件/图片
			
    1.效果展示 2.html 代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE html> <html lang=& ...
    
			
    8. 
						
  8. android清除缓存为什么总是存在12k？
			
    转载请注明出处:http://blog.csdn.net/droyon/article/details/41116529 android手机在4.2之后.清除缓存总是会残留12k的大小.预计强迫症患者 ...
    
			
    9. 
						
  9. Qnap 中VM下的win7
			
    因工作需要alone了Qnap 中VM下的win7,更改冲突项:1. 电脑名2. 必需卸载虚拟网卡,因为克隆系统的MAC地址相同.    添加网卡,指定IP Address.Subnet mask.G ...
    
			
    10. 
						
  10. sql的一些知识_order by
			
    注释 SELECT name FROM userinfo #这是注释 /* 这是多行注释 */ order by 排序() SELECT username FROM userinfo ORDER BY ...
    
			
    11.