photoswipe图片滑动插件使用
2017-09-04 17:17
316 查看
第一步: 引入jss和css文件
第二步: 添加PhotoSwipe元素到DOM
第三步: 初始化元素
View Code
UI的默认显示效果在
官方文档地址: http://photoswipe.com/documentation/getting-started.html
<!-- Core CSS file --> <link rel="stylesheet" href="path/to/photoswipe.css"> <!-- Skin CSS file (styling of UI - buttons, caption, etc.) In the folder of skin CSS file there are also: - .png and .svg icons sprite, - preloader.gif (for browsers that do not support CSS animations) --> <link rel="stylesheet" href="path/to/default-skin/default-skin.css"> <!-- Core JS file --> <script src="path/to/photoswipe.min.js"></script> <!-- UI JS file --> <script src="path/to/photoswipe-ui-default.min.js"></script>
第二步: 添加PhotoSwipe元素到DOM
<!-- Root element of PhotoSwipe. Must have class pswp. --> <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> <!-- Background of PhotoSwipe. It's a separate element as animating opacity is faster than rgba(). --> <div class="pswp__bg"></div> <!-- Slides wrapper with overflow:hidden. --> <div class="pswp__scroll-wrap"> <!-- Container that holds slides. PhotoSwipe keeps only 3 of them in the DOM to save memory. Don't modify these 3 pswp__item elements, data is added later on. --> <div class="pswp__container"> <div class="pswp__item"></div> <div class="pswp__item"></div> <div class="pswp__item"></div> </div> <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. --> <div class="pswp__ui pswp__ui--hidden"> <div class="pswp__top-bar"> <!-- Controls are self-explanatory. Order can be changed. --> <div class="pswp__counter"></div> <!-- 图片控制按钮(包括退出,分享,全屏,放大/缩小) --> <button class="pswp__button pswp__button--close" title="Close (Esc)"></button> <button class="pswp__button pswp__button--share" title="Share"></button> <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button> <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR --> <!-- element will get class pswp__preloader--active when preloader is running --> <div class="pswp__preloader"> <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut"> <div class="pswp__preloader__donut"></div> </div> </div> </div> </div> <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> <div class="pswp__share-tooltip"></div> </div> <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button> <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button> <!--标题--> <div class="pswp__caption" style="display:block;"> <div class="pswp__caption__center"></div> </div> </div> </div> </div>
第三步: 初始化元素
function ShowImage() { 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, title: '图片标题1' }, { src: 'https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_b.jpg', w: 964, h: 1024, title: '图片标题2' }, { html: '<div style="width:100%;"><img src="https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_b.jpg" style="width:50%;height:200px;" /><img src="https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_b.jpg" style="width:50%;height:200px;" /></div>', title: '图片标题4' }, ]; // define options (if needed) var options = { captionEl: true, loop: false, index: 0 // start at first slide }; // Initializes and opens PhotoSwipe var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options); gallery.init(); //监听事件 gallery.listen('beforeChange', function () { console.log("before change."); }); gallery.listen('afterChange', function () { console.log("after change."); }); }
View Code
UI的默认显示效果在
photoswipe-ui-default.js文件中进行了配置,可通过options参数修改UI的显示效果.
官方文档地址: http://photoswipe.com/documentation/getting-started.html
相关文章推荐
- 移动端图片放大滑动查看-插件photoswipe的使用
- 使用swiper 轮播插件ajax 请求加载图片时,无法滑动
- 【总结】手机图片预览插件photoswipe使用总结 分类: photoswipe 图片预览 photoswipe3.0.5 2014-11-13 14:03 352人阅读 评论(0) 收藏
- PC端、移动端都可以用的图片轮播(左右滑动切换)插件及使用
- 【分享】JS图片滑动渐显渐隐插件-附使用方法。
- 使用swiper 轮播插件ajax 请求加载图片时,无法滑动问题
- 移动端图片放大滑动查看-插件photoswipe的使用
- 插件: images and custom options,magento添加多图片,自定义选项custom options,catelog,分类的插件以及使用方法!!!
- 基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
- [转]使用jquery插件实现图片延迟加载技术
- 19个非常有用的 jQuery 图片滑动插件和教程
- (译)如何使用cocos2d制作一个滑动图片游戏教程:第二部分(完)
- 基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
- 40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
- 19个非常有用的 jQuery 图片滑动插件和教程
- 使用jquery的lazy loader插件实现图片的延迟加载
- 40个有创意的jQuery图片和内容滑动及弹出插件收藏集之一
- 插件: images and custom options,magento添加多图片,自定义选项custom options,catelog,分类的插件以及使用方法!!!
- jQuery Lightbox 图片展示插件使用说明
- 19个非常有用的jQuery图片滑动插件和教程