How To Reuse Bricks Builder Theme’s Image Lightbox Library (PhotoSwipe) If The Post Or Page Is Not Built By Bricks

<?php
add_action( 'wp_enqueue_scripts', function() {

	// I just want to enqueue in single post
	if( is_single() ) {
		wp_enqueue_script( 'bricks-photoswipe' );
		wp_enqueue_style( 'bricks-photoswipe' );
	}

}, 10 );

?>

// javascript
// define some variables
const lightbox = document.querySelector(".pswp");
const options = {"index" : 0};
const item = [
	{
		"src": 'https://mydomain.com/abc.jpg',
		"w": 400,
		"h": 300,
		"title": 'The text' //optional
	}
];

// Initialize the Lightbox
( new PhotoSwipe( lightbox , PhotoSwipeUI_Default, item, options ) ).init();

//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;
				let imgSrc = wpImg.getAttribute('src');
				let imgW = wpImg.getAttribute('width');
				
				// Added on 2022-March-14, only choose from srcset if image has srcset
				if( wpImg.getAttribute('srcset') ) {
					let srcsetArray = wpImg.srcset.split(',');
					let largestSetArry = getLargestImage(srcsetArray);
					imgSrc = largestSetArry[0];
					imgW = parseInt(largestSetArry[1].replace('w',''));;
				}
				let item = [
					{
						"src": imgSrc,
						"w": imgW,
						"h": wpImg.getAttribute('height'),
						"title": wpImg.nextElementSibling.innerText // optional
					}
				];
				(new PhotoSwipe(lightbox, PhotoSwipeUI_Default, item, options)).init();
			}

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

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

})()

/*CSS*/
/*Please use your own selector as well*/
.wp-block-image img {
    cursor: zoom-in;
}

const openGalleryLightbox = (event)=>{
	event.preventDefault();
	const options = {
		"bgOpacity" : .9,
		"showHideOpacity" : true,
		"index" : 0,
		"closeOnScroll" : false,
		"closeOnVerticalDrag" : false
	};

	const wpImg = event.target;

	// Get all images from the gallery
	const otherImages = wpImg.closest('.my-gallery').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": imgW,
				"h": otherImg.getAttribute('height'),
				"id": 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! .my-gallery is my Gutenberg gallery custom class.
const wpGalleries = document.querySelectorAll('.my-gallery img');

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