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. Visual Studio工具栏中无法选择调试设备

    Visual Studio工具栏中无法选择调试设备 在Visual Studio工具栏中,默认显示已经识别的设备.用户可以从中选择对应的设备,进行调试和部署App.但是由于误操作,可能导致该选项丢失. ...

  2. Asp.net mvc 有关序列化的问题

    //            $.ajax({//                async: false,//                type:'post',//这里注意,Get请求不安全,用 ...

  3. 转 Delphi Invalidate的用法

    1.Invalidate介绍 void Invalidate( BOOL bErase = TRUE ); 该函数的作用是使整个窗口客户区无效.窗口的客户区无效意味着需要重绘,例如,如果一个被其它窗口 ...

  4. bootstrap的图标无法正常显示解决方法

    bootstrap的图标无法在火狐浏览器上正常显示,出现的是乱码,如下图所示: 解决方案: 直接把bootstrap整个文件夹放到项目中,引用的时候../static/bootstrap-3.3.5- ...

  5. BFS(双向) HDOJ 3085 Nightmare Ⅱ

    题目传送门 题意:一个人去救女朋友,两个人都在运动,还有鬼在"扩散",问最少几秒救到女朋友 分析:开两个队列来表示两个人走过的路,一个人走到的地方另一个人已经vis了,那么就是相遇 ...

  6. Javascript与当前项目的思考

      主体 分为以下三部分,能力.经验有限,欢迎拍砖. 1.低效的代码 2.面向对象的重构重复利用代码 3.调试的经验总结 第一部分 日常中低效的代码 加载和运行 <html> <he ...

  7. CF 2B.The least round way

    题目链接 很久以前就见过此题,以前看了题解,然后今天写了写,写的真搓. #include <cstdio> #include <cstring> #include <st ...

  8. 【noiOj】p8207(233)

    07:和为给定数 查看 提交 统计 提问 总时间限制:  1000ms 内存限制:  65536kB 描述 给出若干个整数,询问其中是否有一对数的和等于给定的数. 输入 共三行:第一行是整数n(0 & ...

  9. 再谈Jquery Ajax方法传递到action

     原始出处 :http://cnn237111.blog.51cto.com/2359144/984466  本人只是转载 原文如下: 假设 controller中的方法是如下: public Act ...

  10. Hadoop_简单操作ZooKeeper

    一.概念 1. 一个开源的.分布式的,为分布式应用提供协调服务的Apache项目 2. 提供一个简单的原语集合,以便于分布式应用可以在它之上构建更高层次的同步服务 3. 设计非常易于编程,它使用的是类 ...