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. mongodb学习03 操作详解

    插入文档 db.test.insert({"name":"jinks"}); 批量插入 db.test.insert([{}, {}, {}]); 一次批量插入 ...

  2. no-jquery 04 Events

    Events Sending Native (DOM) Events anchorElement.click(); Sending Custom Events var event = document ...

  3. 分享Kali Linux 2016.2第49周镜像文件

    分享Kali Linux 2016.2第49周镜像文件 Kali Linux官方于12月4日发布Kali Linux 2016.2的第49周镜像.这次保持以往规律,仍然是11个镜像文件.默认的Gnom ...

  4. 仓库、超市、服装、食品、批发零售手持打印PDA开单器-现场无线开单扫描 无线传输电脑

    深圳浩瀚技是一家主要从事手持数据终端硬件.软件研究.销售服务为一体的高新企业公司.公司主要销售进销存等无线开单系统.工业级手持PDA,安卓数据采集器,RFID阅读器等设备.我们秉承“诚信.敏捷.繁荣” ...

  5. 关于最近Google无法正常访问的变通之法(已经被墙)

    对于习惯使用谷歌搜素的骚年最近可能比较蛋疼,没这方面需求的就另当别论.可能是政府限制加强的原因,有时访问谷歌在香港服务器也不大好使,不过最近发现,不通过谷歌域名而直接使用谷歌的ip来访问谷歌响应速度可 ...

  6. 线段树(多维+双成段更新) UVA 11992 Fast Matrix Operations

    题目传送门 题意:训练指南P207 分析:因为矩阵不超过20行,所以可以建20条线段的线段树,支持两个区间更新以及区间查询. #include <bits/stdc++.h> using ...

  7. 贪心+模拟 Codeforces Round #288 (Div. 2) C. Anya and Ghosts

    题目传送门 /* 贪心 + 模拟:首先,如果蜡烛的燃烧时间小于最少需要点燃的蜡烛数一定是-1(蜡烛是1秒点一支), num[g[i]]记录每个鬼访问时已点燃的蜡烛数,若不够,tmp为还需要的蜡烛数, ...

  8. BZOJ2965 : 保护古迹

    首先要将这个图连通,方法是通过扫描线+set求出每个连通块最高的点上方的第一条边,然后向交点连边. 然后把边拆成两条双向边,每次找到一条没走过的边,找到极角排序后它的反向边的后继,直到回到这条边. 根 ...

  9. asp.net mvc route 中新发现的小技巧

    在发现这个小技巧之前,我经常被某些问题困扰,我们以博客园为例 1:是分类名称 2:是分类url 3:点击分类,进入的页面,要显示分类的名称 4:点击分类,进入的页面,要用分类相关参数 在日常web的开 ...

  10. 20161007 NOIP 模拟赛 T1 解题报告

    排序 3.1 题意描述 众所周知,熟练掌握至少一种排序算法是参加NOIP的必备技能.常见的排序算法有冒泡 排序.归并排序.快速排序.奇偶排序.猴子排序.梳排序.鸡尾酒排序.臭皮匠排序等. 在这里,介绍 ...