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. junit单元测试中私有方法测试

    1.单元测试可以对系统逻辑进行每个单元模块的测试. 2.单元测试也可以作为回归测试的依据,可以避免升级完善功能时引入问题. 3.单元测试要求将代码写的更清晰,更易于测试. 4.有时单元测试需要测试私有 ...

  2. BZOJ 2631 Tree ——Link-Cut Tree

    [题目分析] 又一道LCT的题目,LCT只能维护链上的信息. [代码] #include <cstdio> #include <cstring> #include <cs ...

  3. 在html 中嵌入优酷视频

    <html> <embed src="http://player.youku.com/player.php/sid/XMjAzOTk4NjI4/v.swf" qu ...

  4. vector初始化

    对vector对象来说,直接初始化的方式适用于3种情况:1.初始值已知且数量少:2.初始值是另一个vector对象的副本:3.所有元素的初始值都一样.此外还有一种更常见的情况是4.创建一个vector ...

  5. WordPress ”无法发送电子邮件,可能原因:您的主机禁用了mail()函数“的解决办法

    WordPress网站中出现 "无法发送电子邮件,可能原因:您的主机禁用了mail()函数"的情况一般都是因为所在主机环境不支持在线邮件收发功能导致,如果不支持的话,那么像类似 N ...

  6. 卸载Photoshop

    安装Photoshop后出现卸载不干净的问题,从而导致安装另一个photoshop版本时出现错误,一般情况下我们都是在控制面板的卸载程序里进行卸载的,但往往这样的卸载并不能清除注册表残留以及系统盘里的 ...

  7. ACM cigarettes

    cigarettes 时间限制:3000 ms  |  内存限制:65535 KB 难度:2   描述 Tom has many cigarettes. We hypothesized that he ...

  8. URAL 1057. Amount of Degrees(数位DP)

    题目链接 我看错题了...都是泪啊,不存在3*4^2这种情况...系数必须为1... #include <cstdio> #include <cstring> #include ...

  9. Linux进程含义知多少

    理想情况下,您应该明白在您的系统中运行的每一个进程.要获得所有进程的列表,可以执行命令 ps -ef(POSIX 风格)或 ps ax(BSD 风格).进程名有方括号的是内核级的进程,执行辅助功能(比 ...

  10. Redis常用命令(一)

    Redis::__construct描述:创建一个Redis客户端范例:$redis = new Redis(); connect, open描述:实例连接到一个Redis.参数:host: stri ...