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 <a><img></a> the wordpress gallery is more like <figure><a><img></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.

  • Downloading a few current plugins and looking through their source code will probably give you the best idea of how to code your own, if you're not wanting to use a plugin.
    – WebElaine
    Oct 24, 2017 at 19:24

1 Answer 1


Found the issue. The fancybox library now uses data-fancybox instead of rel to identify stuff, so I just updated the syntax.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.