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. 关于django rest framework里token auth的实现及答疑
			
    http://stackoverflow.com/questions/14838128/django-rest-framework-token-authentication ============= ...
    
			
    2. 
						
  2. jenkins集群节点构建maven(几乎是坑最多的)
			
    业务量变大时,单台的jenkins进行自动化构建部署,就显得没那么灵活,jenkins的集群并非像web服务器.mysql集群那样,jenkins的集群无需在额外的主机安装jenkins,但是用于ja ...
    
			
    3. 
						
  3. 搭建服务与负载均衡的客户端-Spring Cloud学习第二天(非原创）
			
    文章大纲 一.Eureka中的核心概念二.Spring RestTemplate详解三.代码实战服务与负载均衡的客户端四.项目源码与参考资料下载五.参考文章 一.Eureka中的核心概念 1. 服务提 ...
    
			
    4. 
						
  4. RabbitMQ 消费端限流、TTL、死信队列
			
    目录 消费端限流 1. 为什么要对消费端限流 2.限流的 api 讲解 3.如何对消费端进行限流 TTL 1.消息的 TTL 2.队列的 TTL 死信队列 实现死信队列步骤 总结 消费端限流 1. 为 ...
    
			
    5. 
						
  5. Flink起步安装和使用
			
    下载安装 下载地址 下载对应操作系统和版本的flink  # 首先确认下Java环境 $ java -version  java version "1.8.0_111" Java( ...
    
			
    6. 
						
  6. Play框架连接Mysql遇到的一些问题
			
    最近,在基于Play框架的项目中需要连接Mysql数据库.在这个过程中遇到了一些问题.在此,把它记录下来. 首先,Play框架和Mysql连接有两种方式,这两种方式都是在application.con ...
    
			
    7. 
						
  7. 八卦某 G 的前端开发方式及流程--百度FEX前端nwind信息搜集神技能
			
    他山之石,可以攻玉. 话说本人从毕业到现在一直在某 B 公司工作,前些年折腾过不少开发方式和工具,但总觉得或许有更好的方案,所以很好奇其它公司内部是如何工作的,我曾经浏览过某 Y 公司内部无所不包的  ...
    
			
    8. 
						
  8. windows pipe
			
    管道分为 匿名管道 和 命名管道 . 1.匿名管道仅仅能在父子进程间进行通信.不能在网络间通信,并且传输数据是单向的.仅仅能一端写,还有一端读. 2.命令管道能够在随意进程间通信.通信是双向的,随意一 ...
    
			
    9. 
						
  9. serialVersionUID的作用以及如何用idea自动生成实体类的serialVersionUID
			
    转载:http://blog.csdn.net/liuzongl2012/article/details/45168585 serialVersionUID的作用: 通过判断实体类的serialVer ...
    
			
    10. 
						
  10. 综合运用: C++11 多线程下生产者消费者模型详解（转）
			
    生产者消费者问题是多线程并发中一个非常经典的问题,相信学过操作系统课程的同学都清楚这个问题的根源.本文将就四种情况分析并介绍生产者和消费者问题,它们分别是:单生产者-单消费者模型,单生产者-多消费者模 ...
    
			
    11.