以模式滑动多张照片

Question

I am trying to display multiple photos in the modal window once a user clicks a photo from the gallery

Here is the Codepen Demo

The problem I'm facing is that the photos aren't being pulled from the gallery but from an external source, for instance lets say these two photos would be displayed inside the modal window once a user clicks a gallery photo, image 1 , image 2 .

Since photoswipe already hooks into the existing gallery (gridrotator) from the demo, I'm having difficulty also attaching additional images. Once I can get multiple images I can use photoswipes built in arrows or create my own pagination to control the photos.

I'm unsure how to hook into additional image sources when I'm already hooking into gridrotator as the docs state here Photoswipe Docs Demo

Here is the Javascript

var initPhotoSwipeFromDOM = function(gallerySelector) {

 var parseThumbnailElements = function(el) {
   var thumbElements = el.childNodes,
     numNodes = thumbElements.length,
     items = [],
     el,
     childElements,
     thumbnailEl,
     size,
     item;

   for (var i = 0; i < numNodes; i++) {
     el = thumbElements[i];

     // include only element nodes
     if (el.nodeType !== 1) {
       continue;
     }

     childElements = el.children[0];

     size = el.getAttribute('data-size').split('x');

     // create slide object
     item = {
       src: el.getAttribute('href'),
       w: parseInt(size[0], 10),
       h: parseInt(size[1], 10),
       author: el.getAttribute('data-author')
     };

     item.el = el; // save link to element for getThumbBoundsFn

     if (childElements.length > 0) {
       item.msrc = childElements[0].getAttribute('src'); // thumbnail url
       item.title = childElements[0].innerHTML; // caption (contents of figure)

     }

     var mediumSrc = el.getAttribute('data-med');
     if (mediumSrc) {
       size = el.getAttribute('data-med-size').split('x');
       // "medium-sized" image
       item.m = {
         src: mediumSrc,
         w: parseInt(size[0], 10),
         h: parseInt(size[1], 10)
       };
     }
     // original image
     item.o = {
       src: item.src,
       w: item.w,
       h: item.h
     };

     items.push(item);
   }

   return items;
 };

 // find nearest parent element
 var closest = function closest(el, fn) {
   return el && (fn(el) ? el : closest(el.parentNode, fn));
 };

 var onThumbnailsClick = function(e) {
   e = e || window.event;
   e.preventDefault ? e.preventDefault() : e.returnValue = false;

   var eTarget = e.target || e.srcElement;

   var clickedListItem = closest(eTarget, function(el) {
     return el.tagName === 'A';
   });

   if (!clickedListItem) {
     return;
   }

   var clickedGallery = clickedListItem.parentNode;

   var 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) {
     openPhotoSwipe(index, clickedGallery);
   }
   return false;
 };

 var photoswipeParseHash = function() {
   var hash = window.location.hash.substring(1),
     params = {};

   if (hash.length < 5) { // pid=1
     return params;
   }

   var vars = hash.split('&');
   for (var i = 0; i < vars.length; i++) {
     if (!vars[i]) {
       continue;
     }
     var pair = vars[i].split('=');
     if (pair.length < 2) {
       continue;
     }
     params[pair[0]] = pair[1];
   }

   if (params.gid) {
     params.gid = parseInt(params.gid, 10);
   }

   if (!params.hasOwnProperty('pid')) {
     return params;
   }
   params.pid = parseInt(params.pid, 10);
   return params;
 };

 var openPhotoSwipe = function(index, galleryElement, disableAnimation) {
   var pswpElement = document.querySelectorAll('.pswp')[0],
     gallery,
     options,
     items;

   items = parseThumbnailElements(galleryElement);

   // define options (if needed)
   options = {
     index: index,

     history: false,

     galleryUID: galleryElement.getAttribute('data-pswp-uid'),

     getThumbBoundsFn: function(index) {
       // See Options->getThumbBoundsFn section of docs for more info
       var thumbnail = items[index].el.children[0],
         pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
         rect = thumbnail.getBoundingClientRect();

       return {
         x: rect.left,
         y: rect.top + pageYScroll,
         w: rect.width
       };
     },

     addCaptionHTMLFn: function(item, captionEl, isFake) {
       if (!item.title) {
         captionEl.children[0].innerText = '';
         return false;
       }
       captionEl.children[0].innerHTML = item.title + '<br/><small>Photo: ' + item.author + '</small>';
       return true;
     }

   };

   var radios = document.getElementsByName('gallery-style');
   for (var i = 0, length = radios.length; i < length; i++) {
     if (radios[i].checked) {
       if (radios[i].id == 'radio-all-controls') {

       } else if (radios[i].id == 'radio-minimal-black') {
         options.mainClass = 'pswp--minimal--dark';
         options.barsSize = {
           top: 0,
           bottom: 0
         };
         options.captionEl = false;
         options.fullscreenEl = false;
         options.shareEl = false;
         options.bgOpacity = 0.85;
         options.tapToClose = true;
         options.tapToToggleControls = false;
       }
       break;
     }

   }

   if (disableAnimation) {
     options.showAnimationDuration = 0;
   }

   // Pass data to PhotoSwipe and initialize it
   gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);

   // see: http://photoswipe.com/documentation/responsive-images.html
   var realViewportWidth,
     useLargeImages = false,
     firstResize = true,
     imageSrcWillChange;

   gallery.listen('beforeResize', function() {

     var dpiRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;
     dpiRatio = Math.min(dpiRatio, 2.5);
     realViewportWidth = gallery.viewportSize.x * dpiRatio;

     if (realViewportWidth >= 1200 || (!gallery.likelyTouchDevice && realViewportWidth > 800) || screen.width > 1200) {
       if (!useLargeImages) {
         useLargeImages = true;
         imageSrcWillChange = true;
       }

     } else {
       if (useLargeImages) {
         useLargeImages = false;
         imageSrcWillChange = true;
       }
     }

     if (imageSrcWillChange && !firstResize) {
       gallery.invalidateCurrItems();
     }

     if (firstResize) {
       firstResize = false;
     }

     imageSrcWillChange = false;

   });

   gallery.listen('gettingData', function(index, item) {
     if (useLargeImages) {
       item.src = item.o.src;
       item.w = item.o.w;
       item.h = item.o.h;
     } else {
       item.src = item.o.src;
       item.w = item.o.w;
       item.h = item.o.h;
     }
   });

   gallery.init();
 };

 // select all gallery elements
 var galleryElements = document.querySelectorAll(gallerySelector);
 for (var i = 0, l = galleryElements.length; i < l; i++) {
   galleryElements[i].setAttribute('data-pswp-uid', i + 1);
   galleryElements[i].onclick = onThumbnailsClick;
 }

 // Parse URL and open gallery if it contains #&pid=3&gid=1
 var hashData = photoswipeParseHash();
 if (hashData.pid > 0 && hashData.gid > 0) {
   openPhotoSwipe(hashData.pid - 1, galleryElements[hashData.gid - 1], true);
 }
};

initPhotoSwipeFromDOM('.gallery');
})();

This demo uses Animated Responsive Image Grid & photoswipe

Answer 1

var parseThumbnailElements = function(el) {
   var thumbElements = el.childNodes,
     numNodes = thumbElements.length,
     items = [],
     el,
     childElements,
     thumbnailEl,
     size,
     item;

   for (var i = 0; i < numNodes; i++) {
         el = thumbElements[i]; //li
         el = el.children[0];  //a

Add one line to make 'el' right Node. It's work http://codepen.io/anon/pen/rxgMww