<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>演示：支持移动设备的纯Javascript画廊</title>
<meta name="keywords" content="javascript,图片画廊" />
<meta name="description" content="Helloweba文章结合实例演示HTML5、CSS3、jquery、PHP等WEB技术应用。" />
<!--必要样式-->
<link rel="stylesheet" href="http://www.17sucai.com/preview/400708/2015-08-28/2015-08-26-html5-left-nav/css/photoswipe.css">
<link rel="stylesheet" href="http://www.17sucai.com/preview/400708/2015-08-28/2015-08-26-html5-left-nav/css/default-skin/default-skin.css">
<style>
.pnav{margin-top:30px;text-align:center;line-height:24px; font-size:16px}
.pnav a{padding:4px}
.pnav a.cur{background:#007bc4;color:#fff;}
.demo{width:80%; margin:10px auto}
/*必要样式*/
#photos{width:150px; border:1px solid #d3d3d3;margin:20px auto; text-align:center;padding:4px;cursor:pointer;position:relative}
#photos p{position:absolute; bottom:0;left:0;padding:4px;background:#000;color:#fff}
.my-gallery {
width: 100%;
float: left;
}
.my-gallery img {
width: 100%;
height: auto;
}
.my-gallery figure {
display: block;
float: left;
margin: 0 5px 5px 0;
width: 150px;
}
.my-gallery figcaption {
display: none;
}
</style>
<script src="http://www.17sucai.com/preview/400708/2015-08-28/2015-08-26-html5-left-nav/js/photoswipe.min.js"></script>
<script src="http://www.17sucai.com/preview/400708/2015-08-28/2015-08-26-html5-left-nav/js/photoswipe-ui-default.min.js"></script>
</head>
<body>
<div id="main">
<p class="pnav"><a href="index.html">图集模式</a> <a href="index2.html" class="cur">列表模式</a></p>
<div class="demo">
<p style="font-size:16px; margin:20px auto">请点击图片观看大图</p>
<div class="my-gallery">
<figure>
<a href="images/s1.jpg" data-size="800x1142"><img src="images/s1_m.jpg" alt="Image description" /></a>
<figcaption itemprop="caption description">图片1</figcaption>
</figure>
<figure>
<a href="images/s2.jpg" data-size="800x1142"><img src="images/s2_m.jpg" alt="Image description" /></a>
<figcaption itemprop="caption description">图片2</figcaption>
</figure>
<figure>
<a href="images/s3.jpg" data-size="800x1142"><img src="images/s3_m.jpg" alt="Image description" /></a>
<figcaption itemprop="caption description">图片3</figcaption>
</figure>
<figure>
<a href="images/s4.jpg" data-size="800x1142"><img src="images/s4_m.jpg" alt="Image description" /></a>
<figcaption itemprop="caption description">图片4</figcaption>
</figure>
<figure>
<a href="images/s5.jpg" data-size="800x1142"><img src="images/s5_m.jpg" alt="Image description" /></a>
<figcaption itemprop="caption description">图片5</figcaption>
</figure>
<figure>
<a href="images/s5.jpg" data-size="800x1142"><img src="images/s5_m.jpg" alt="Image description" /></a>
<figcaption itemprop="caption description">图片5</figcaption>
</figure>
<figure>
<a href="images/s5.jpg" data-size="800x1142"><img src="images/s5_m.jpg" alt="Image description" /></a>
<figcaption itemprop="caption description">图片5</figcaption>
</figure>
</div>
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<div class="pswp__bg"></div>
<div class="pswp__scroll-wrap">
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<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>
<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">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var initPhotoSwipeFromDOM = function(gallerySelector) {
// parse slide data (url, title, size ...) from DOM elements
// (children of gallerySelector)
var parseThumbnailElements = function(el) {
var thumbElements = el.childNodes,
numNodes = thumbElements.length,
items = [],
figureEl,
linkEl,
size,
item;
for(var i = 0; i < numNodes; i++) {
figureEl = thumbElements[i]; // <figure> element
// include only element nodes
if(figureEl.nodeType !== 1) {
continue;
}
linkEl = figureEl.children[0]; // <a> element
size = linkEl.getAttribute('data-size').split('x');
// create slide object
item = {
src: linkEl.getAttribute('href'),
w: parseInt(size[0], 10),
h: parseInt(size[1], 10)
};
if(figureEl.children.length > 1) {
// <figcaption> content
item.title = figureEl.children[1].innerHTML;
}
if(linkEl.children.length > 0) {
// <img> thumbnail element, retrieving thumbnail url
item.msrc = linkEl.children[0].getAttribute('src');
}
item.el = figureEl; // save link to element for getThumbBoundsFn
items.push(item);
}
return items;
};
// find nearest parent element
var closest = function closest(el, fn) {
return el && ( fn(el) ? el : closest(el.parentNode, fn) );
};
// triggers when user clicks on thumbnail
var onThumbnailsClick = function(e) {
e = e || window.event;
e.preventDefault ? e.preventDefault() : e.returnValue = false;
var eTarget = e.target || e.srcElement;
// find root element of slide
var clickedListItem = closest(eTarget, function(el) {
return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
});
if(!clickedListItem) {
return;
}
// find index of clicked item by looping through all child nodes
// alternatively, you may define index via data- attribute
var clickedGallery = clickedListItem.parentNode,
childNodes = clickedListItem.parentNode.childNodes,
numChildNodes = childNodes.length,
nodeIndex = 0,
index;
for (var i = 0; i < numChildNodes; i++) {
if(childNodes[i].nodeType !== 1) {
continue;
}
if(childNodes[i] === clickedListItem) {
index = nodeIndex;
break;
}
nodeIndex++;
}
if(index >= 0) {
// open PhotoSwipe if valid index found
openPhotoSwipe( index, clickedGallery );
}
return false;
};
// parse picture index and gallery index from URL (#&pid=1&gid=2)
H5 PhotoSwipe简单例子
需积分: 10 151 浏览量
2017-10-15
21:50:30
上传
评论 1
收藏 280KB RAR 举报
preview.rar （13个子文件） 
preview 
手机幻灯片.html 4KB images 
s4_m.jpg 4KB s1_m.jpg 7KB s4.jpg 21KB s2.jpg 81KB s3.jpg 51KB s1.jpg 33KB s2_m.jpg 13KB s3_m.jpg 11KB s5.jpg 45KB s5_m.jpg 8KB 手机幻灯片2.html 11KB
.project 896B资源评论
