1、引入css和js

          <link href="css/photoswipee.css" rel="stylesheet"  type="text/css"/>
<link href="css/default-skin.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="css/indexLarger.css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/photoswipe.min.js" type="text/javascript"></script>
<script src="js/photoswipe-ui-default.min.js" type="text/javascript"></script>
<script src="js/myswipe.js" type="text/javascript"></script>

2、引用

                     <div class="gallery">
<a href="images/thumb/001.jpg" data-size="393x584" data-med="images/full/001.jpg" data-med-size="1179x1752">
<img src="data:images/thumb/001.jpg" alt="image 001" />
</a>
<a href="images/thumb/002.jpg" data-size="584x393" data-med="images/full/002.jpg" data-med-size="1752x1179">
<img src="data:images/thumb/002.jpg" alt="image 002" />
</a>
<a href="images/thumb/003.jpg" data-size="393x584" data-med="images/full/003.jpg" data-med-size="1179x1752">
<img src="data:images/thumb/003.jpg" alt="image 003" />
</a>
<a href="images/thumb/004.jpg" data-size="574x811" data-med="images/full/004.jpg" data-med-size="1752x1179">
<img src="data:images/thumb/004.jpg" alt="image 004" />
</a>
<a href="images/thumb/005.jpg" data-size="393x584" data-med="images/full/005.jpg" data-med-size="1179x1752">
<img src="data:images/thumb/005.jpg" alt="image 005" />
</a>
</div>
<!--photoSwipe-->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<div class="pswp__bg"></div>
<div class="pswp__scroll-wrap">
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<div class="pswp__counter"></div>
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__caption">
<div class="pswp__caption__center">
</div>
</div>
</div>
</div>
</div>

3、初始化

 initPhotoSwipeFromDOM('.gallery');  

  

用PhotoSwipe制作相册,手势可放大的更多相关文章

  1. PhotoView实现图片随手势的放大缩小的效果

    项目需求:在listView的条目中如果有图片,点击条目,实现图片的放大,并且图片可以根据手势来控制图片放大缩小的比例.类似于微信朋友圈中查看好友发布的照片所实现的效果. 思路是这样的:当点击条目的时 ...

  2. Html 制作相册

    本文主要讲述采用Html5+jQuery+CSS 制作相册的小小记录. 主要功能点: Html5进行布局 调用jQuery(借用官网的一句话:The Write Less, Do More)极大的简化 ...

  3. 基于jQuery的图片相册滑出放大插件

    今天给大家带来一款基于jQuery的图片相册滑出放大插件.点击相册图片,展示该图片.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗..效 ...

  4. PhotoSwipe.js 相册展示插件学习

    PhotoSwipe.js官网:http://photoswipe.com/,在这个网站上可以下载到PhotoSwipe的文件以及相关的例子. 这个组件主要是用来展示图片.相册用的,还是很实用的. 一 ...

  5. photoswipe 实现图片的单击放大

    1.项目结构 2.HTML 代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=&qu ...

  6. iOS:UICollectionView纯自定义的布局:堆叠式布局、圆式布局 (一般用来制作相册)

    集合视图的自动布局:UICollectionViewLayout是抽象根类,必须用它的子类才能创建实例,下面是重写的方法,计算item的布局属性 //每一次重新布局前,都会准备布局(苹果官方推荐使用该 ...

  7. Objective-c——UI基础开发第十二天(相册展示)

    一.知识点 模仿新特性 UICollectionViewFlowLayout自定义布局 相册 瀑布流(淘宝购物之类的 二.复习 a.UICollectionView 和 tableview共享一套AP ...

  8. 用node.js实现mvc相册资源管理器

    摘要:通过前两天的学习我大概学了了,用formidable模块文件上传,express框架,以及利用fs模块进行文件读取,今天我学习了如何用这些知识来制作相册,暂没有数据库,所以做的也是本地的资源管理 ...

  9. android高仿人人网

    经过几个月的努力,终于基本完成了人人API拥有的所有功能,界面采用仿照人人梦想版5.13制作,其中资源文件也采用人人的APK文件资源,完成的功能及知识点如下: 1.通过三种动画仿照出人人引导页的放大切 ...

随机推荐

  1. SQL Server 2008 - Cannot set a credential for principal 'sa'.

    SQL Server 2008 - Cannot set a credential for principal 'sa'. 很久没有用到SQL Server了,今天有幸在帮同事解决一个SQL Serv ...

  2. DRP项目总结

    DRP项目在6号就已经完工了,总共花费了一个半月的时间,从对java的懵懵懂懂,到现在的略微熟悉,对整个java web开发的认知,清晰了很多.涉及到的web项目开发的必备知识,也都有一次得到锻炼和提 ...

  3. 关于JSF国际化问题

    由于最近一个项目的MVC层框架用的是JSF,所以在摸索中遇到了不少的问题,其中有一项就是关于国际化的的问题. 小弟在网上找了很多的资料,其实无外乎内容就都那样,可不知是小弟人品太差还是由于确实技术上有 ...

  4. Spring.Net-DI依赖注入和Ioc控制反转

    Spring.Core作为整个Spring框架的基础,实现了依赖注入的功能.Spring框架的其它模块都要依赖或扩展该模块. IObjectFactory接口,该接口实现了工厂模式,使用它可以帮我们创 ...

  5. java.lang.NoClassDefFoundError: com.umeng.analytics.MobclickAgent

    07-24 09:58:23.239: E/AndroidRuntime(29487): FATAL EXCEPTION: main 07-24 09:58:23.239: E/AndroidRunt ...

  6. 解决TXT乱码问题

    初装Ubuntu,打开windows保存的txt文件很可能会遇到各种乱码问题. 下面是wiki ubuntu里的解决办法: Gedit中文乱码 缺省配置下,用 Ubuntu 的文本编辑器(gedit) ...

  7. JAX-WS创建和处理SOAP消息

    JAX-WS规范是一组XML web services的JAVA API,在 JAX-WS中,一个远程调用可以转换为一个基于XML的协议例如SOAP,在使用JAX-WS过程中,开发者不需要编写任何生成 ...

  8. 30+WordPress古典风格的主题-古典却不失时尚

    通过WordPress古典风格主题,你可以快速的让你的网站呈现古典情调,并在竞争中脱颖而出.古典风格的网页设计是非常受欢迎的,现在,你可能想知道为什么.很多人被古典风格吸引,他们将一些陈旧的,过时的, ...

  9. 【.net 深呼吸】细说CodeDom(9):动态编译

    知道了如果构建代码文档,知道了如何生成代码,那么编译程序集就很简单了. CodeDomProvider 类提供了三个可以执行编译的方法: 1.CompileAssemblyFromSource——这个 ...

  10. go语言中sync包和channel机制

    文章转载至:https://www.bytelang.com/article/content/A4jMIFmobcA= golang中实现并发非常简单,只需在需要并发的函数前面添加关键字"Go&quo ...