Automatically link to lightbox when linking to an enlarged images throughout site, Jump Start 2.0

[Wendell Harness]

Thanks Jason, I appreciate the feedback and taking a look!

One more unrelated question: Is there a way to automate lightbox for any images throughout the site that link to themselves (without using a shortcode)? I’m thinking about purchasing FooBox, but wanted to check to see if that type of functionality is available with WPJS before pulling the trigger.

Thanks again!

Topic

[Jason Bobich]

You’d have to do it with javascript from your child theme. So, you’d enqueue a javascript file from your child theme.

You could bind to all <a> tags, check if they link to a file with image extension and then bind magnific popup to it.

jQuery(document).ready(function($){

	// Bind to every <a> tag
	$('a').each(function(){

		// If already a lightbox image, move on
		if ( $(this).hasClass('themeblvd-lightbox') ) {
			return;
		}

		// Account for any parameters being added to
		// URL, like with W3 Total Cache, for example.
		var url = this.href.split('?');
			url = url[0];

		// Append lightbox to link, if it links to an image file extension
		if ( url.match(/\.(jpe?g|png|bmp|gif|tiff?)$/i ) ) {
		   	$(this).magnificPopup({type:'image'});
		}

	});

	// ... your other jQuery stuff ...

});

[Wendell Harness]

Beautiful, thank you.

[Author]

Replies