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. 20145223《Java程序设计》第5周学习总结

    20145223 <Java程序设计>第5周学习总结 教材学习内容总结 ·由于在编程的时候会遇到因各种原因而导致的错误,于是我们可以使用"try"."catc ...

  2. 我的c++学习(1)hello world!

    // texthello.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> using na ...

  3. Kafka 分布式消息队列介绍

    Kafka 分布式消息队列 类似产品有JBoss.MQ 一.由Linkedln 开源,使用scala开发,有如下几个特点: (1)高吞吐 (2)分布式 (3)支持多语言客户端 (C++.Java) 二 ...

  4. Middleware In ASP.NET Core

    中间件简介 ASP.NET Core 由很多中间件构成,实现了一个HTTP请求管道(pipeline). Request的Response的管道可以看成一个Push Stack 和 Pop Stack ...

  5. Hadoop2.0(HDFS2)以及YARN设计的亮点

    YARN总体上仍然是Master/Slave结构,在整个资源管理框架中,ResourceManager为Master,NodeManager为Slave,ResouceManager负责对各个Node ...

  6. javaScript封装的各种写法

    在javascript的世界里,写法是个神奇的现象,真是百家齐开放啊!每次看到老外写的js组件,思想和写法都怪异,就没看到一个js结构基本相同的代码出来.今天,我就来谈谈js写法,我在开发过程中,也写 ...

  7. 使用递推解题:EOJ2999

    题目: Description 给定一个多项式 (ax+by)k,计算多项式展开后 xnym 项的系数. Input 第1行:一个整数T(1≤T≤10)为问题数. 接下来共T行.每行5个整数,分别为a ...

  8. HTTPS, SPDY和 HTTP/2性能的简单对比

    中文原文:HTTPS, SPDY和 HTTP/2性能的简单对比 整理自:A Simple Performance Comparison of HTTPS, SPDY and HTTP/2 请尊重版权, ...

  9. 阴影:box-shaw

    box-shaw:0px 0px 2px 3px while; 水平方向  垂直方向  模糊半径  模糊系数(大小)颜色

  10. Coder-Strike 2014 - Finals (online edition, Div. 2) A. Pasha and Hamsters

    水题 #include <iostream> #include <vector> #include <algorithm> using namespace std; ...