做一个移动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=阿尔法罗密欧}]}
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
