Jetpack Tiled Galleries Themeblvd Lightbox

[askwpgirl]

Hi Jason,

I have an issue that could be resolved in one of two ways. I am using the Jetpack Tiled Galleries (
http://jetpack.me/support/tiled-galleries/) on my site. If I use one of the tiled galleries whose shortcode is this for example (spaces added to prevent rendering in the comments):

[ gallery type="rectangular" link="file" ids="744,745,746,747,748,749,750,751,752" ]

Then, the Jump Start (1.2.5) lightbox does not get used. The images just link to their files.

If I use the Jetpack Carousel (http://jetpack.me/support/carousel/), then I get two lightboxes on normal galleries (though just one on the Tiled Galleries).

So, I either need to get the Magnifipop to work with the Tiled Galleries or turn off Magnifipop and use Carousel. Usually, I’d prefer to use Magnifipop, but would also be nice to know best way to disable.

Topic

[askwpgirl]

Here’s the page where you can see the double lightbox (in middle under Wordfence settings area):

http://askwpgirl.com/optimize-wordpress-mysql-database/

Here’s the page where you can see the single lightbox (scroll to bottom):

http://askwpgirl.com/wordpress-image-gallery-lightbox-plugin/

Of course, I expect the double lightbox on the database post because I have Carousel enabled. What I would like is that if I disable Carousel, the Magnifipop lightbox would work with the Tiled Gallery.

[Jason Bobich]

… need to get the Magnifipop to work with the Tiled Galleries …

This is just a matter of binding the Magnific popup script to whatever HTML the gallery is outputting, from a javascript file your child theme outputs.

Do you have a link to an example where you’re using Tiled Galleries, and when I click on a thumbnail, I’m just taken to a raw image file?

[askwpgirl]

Yes:

http://galleries.askwpgirl.com/jetpack-gallery/

Unfortunately, the single images are still linking to the wp.com servers even though Photon is de-activated.

Though, that shouldn’t be an issue.

[Jason Bobich]

So, you’ve got maybe something like this from your child theme’s javascript file.

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

	$('.tiled-gallery-item > a').magnificPopup({type:'image'});

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

});

http://dimsemenov.com/plugins/magnific-popup/documentation.html

[askwpgirl]

That works! Thanks!!! I wonder if we can get it to navigate like on the default galleries (you know, with arrows?). 🙂

[Jason Bobich]

See the simple example here: http://dimsemenov.com/plugins/magnific-popup/documentation.html#gallery

[askwpgirl]

Sweet. That works!!!

[Author]

Replies