做一個移動web功能，需要展示多張圖片，在網上找了一些資料，學著使用了photoswipe。初次使用，可能沒有用到精髓，好在功能實現了。在此做一個記錄，以備後期查看。
在官方的代碼上刪除了一些功能。每個連結點擊展示的圖片不同。
html head 引用的js以及css（用到了jquerymobile）
<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0,minimum-scale=1.0,user-scabable=no"> <link rel="stylesheet" href="/public/lib/jquerymobile/jquery.mobile-1.4.5.css"> <script src="/public/lib/jquerymobile/jquery.mobile-1.4.5.js"></script> <script src="/public/lib/jquerymobile/jquery.js"></script> <link rel="stylesheet" href="/public/lib/jquerymobile/jquery.mobile-1.4.5.min.css"> <script src="/public/lib/jquerymobile/jquery.min.js"></script> <script src="/public/lib/jquerymobile/jquery.mobile-1.4.5.min.js"></script> <!-- Core CSS file --> <link rel="stylesheet" href="/public/lib/photoswipe/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="/public/lib/photoswipe/default-skin/default-skin.css"> <!-- Core JS file --> <script src="/public/lib/photoswipe/photoswipe.min.js"></script> <!-- UI JS file --> <script src="/public/lib/photoswipe/photoswipe-ui-default.min.js"></script> <style>.title { font-size: 2.0em; FONT-FAMILY: 仿宋_GB2312; font-weight: bold;}</style> </head> <body> <div data-role="page"> <div data-role="main" class="ui-content"> <table style="width: 100%"> <thead> <tr> <td> <img src="${map.logo.get(0).get('picUrl')}" style="" /> </td> <td align="center"> <span class="title"> ${map.logo.get(0).get("name")} ${map.logo.get(0).get("place")}</span> </td> </tr> </thead> </table> #{list items:map.info,as:'info'} <div data-role="collapsible"> <h4 class="title"> ${info.get("name")} </h4> <ul data-role="listview" data-inset="true"> #{list items:info.get("subs"),as:'subs'} <li> <a data-rel="popup" data-position-to="window" href="#" onclick="openPhotoSwipe('${subs.pics}')"> #{if subs.get('pic').size()>0} <img style="margin-top: 5px;" src="${subs.get('pic').get(0).get('url')}"> #{/if} <div style="margin-left: 10%"> <span>${subs.get("name")}</span> <br> <span>${subs.get("price")}</span> </div> </a> </li> #{/list} </ul> </div> #{/list} <!-- 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> <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR --> <!-- element will get class pswp__preloader--active when preloader is running --> <div class="pswp__preloader"> </div> </div> <div class="pswp__caption"> <div class="pswp__caption__center"></div> </div> </div> </div> </div> </div> </div> <script type="text/javascript"> function openPhotoSwipe(data) { var d = data.replace(new RegExp(/(=)/g), ":"); var arr = eval('(' + d + ')'); var pswpElement = document.querySelectorAll('.pswp')[0]; // build items array var items = []; for ( var i = 0; i < arr.length; i++) { items.push({src:arr[i].url,w:964,h:1024}); console.log(arr[i].url); } // 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(); }; //openPhotoSwipe(); //document.getElementById('btn').onclick = openPhotoSwipe;</script> </body></html>
資料
{logo=[{id=1, picUrl=http://car1.autoimg.cn/logo/brand/100/130020166435154599.jpg, name=阿爾法羅密歐, place=意大利}], info=[{id=1, subs=[{id=2, parentId=1, pics=[{url="http://car1.autoimg.cn/upload/spec/165/u_165255286612.jpg"}, {url="http://car1.autoimg.cn/upload/spec/165/u_165326295088.jpg"}], price=35.00萬, name=ALFA 156 (停售) , pic=[{id=155, url=http://car1.autoimg.cn/upload/spec/165/u_165255286612.jpg}, {id=156, url=http://car1.autoimg.cn/upload/spec/165/u_165326295088.jpg}]}], name=阿爾法羅密歐}]}Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
