Question

我试图在用户点击图库中的照片时在模态窗口中显示多张照片

我面临的问题是照片不是从图库中提取的，而是来自外部来源，例如，一旦用户点击图库照片，这两张照片就会显示在模态窗口内，{ {3}}，image 1。

由于photoswipe已经从演示中挂钩到现有的图库（gridrotator），我很难附加额外的图像。一旦我可以获得多个图像，我就可以使用箭头构建的照片划线或创建自己的分页来控制照片。

我不确定当我已经连接到gridrotator时如何挂钩其他图像源，因为文档在这里说明image 2

这是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');
})();

此演示使用Photoswipe Docs Demo＆amp; Animated Responsive Image Grid

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

添加一行以制作＆＃39; el＆＃39;正确的节点。它的工作http://codepen.io/anon/pen/rxgMww

PhotoSwipe模态中的多张照片

1 个答案: