通过GitHub 下载PhotoSwipe  相关的库

     
      //引入相关的css和js文件及皮肤

connect.js

1 document.writeln("
     ");  2 document.writeln("
     
      ");  3 document.writeln("");  4 document.writeln("    
      ");  6 document.writeln("    
      
       <\/div>");  7 document.writeln("");  8 document.writeln("    
       ");  9 document.writeln("    
       
        "); 10 document.writeln(""); 11 document.writeln("        
        "); 14 document.writeln("        
        
         "); 15 document.writeln("            
         
          <\/div>"); 16 document.writeln("            
          
           <\/div>"); 17 document.writeln(" 
           
            <\/div>"); 18 document.writeln(" <\/div>"); 19 document.writeln(""); 20 document.writeln(" 
            "); 21 document.writeln(" 
            
             "); 22 document.writeln(""); 23 document.writeln(" 
             
              "); 24 document.writeln(""); 25 document.writeln(" 
              "); 26 document.writeln(""); 27 document.writeln(" 
              
               <\/div>"); 28 document.writeln(""); 29 document.writeln(" 
               <\/button>"); 30 document.writeln(""); 31 document.writeln(""); 32 document.writeln(" 
               <\/button>"); 33 document.writeln(""); 34 document.writeln(" 
               <\/button>"); 35 document.writeln(""); 36 document.writeln(" 
                "); 37 document.writeln(" 
                "); 38 document.writeln(" 
                
                 "); 39 document.writeln(" 
                 
                  "); 40 document.writeln(" 
                  
                   "); 41 document.writeln(" 
                   
                    <\/div>"); 42 document.writeln(" <\/div>"); 43 document.writeln(" <\/div>"); 44 document.writeln(" <\/div>"); 45 document.writeln(" <\/div>"); 46 document.writeln(""); 47 document.writeln(" 
                    
                     "); 48 document.writeln(" 
                     
                      <\/div>"); 49 document.writeln(" <\/div>"); 50 document.writeln(""); 51 document.writeln(" 
                     
                    
                   
                  
                 
                
               "); 52 document.writeln(" <\/button>"); 53 document.writeln(""); 54 document.writeln(" 
               "); 55 document.writeln(" <\/button>"); 56 document.writeln(""); 57 document.writeln(" 
                
                 "); 58 document.writeln(" 
                 
                  <\/div>"); 59 document.writeln(" <\/div>"); 60 document.writeln(""); 61 document.writeln(" <\/div>"); 62 document.writeln(""); 63 document.writeln(" <\/div>"); 64 document.writeln(""); 65 document.writeln("<\/div>"); 66 //因为作者没有把相关的div放进js里，所以这边通过打印，具体可以观看官方文档得知为什么要这么做。 67 (function() { 68 69 var initPhotoSwipeFromDOM = function(gallerySelector) { 70 71 var parseThumbnailElements = function(el) { 72 var thumbElements = el.childNodes, 73 numNodes = thumbElements.length, 74 items = [], 75 el, 76 childElements, 77 thumbnailEl, 78 size, 79 item; 80 81 for(var i = 0; i < numNodes; i++) { 82 el = thumbElements[i]; 83 84 // include only element nodes 85 if(el.nodeType !== 1) { 86 continue; 87 } 88 89 childElements = el.children; 90 91 size = el.getAttribute('data-size').split('x'); 92 93 // create slide object 94 item = { 95 src: el.getAttribute('href'), 96 w: parseInt(size[0], 10), 97 h: parseInt(size[1], 10), 98 author: el.getAttribute('data-author') 99 };100 101 item.el = el; // save link to element for getThumbBoundsFn102 103 if(childElements.length > 0) {104 item.msrc = childElements[0].getAttribute('src'); // thumbnail url105 if(childElements.length > 1) {106 item.title = childElements[1].innerHTML; // caption (contents of figure)107 }108 }109 110 111 var mediumSrc = el.getAttribute('data-med');112 if(mediumSrc) {113 size = el.getAttribute('data-med-size').split('x');114 // "medium-sized" image115 item.m = {116 src: mediumSrc,117 w: parseInt(size[0], 10),118 h: parseInt(size[1], 10)119 };120 }121 // original image122 item.o = {123 src: item.src,124 w: item.w,125 h: item.h126 };127 128 items.push(item);129 }130 131 return items;132 };133 134 // find nearest parent element135 var closest = function closest(el, fn) {136 return el && ( fn(el) ? el : closest(el.parentNode, fn) );137 };138 139 var onThumbnailsClick = function(e) {140 e = e || window.event;141 e.preventDefault ? e.preventDefault() : e.returnValue = false;142 143 var eTarget = e.target || e.srcElement;144 145 var clickedListItem = closest(eTarget, function(el) {146 return el.tagName === 'A';147 });148 149 if(!clickedListItem) {150 return;151 }152 153 var clickedGallery = clickedListItem.parentNode;154 155 var childNodes = clickedListItem.parentNode.childNodes,156 numChildNodes = childNodes.length,157 nodeIndex = 0,158 index;159 160 for (var i = 0; i < numChildNodes; i++) {161 if(childNodes[i].nodeType !== 1) { 162 continue; 163 }164 165 if(childNodes[i] === clickedListItem) {166 index = nodeIndex;167 break;168 }169 nodeIndex++;170 }171 172 if(index >= 0) {173 openPhotoSwipe( index, clickedGallery );174 }175 return false;176 };177 178 var photoswipeParseHash = function() {179 var hash = window.location.hash.substring(1),180 params = {};181 182 if(hash.length < 5) { // pid=1183 return params;184 }185 186 var vars = hash.split('&');187 for (var i = 0; i < vars.length; i++) {188 if(!vars[i]) {189 continue;190 }191 var pair = vars[i].split('='); 192 if(pair.length < 2) {193 continue;194 } 195 params[pair[0]] = pair[1];196 }197 198 if(params.gid) {199 params.gid = parseInt(params.gid, 10);200 }201 202 return params;203 };204 205 var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {206 var pswpElement = document.querySelectorAll('.pswp')[0],207 gallery,208 options,209 items;210 211 items = parseThumbnailElements(galleryElement);212 213 // define options (if needed)214 options = {215 216 galleryUID: galleryElement.getAttribute('data-pswp-uid'),217 218 getThumbBoundsFn: function(index) {219 // See Options->getThumbBoundsFn section of docs for more info220 var thumbnail = items[index].el.children[0],221 pageYScroll = window.pageYOffset || document.documentElement.scrollTop,222 rect = thumbnail.getBoundingClientRect(); 223 224 return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};225 },226 227 addCaptionHTMLFn: function(item, captionEl, isFake) {228 if(!item.title) {229 captionEl.children[0].innerText = '';230 return false;231 }232 captionEl.children[0].innerHTML = item.title + '
                  
                  Photo: ' + item.author + '';233 return true;234 }235 236 };237 238 239 if(fromURL) {240 if(options.galleryPIDs) {241 // parse real index when custom PIDs are used 242 // http://photoswipe.com/documentation/faq.html#custom-pid-in-url243 for(var j = 0; j < items.length; j++) {244 if(items[j].pid == index) {245 options.index = j;246 break;247 }248 }249 } else {250 options.index = parseInt(index, 10) - 1;251 }252 } else {253 options.index = parseInt(index, 10);254 }255 256 // exit if index not found257 if( isNaN(options.index) ) {258 return;259 }260 261 262 263 var radios = document.getElementsByName('gallery-style');264 for (var i = 0, length = radios.length; i < length; i++) {265 if (radios[i].checked) {266 if(radios[i].id == 'radio-all-controls') {267 268 } else if(radios[i].id == 'radio-minimal-black') {269 options.mainClass = 'pswp--minimal--dark';270 options.barsSize = {top:0,bottom:0};271 options.captionEl = false;272 options.fullscreenEl = false;273 options.shareEl = false;274 options.bgOpacity = 0.85;275 options.tapToClose = true;276 options.tapToToggleControls = false;277 }278 break;279 }280 }281 282 if(disableAnimation) {283 options.showAnimationDuration = 0;284 }285 286 // Pass data to PhotoSwipe and initialize it287 gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);288 289 // see: http://photoswipe.com/documentation/responsive-images.html290 var realViewportWidth,291 useLargeImages = false,292 firstResize = true,293 imageSrcWillChange;294 295 gallery.listen('beforeResize', function() {296 297 var dpiRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;298 dpiRatio = Math.min(dpiRatio, 2.5);299 realViewportWidth = gallery.viewportSize.x * dpiRatio;300 301 302 if(realViewportWidth >= 1200 || (!gallery.likelyTouchDevice && realViewportWidth > 800) || screen.width > 1200 ) {303 if(!useLargeImages) {304 useLargeImages = true;305 imageSrcWillChange = true;306 }307 308 } else {309 if(useLargeImages) {310 useLargeImages = false;311 imageSrcWillChange = true;312 }313 }314 315 if(imageSrcWillChange && !firstResize) {316 gallery.invalidateCurrItems();317 }318 319 if(firstResize) {320 firstResize = false;321 }322 323 imageSrcWillChange = false;324 325 });326 327 gallery.listen('gettingData', function(index, item) {328 if( useLargeImages ) {329 item.src = item.o.src;330 item.w = item.o.w;331 item.h = item.o.h;332 } else {333 item.src = item.m.src;334 item.w = item.m.w;335 item.h = item.m.h;336 }337 });338 339 gallery.init();340 };341 342 // select all gallery elements343 var galleryElements = document.querySelectorAll( gallerySelector );344 for(var i = 0, l = galleryElements.length; i < l; i++) {345 galleryElements[i].setAttribute('data-pswp-uid', i+1);346 galleryElements[i].onclick = onThumbnailsClick;347 }348 349 // Parse URL and open gallery if it contains #&pid=3&gid=1350 var hashData = photoswipeParseHash();351 if(hashData.pid && hashData.gid) {352 openPhotoSwipe( hashData.pid, galleryElements[ hashData.gid - 1 ], true, true );353 }354 };355 356 initPhotoSwipeFromDOM('.photoswipe');357 358 })();
                 
                
              
             
            
           
          
         
        
       
      
     

我们通过名为photoswipe的class通知要用到的子元素。

a里的图片为放大之后的图片，img里的图片为可实际查看的小图，data-size为要放大的图片大小。

1 
     
       2     
       3          4      5     
       6          7      8     
       9         10     11 
     

拓展：因项目需要，以及通过后台渲染出的图片大小或外链的图片，总不可能一个个设置data-size，于是用jQuery配合js写了几段代码。

1 $(document).ready(function(){ //如果认为代码写的很乱可以自行修改 2     var pic=$("[data-size]"); 3     pic.each(function(){ 4     var _this = $(this); 5     var images = new Image(); //实例化图片 6     images.src = _this.find('img').attr('src');    //获取小图的链接 进行计算 7     images.onload = function(){  //当图片加载完 8     var tpW = images.width; //图片实际宽度 9     var tpH = images.height //图片实际高度10     var winW = $(window).width(); //浏览器实际宽度11     var winH = $(window).height(); //浏览器实际高度12     var tpRatio = Math.min((winW/tpW),(winH/tpH));13     var getW = tpW * tpRatio;14     var getH = tpH * tpRatio; // 屏幕高度 * 图片宽度 / 图片高度15     _this.attr("data-size",parseInt(getW,10)+"x"+parseInt(getH,10));16     }17  });18 });

该插件是自适应的，具体可以通过谷歌浏览器查看该插件的炫酷之处。