Bricks Lightbox with Posts + image link

How To
3

Hi

I implemented Itchys code, see my post with the first version.

Everything worked, except that when I clicked on an image from the gallery, always the largest image was opened (the first image) and not the image that I clicked on. Instead, I then had to use the arrows in the lightbox to move to the image I clicked on. It might be a problem because I used an ACF gallery, I don’t know.

Here is the script from Itchy (slightly modified) that I used, but with the problem mentioned above:

//javascript
(()=>{
	document.addEventListener( 'DOMContentLoaded', ()=>{
		
		// Define my lightbox / PhotoSwipe element from DOM
		const lightbox = document.querySelector(".pswp");
		
		// Do some checking if PhotoSwipe loaded and lightbox element exists 
		if( 'function' === typeof PhotoSwipe && 'function' === typeof PhotoSwipeUI_Default && lightbox) {

			// Function to get the largest image from my img srcset
			const getLargestImage = (srcsetArray)=>{
				let largestSet = srcsetArray.reduce((previousSet, currentSet)=>{
					let temp_p = previousSet.trim().split(' ');
					let width_p = parseInt(temp_p[1].replace('w',''));
					let temp_c = currentSet.trim().split(' ');
					let width_c = parseInt(temp_c[1].replace('w',''));
					return (width_c > width_p)? currentSet: previousSet;
				});
			
				return largestSet.trim().split(' ');
			}
			

			// Function to open the lightbox
			const openLightbox = (event)=>{
				const options = {
					"bgOpacity" : .9,
					"showHideOpacity" : true,
					"index" : 0,
					"closeOnScroll" : false,
					"closeOnVerticalDrag" : false
				};
					const wpImg = event.target;
				const otherImages = wpImg.closest('.galleryid-47550').querySelectorAll('img');
			
				
			let items = [];
	if( otherImages ) {
		otherImages.forEach( otherImg => {
			let imgSrc = otherImg.getAttribute('src');
			let imgW = otherImg.getAttribute('width');
			let id = otherImg.getAttribute('data-id');
			
			if( otherImg.getAttribute('srcset') ) {
				let srcsetArray = otherImg.srcset.split(',');
				let largestSetArry = getLargestImage(srcsetArray);
				imgSrc = largestSetArry[0];
				imgW = parseInt(largestSetArry[1].replace('w',''));;
			   
			}
			items.push({
				"src":  imgSrc,
				"w":  otherImg.getAttribute('width'),
				"h": otherImg.getAttribute('height'),
			//	"id": wpImg.getAttribute('data-id')
			})
		})
	}

	// Get the index of the clicked image
	let index = 0;
	for( let i = 0; i < items.length; i++ ) {
		if( items[i].id === wpImg.getAttribute('data-id') ) {
			index = i;
			break;
		}
	}

	// Rearrange the images to match the order of the gallery
	let arrangedImgs = [];
	if( index > 0 ) {
		arrangedImgs = items.splice( index, items.length - index )
		items.forEach( item => {
			arrangedImgs.push(item);
		} )
	} else {
		arrangedImgs = items;
	}

	(new PhotoSwipe(lightbox, PhotoSwipeUI_Default, arrangedImgs, options)).init();
}

			// Important! Please use your own selector!
			const wpImages = document.querySelectorAll('.galleryid-47550 img');

			if( wpImages ) {
				wpImages.forEach( wpImg => {
					wpImg.addEventListener( 'click', openLightbox.bind(event), false );
				})
			}
		
		}
	})

})()

I just didn’t have time to look what was wrong with the script.

I then changed to use the Bricks element “Image-gallery” instead (also learned this from Itchys tutorial) and with this I didn’t need to implement the lightbox routine and scripts myself anymore. That is the second code in the post above. Much easier I think. That has been working flawlessly.

Cheers

Patric

1 Like