Created
January 21, 2019 21:07
-
-
Save TMMC/6ec51c46d9fa57e1fd6a480f0d5da86d to your computer and use it in GitHub Desktop.
Photoswipe working with `ul > li > figure > a > img` structure.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* HTML structure: | |
* <ul> | |
* <li> | |
* <figure> | |
* <a> | |
* <img /> | |
* </a> | |
* <figcaption></figcaption> | |
* <figure> | |
* </li> | |
* <li>...</li> | |
* <li>...</li> | |
* </ul> | |
*/ | |
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 = [], | |
listItemEl, // make it works with `ul > li > figure > a > img` | |
figureEl, | |
linkEl, | |
size, | |
item; | |
for(var i = 0; i < numNodes; i++) { | |
listItemEl = thumbElements[i]; // <li> element, make it works with `ul > li > figure > a > img` | |
figureEl = listItemEl.children[0]; // <figure> element, make it works with `ul > li > figure > a > img` | |
// 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 = listItemEl; // save link to element for getThumbBoundsFn, make it works with `ul > li > figure > a > img` | |
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() === 'LI'); // make it works with `ul > li > figure > a > img` | |
}); | |
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) | |
var photoswipeParseHash = function() { | |
var hash = window.location.hash.substring(1), | |
params = {}; | |
if(hash.length < 5) { | |
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); | |
} | |
return params; | |
}; | |
var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) { | |
var pswpElement = document.querySelectorAll('.pswp')[0], | |
gallery, | |
options, | |
items; | |
items = parseThumbnailElements(galleryElement); | |
// define options (if needed) | |
options = { | |
// define gallery index (for URL) | |
galleryUID: galleryElement.getAttribute('data-pswp-uid'), | |
bgOpacity: 0.9, | |
closeOnScroll: false, | |
closeEl: true, | |
captionEl: true, | |
fullscreenEl: true, | |
zoomEl: true, | |
shareEl: false, | |
counterEl: true, | |
arrowEl: true, | |
preloaderEl: true, | |
history: false, | |
shareButtons: [ | |
{id:'facebook', label:'Share on Facebook', url:'https://www.facebook.com/sharer/sharer.php?u={{url}}'}, | |
{id:'twitter', label:'Tweet', url:'https://twitter.com/intent/tweet?text={{text}}&url={{url}}'}, | |
{id:'pinterest', label:'Pin it', url:'http://www.pinterest.com/pin/create/button/?url={{url}}&media={{image_url}}&description={{text}}'}, | |
{id:'download', label:'Download image', url:'{{raw_image_url}}', download:true} | |
], | |
getThumbBoundsFn: function(index) { | |
// See Options -> getThumbBoundsFn section of documentation for more info | |
var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail | |
pageYScroll = window.pageYOffset || document.documentElement.scrollTop, | |
rect = thumbnail.getBoundingClientRect(); | |
return {x:rect.left, y:rect.top + pageYScroll, w:rect.width}; | |
} | |
}; | |
// PhotoSwipe opened from URL | |
if(fromURL) { | |
if(options.galleryPIDs) { | |
// parse real index when custom PIDs are used | |
// http://photoswipe.com/documentation/faq.html#custom-pid-in-url | |
for(var j = 0; j < items.length; j++) { | |
if(items[j].pid == index) { | |
options.index = j; | |
break; | |
} | |
} | |
} else { | |
// in URL indexes start from 1 | |
options.index = parseInt(index, 10) - 1; | |
} | |
} else { | |
options.index = parseInt(index, 10); | |
} | |
// exit if index not found | |
if( isNaN(options.index) ) { | |
return; | |
} | |
if(disableAnimation) { | |
options.showAnimationDuration = 0; | |
} | |
// Pass data to PhotoSwipe and initialize it | |
gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options); | |
gallery.init(); | |
}; | |
// loop through all gallery elements and bind events | |
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 && hashData.gid) { | |
openPhotoSwipe( hashData.pid , galleryElements[ hashData.gid - 1 ], true, true ); | |
} | |
}; | |
// execute above function | |
initPhotoSwipeFromDOM('.wp-block-gallery'); // '.wp-block-gallery > li > figure > a' |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment