themes/aurora/assets/js/image-script.js
/** Opens the lightbox display using the `lightboxTargetImage` as the source image for uri and initial position. */
Opens the lightbox display using the `lightboxTargetImage` as the source image for uri and initial position.
Opens the lightbox display using the ` lightboxTargetImage ` as the source image for uri and initial position .
function openLightbox() {
		lightboxImage.src = lightboxTargetImage.src;
		let bb = lightboxTargetImage.getBoundingClientRect();
		setLightboxPosition(bb.top, bb.left, bb.width);
		setLightboxBackdropVisible(true);
		setLightboxVisible(true);
		setTimeout(() => {
			let scale = Math.min(
				(window.innerHeight - lightboxMargin * 2) / lightboxTargetImage.naturalHeight, 
				(window.innerWidth - lightboxMargin * 2) / lightboxTargetImage.naturalWidth, 
				1 
			);
			let newW = scale * lightboxTargetImage.naturalWidth, newH = scale * lightboxTargetImage.naturalHeight;
			setLightboxPosition((window.innerHeight - newH) / 2, (window.innerWidth - newW) / 2, newW);
		}, 100);
		lightboxOpen = true;
	}
function openLightbox ( ) { lightboxImage . src = lightboxTargetImage . src ; let bb = lightboxTargetImage . getBoundingClientRect ( ) ; setLightboxPosition ( bb . top , bb . left , bb . width ) ; setLightboxBackdropVisible ( true ) ; setLightboxVisible ( true ) ; setTimeout ( ( ) => { let scale = Math . min ( ( window . innerHeight - lightboxMargin * 2 ) / lightboxTargetImage . naturalHeight , ( window . innerWidth - lightboxMargin * 2 ) / lightboxTargetImage . naturalWidth , 1 ) ; let newW = scale * lightboxTargetImage . naturalWidth , newH = scale * lightboxTargetImage . naturalHeight ; setLightboxPosition ( ( window . innerHeight - newH ) / 2 , ( window . innerWidth - newW ) / 2 , newW ) ; } , 100 ) ; lightboxOpen = true ; }
Opens the lightbox display using the `lightboxTargetImage` as the source image for uri and initial position.
Opens the lightbox display using the ` lightboxTargetImage ` as the source image for uri and initial position .
// Make the moving image's source uri to be the one the one the user clicked // Set the fixed position (relative to the viewport) of the lightbox element to match the with the viewport relative position of the clicked image. // Show backdrop and image element // I run this after a few ms rather than immediately so that the transition takes place. If I don't do this, it will immediately override the changes from // the `setLightboxPosition(bb.top, bb.left, bb.width)` call from above and the smooth transition won't play properly. // We calculate a `scale` value for the image which will be the smallest scale required to make the image fill the available space in either direction. // That way, the image will fill the available space but will not be clipped. // The scale the image would have to be for the width to fill available space // The scale the image would have to be for the height to fill available space // Do not go over 1, else we are scaling the image up and so it may look blurry