移动web HTML5使用photoswipe 4.1.1模仿微信朋友圈图片放大浏览
先来几张效果图：http://images2015.cnblogs.com/blog/679722/201604/679722-20160417220201582-1609347947.jpg点击其中一张照片可放大，可支持图片文字描述：http://images2015.cnblogs.com/blog/679722/201604/679722-20160417220245488-2053695701.jpg同时支持分享功能：http://images2015.cnblogs.com/blog/679722/201604/679722-20160417220334238-1267352496.jpg支持手势放大缩小http://images2015.cnblogs.com/blog/679722/201604/679722-20160417220427551-574928511.jpg使用js框架是PhotoSwipe。PhotoSwipe是一个图片放大插件，兼容pc和移动端，经历过多个版本的迭代且一直在不断更新，踩过的坑不知凡几，在移动端有着巨大的优势。
1、可控制多种风格如：
标题、分享、全屏按钮，点击事件、是否加入字幕，背景透明等。
2、可支持移动端触摸手势兼容pc端
所有的基本手势支持：滑动下一个或上一个，拖动平移、缩放、放大或关闭，点击切换控件，双击放大或缩放。
3、分享
默认的UI有一个按钮，分享链接。默认的链接是facebook，推特和Pinterest，但你可以通过API设置分享类型。
4、用户界面
用户界面是完全从核心脚本分离。完全可以自定义界面。默认photoswipe UI是响应式的，桌面、平板电脑和移动设备完全可以使用。 5、更多功能等你发现。官网：http://photoswipe.com/github：https://github.com/dimsemenov/photoswipe
如何使用？1、在官网下载PhotoSwipe，在页面中引入<link rel="stylesheet prefetch" href="css/photoswipe.css"><link rel="stylesheet prefetch" href="css/default-skin/default-skin.css"><script src="js/photoswipe.js"></script><script src="js/photoswipe-ui-default.min.js"></script>
2、页面中必须加入以下代码结构（此结构是插件图片浏览必须代码，作者并没有集成到js中，所以使用者必须手动加入自己的网页中）：http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif View Code
3、需要浏览的图片加入photoswipe结构代码，这里需要注意的是data-pswp-uid在每个相册中必须是唯一的，data-size是指定放大时图片显示的宽和高，若指定的宽高与图片不符会导致显示的图片变形；目前还没找到去掉data-size的办法，但然有时间可以找下替代办法。http://common.cnblogs.com/images/copycode.gif
<!--data-pswp-uid在每个相册中必须是唯一的，data-size指定放大时图片显示的宽和高--><div class="my-gallery" data-pswp-uid="1"> <figure> <a href="img/m3.jpg" data-size="670x712"> <img src="img/th1.jpg"> </a> </figure></div>http://common.cnblogs.com/images/copycode.gif
4、加入js代码，此代码作者也没有集成到photoswipe框架中，需要自己手动加入网页里http://common.cnblogs.com/images/copycode.gif
1 <script type="text/javascript">2 var initPhotoSwipeFromDOM = function(gallerySelector) {3 4 // 解析来自DOM元素幻灯片数据（URL，标题，大小...）5 // (children of gallerySelector)6 var parseThumbnailElements = function(el) {7 var thumbElements = el.childNodes,8 numNodes = thumbElements.length,9 items = [], 10 figureEl, 11 linkEl, 12 size, 13 item; 1516 for(var i = 0; i < numNodes; i++) { 1718 figureEl = thumbElements; // <figure> element 1920 // 仅包括元素节点 21 if(figureEl.nodeType !== 1) { 22 continue; 23 } 25 linkEl = figureEl.children; // <a> element 26 27 size = linkEl.getAttribute('data-size').split('x'); 2829 // 创建幻灯片对象 30 item = { 31 src: linkEl.getAttribute('href'), 32 w: parseInt(size, 10), 33 h: parseInt(size, 10) 34 }; 35363738 if(figureEl.children.length > 1) { 39 // <figcaption> content 40 item.title = figureEl.children.innerHTML;41 } 4243 if(linkEl.children.length > 0) { 44 // <img> 缩略图节点, 检索缩略图网址 45 item.msrc = linkEl.children.getAttribute('src'); 46 }4748 item.el = figureEl; // 保存链接元素 for getThumbBoundsFn 49 items.push(item); 50 } 5152 return items; 53 }; 5455 // 查找最近的父节点 56 var closest = function closest(el, fn) { 57 return el && ( fn(el) ? el : closest(el.parentNode, fn) ); 58 }; 5960 // 当用户点击缩略图触发 61 var onThumbnailsClick = function(e) { 62 e = e || window.event; 63 e.preventDefault ? e.preventDefault() : e.returnValue = false; 6465 var eTarget = e.target || e.srcElement; 6667 // find root element of slide 68 var clickedListItem = closest(eTarget, function(el) { 69 return (el.tagName && el.tagName.toUpperCase() === 'FIGURE'); 70 }); 7172 if(!clickedListItem) { 73 return; 74 } 7576 // find index of clicked item by looping through all child nodes 77 // alternatively, you may define index via data- attribute 78 var clickedGallery = clickedListItem.parentNode, 79 childNodes = clickedListItem.parentNode.childNodes, 80 numChildNodes = childNodes.length, 81 nodeIndex = 0, 82 index; 8384 for (var i = 0; i < numChildNodes; i++) { 85 if(childNodes.nodeType !== 1) {86 continue;87 } 8889 if(childNodes === clickedListItem) { 90 index = nodeIndex; 91 break; 92 } 93 nodeIndex++; 94 } 95969798 if(index >= 0) { 99 // open PhotoSwipe if valid index found100 openPhotoSwipe( index, clickedGallery );101 }102 return false;103 };104 105 // parse picture index and gallery index from URL (#&pid=1&gid=2)106 var photoswipeParseHash = function() {107 var hash = window.location.hash.substring(1),108 params = {};109 110 if(hash.length < 5) {111 return params;112 }113 114 var vars = hash.split('&');115 for (var i = 0; i < vars.length; i++) {116 if(!vars) {117 continue;118 }119 var pair = vars.split('=');120 if(pair.length < 2) {121 continue;122 } 123 params] = pair;124 }125 126 if(params.gid) {127 params.gid = parseInt(params.gid, 10);128 }129 130 return params;131 };132 133 var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {134 var pswpElement = document.querySelectorAll('.pswp'),135 gallery,136 options,137 items;138 139 items = parseThumbnailElements(galleryElement);140 141 // 这里可以定义参数142 options = {143 barsSize: { 144 top: 100,145 bottom: 100146 }, 147 fullscreenEl : false, // 是否支持全屏按钮148 shareButtons: , // 分享按钮153 154 // define gallery index (for URL)155 galleryUID: galleryElement.getAttribute('data-pswp-uid'),156 157 getThumbBoundsFn: function(index) {158 // See Options -> getThumbBoundsFn section of documentation for more info159 var thumbnail = items.el.getElementsByTagName('img'), // find thumbnail160 pageYScroll = window.pageYOffset || document.documentElement.scrollTop,161 rect = thumbnail.getBoundingClientRect(); 162 163 return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};164 }165 166 };167 168 // PhotoSwipe opened from URL169 if(fromURL) {170 if(options.galleryPIDs) {171 // parse real index when custom PIDs are used 172 for(var j = 0; j < items.length; j++) {173 if(items.pid == index) {174 options.index = j;175 break;176 }177 }178 } else {179 // in URL indexes start from 1180 options.index = parseInt(index, 10) - 1;181 }182 } else {183 options.index = parseInt(index, 10);184 }185 186 // exit if index not found187 if( isNaN(options.index) ) {188 return;189 }190 191 if(disableAnimation) {192 options.showAnimationDuration = 0;193 }194 195 // Pass data to PhotoSwipe and initialize it196 gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);197 gallery.init();198 };199 200 // loop through all gallery elements and bind events201 var galleryElements = document.querySelectorAll( gallerySelector );202 203 for(var i = 0, l = galleryElements.length; i < l; i++) {204 galleryElements.setAttribute('data-pswp-uid', i+1);205 galleryElements.onclick = onThumbnailsClick;206 }207 208 // Parse URL and open gallery if it contains #&pid=3&gid=1209 var hashData = photoswipeParseHash();210 if(hashData.pid && hashData.gid) {211 openPhotoSwipe( hashData.pid ,galleryElements[ hashData.gid - 1 ], true, true );212 }213 };214 215 // execute above function216 initPhotoSwipeFromDOM('.my-gallery');217 </script>http://common.cnblogs.com/images/copycode.gif
加入以上代码即可完成一个图片浏览功能、相册、画廊为了方便大家直观了解，我做了一个demo出来： PhotoSwipe4.1.1Demo：http://download.csdn.net/detail/cq371356447/9494081
页:
[1]