How to insert fancybox to multiple separate galleries in a post?
Okay I'm trying to add fancybox functionality to the galleries in posts. I found this stack exchange: How do i add class=fancybox to the default gallery?
and I managed to get the basic fancybox functionality using: jQuery(".gallery-icon a").fancybox().attr('rel', 'gallery');
But it's not grouping the images all in one gallery together. I can click on an image and get a lightbox but there's no scrolling through a group. I tried the solution outlined by @orionrush jQuery('.gallery').each(function (g) {
jQuery('a', this).attr('rel', function (i, attr) {
return attr + ' gallery-' + g;
});
});
but it's not working. I think the reason why is because this post was answered in 2013, and there must have been some changes to wordpress' gallery html output. Namely, I notice that instead of being the typical aimg/a
the wordpress gallery is more like figureaimg/a/figure
which if I'm understanding the script properly from the other stack post, means that fancybox won't read the rel galleries all as a single gallery to scroll through because they've chopped up by the tags.
Am I intuiting the right issue? What am I missing? And is there a more up to date way to fix this?
EDIT- Additional information: Okay so thinking this might be some issue with the way that fancybox was identifying the html structure, I went into chrome tools and deleted all the figure tags around the various instances. This didn't do anything. Looking at this page: http://demos.webdesignandsuch.com/demo-of-default-wordpress-gallery-hooked-up-to-fancybox-modal/ this page had the same structure as mine, just instead of figure and div it had dt and dl. So I reloaded the page, edited the html in chrome tools, reran the script for creating fancybox galleries etc, and... no dice. Still not reading stuff as a single gallery. Not sure what the problem is, but I'm continuing to look at it and upgrade my progress here, in case I find something that someone can help point me towards fixing.