var openPhotoSwipe = function() {
var pswpElement = document.querySelectorAll('.pswp')[0];

// build items array
var items = [
{
src: 'https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_b.jpg',
w: 964,
h: 1024
},
{
src: 'https://farm7.staticflickr.com/6175/6176698785_7dee72237e_b.jpg',
w: 1024,
h: 683
}
];

// define options (if needed)
var options = {
// history & focus options are disabled on CodePen
history: false,
focus: false,

showAnimationDuration: 0,
hideAnimationDuration: 0

};

var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
};

document.getElementById('btn').onclick = openPhotoSwipe;

点击某个按钮弹出 photoswip的更多相关文章

  1. 第一个微信小程序(实现点击一个按钮弹出toast)

    今天根据网上的教程搭建了微信小程序的环境,然后看文档做了一个简单的小应用. 项目的目录是这个样子的: app.js.app.json.app.wxss是全局文件,必不可少的文件.定义在app.wxss ...

  2. bootstrap-table:操作栏点击编辑按钮弹出模态框修改数据

    核心代码: columns: [ { checkbox:true //第一列显示复选框 }, ... { field: 'fail_num', title: '失败数' }, { field: 'op ...

  3. Android基础TOP4_1:点击物理按钮弹出退出提示框

    JAVA: public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedIns ...

  4. ExtJs 4.2.1 点击按钮弹出表单的窗口

    初学ExtJs,做项目的时候想做一个这样的效果:点击按钮弹出对话框,之前一直是使用EasyUi来做的, EasyUi里有Dialog,用起来很方便,但是现在转移到ExtJs上后,发现没有Dialog这 ...

  5. JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里

    JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...

  6. 请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框。程序可以判断出用

    请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框.程序可以判断出用 户点击的是“确认”还是“取消”. 解答: <HTML> <HEAD> <TI ...

  7. Html : 点击按钮弹出输入框,再次点击进行隐藏

    上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  8. jquery点击按钮弹出图片

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. jquery实现点击按钮弹出层和点击空白处隐藏层

    昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){                $('.autoBtn' ...

随机推荐

  1. ember.js:使用笔记1-数组数据统一显示

    ember中数据一般都是以array的形式存储的,控制器使用,如: App.DataController = Em.ArrayController.extend({}); 想要在一个页面中输出所有的数 ...

  2. Visual Studio 2010: 调试引用的dll的代码?

    right click the solution in the Solution Explorer-> Properties->  Debug ->Enable Debuggers- ...

  3. unity 播放音乐

    创建一个AudioSource组件,拖一个mp3组件到这个组建上 新建一个脚本,拖audiosource到audiosource的声明上 using UnityEngine; using System ...

  4. BZOJ3740 : pku2842 N-dimension Matching N维匹配

    做$n$次递推求出$n$维Hash值即可,时间复杂度$O(nk)$. #include<cstdio> #define N 500010 int n,i,j,t,delta,ca,cb,a ...

  5. 数据仓库原理<2>:数据仓库系统的体系结构

    1. 引言 本篇主要讲述数据仓库系统的体系结构与组成要素.数据集市与数据仓库之间的关系.元数据的定义与作用. 在上一篇,笔者介绍了数据仓库的定义: "数据仓库是一个面向主题的.集成的.不可更 ...

  6. ACM: Gym 100935F A Poet Computer - 字典树

    Gym 100935F A Poet Computer Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%I64d &am ...

  7. 神奇的莫比乌斯带(mobius)

    1.禅师和青年之间的对话 2.制作一个莫比乌斯带 3.神奇的莫比乌斯带 4.对莫比乌斯带进行简单的数学建模 1.禅师和青年之间的对话 青年问禅师:“大师,我很爱我的女朋友,她也有很多优点,但是总有几个 ...

  8. HDU 1693 Eat the Trees(插头DP)

    题目链接 USACO 第6章,第一题是一个插头DP,无奈啊.从头看起,看了好久的陈丹琦的论文,表示木看懂... 大体知道思路之后,还是无法实现代码.. 此题是插头DP最最简单的一个,在一个n*m的棋盘 ...

  9. Android -- 自定义ImageView(圆形头像)

    1.  原图

  10. App如何适应 iPhone 5s/6/6 Plus 三种屏幕的尺寸?

    来自//www.cocoachina.com/ 初代 iPhone 2007 年,初代 iPhone 发布,屏幕的宽高是 320 x 480 像素.下文也是按照宽度,高度的顺序排列.这个分辨率一直到 ...