Link Gallery Module Lightbox Images to Custom URLs

|

The Divi Theme includes a gallery module which can display a grid of images in your pages. When you click on an image its full size version is opened in a lightbox. Normally when you click on this enlarged image it will load the next image from the gallery into the lightbox. If you would instead like to send the user to a different page when they click on the lightbox image, here's how to do it.

Note: this is a rough first attempt at achieving this effect – let me know in the comments if you need any help getting it to work correctly on your site. 

Here's an example of the jQuery code for turning gallery module lightbox images into clickable links:

<script>
jQuery(function($) {
	$('body').on('click', '.et_pb_gallery_image a, .mfp-arrow', function() {
		setTimeout(
			function() {
				$('.mfp-img').off('click');
				$('.mfp-img').on('click', function(e) {
					e.stopPropagation();
					var obj = {
						"https://cdn.mysite.com/image1.png": 'https://divibooster.com',
						"https://cdn.mysite.com/image2.png": 'https://extrabooster.com'
					};
					var $mfpimg = $(this);
					$.each(obj, function(key, value) {
						if ($mfpimg.attr('src') == key) {
							document.location.href=value;
						}
					});
				});
			},
			1000
		);
	});	
});
</script>

You can add it into the "Divi > Theme Options > Integration > Add code to body of blog" box.

The crux of the code is to check if the image src matches one of those in the "obj" array. If so, it redirects to the corresponding URL. So in my example, if the image clicked on is "https://cdn.mysite.com/image1.png" then it'll redirect to 'https://divibooster.com'. To set it up for your own gallery you'd need to replace these with your own image srcs / destination URLs.

The code is by no means perfect, for example:

  • It doesn't kick in until 1 second after the gallery image is clicked to allow time for the lightbox image to be displayed. Probably this could be reduced a bit to avoid any time when the original behavior of the image is present, but I haven't played around with that yet.
  • I don't currently tie it to any particular gallery, so it will apply to any gallery on the site – probably adding an ID to the gallery and including in the line "$('body').on('click', '.et_pb_gallery_image a, .mfp-arrow', function() {" (before .et_pb_gallery_image) would help a bit. However, since lightbox overlay is basically separate from the gallery in the page, I think the code will still affect any gallery. One possible solution is to put the code in a code box only on the page it is needed. Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

0 Comments

Submit a Comment

Your email address will not be published.