jquery - How to insert fancybox to multiple separate galleries in a post?

admin管理员组

文章数量:1122846

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: / 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.

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.

• jquery
• gallery
• lightbox

Share Improve this question edited Oct 24, 2017 at 18:32 Aslan French asked Oct 24, 2017 at 18:13 Aslan FrenchAslan French 23544 silver badges1818 bronze badges 1

• 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 Commented Oct 24, 2017 at 19:24

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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

本文标签： jqueryHow to insert fancybox to multiple separate galleries in a post