[Resolved] Disable Toolbox's lightbox for gallery block without disabling other lightboxes

[Author]

Posts

[scottL-3]

Tell us what you are trying to do?
I use a lightbox plugin that nicely shows galleries as slideshows with social sharing and other advanced features. I need to disable the lightbox for the Toolbox Gallery block because it opens underneath the other lightbox and is still there when the other lightbox is closed.

If I turn off the lightbox in the Toolset Gallery Block settings, it causes neither lightbox to work. Most lightbox plugins look for images that link to their file in the media library.

I have been using the DFactory Responsive Lightbox but it does not work well with WP 5.6 so I am now moving to the Lightbox with Photoswipe plugin by Arno Welzel which works well with WP 5.6 and has better social sharing.

In the past I have avoided the Gallery Block and built child views that loop through the repeating image fields and construct a WordPress Gallery shortcode or Toolbox gallery-like markup where I can control the lightbox related data but I'd really rather just use the Toolbox Gallery Block on sites where I'm using the block editor for Content Templates.

The best solution would be to have separate switches in the Gallery Block settings to turn the lightbox on/off (that just affects the lightbox attributes) and to link to the media file.

If there is not an easy no-code solution, can you suggest a small bit of jQuery or javascript that can find all the images from the Gallery block on the page and add an attribute?

Is there any documentation that you are following?
The documentation only covers the switch to disable the lightbox which disables both lightboxes so is not a good solution.

Is there a similar example that we can see?
Open the gallery of two photos at: hidden link
Then close the lightbox by clicking the X in the upper right. You'll see the Toolset lightbox still open underneath.

What is the link to your site?
hidden link

[Christian Cox]

Hi, I'm not sure there's a simple no-code solution here. It seems like a very custom case where you need the Toolset Gallery Block to produce markup that inherently triggers a lightbox, but instead of Toolset's lightbox, you want to trigger the lightbox from a 3rd-party lightbox plugin. The specifics for this 3rd-party plugin markup requirements are described here: https://wordpress.org/plugins/lightbox-photoswipe/

I'm not sure there is an easy way to integrate both things, because the Toolset Gallery Block is not designed to produce the markup required for a 3rd-party plugin's lightbox features. It's designed to produce the markup for Toolset's lightbox. Perhaps you have a custom solution in mind that requires some custom JavaScript that applies a specific attribute to each gallery image? If that is the case, I can show you how to use jQuery to select all of those Gallery block images and add some arbitrary attribute:

jQuery(document).ready(function(e){
  jQuery('.tb-gallery__cell img').attr('someattribute', '');
}); 

https://api.jquery.com/attr/

That would apply the attribute 'someattribute' to each img tag inside every .tb-gallery__cell element upon triggering the document 'ready' event callback function. If you want to target images in only some specific galleries, you would need to apply a custom CSS class to each Gallery block, and target that specific class:

jQuery('.your-specific-gallery-class .tb-gallery__cell img').attr('someattribute', '');

That would add the attribute to only those images inside Gallery Blocks with that specific CSS class.

[scottL-3]

It would be good to add the option to keep images in the Toolset Gallery Block linked to their media files when the Lightbox switch is turned off as an enhancement request for this Block. There are many cases where using a Block that can present a gallery from a dynamic source of repeating image fields is needed but the Toolset lightbox is not desired.

The image linking to the media file enables a no lightbox solution as well as most other lightboxes. No one else's markup needs to be added, just the link to the media file wrapped around the gallery image.

I'd use a regular WordPress gallery block if it supported such dynamic image sources but it does not.

In the meantime I'll either go back to manually coding something like the Toolset Block's approach (like Toolset promoted before they released the block) or I'll try the jQuery approach.

[Christian Cox]

There are many cases where using a Block that can present a gallery from a dynamic source of repeating image fields is needed but the Toolset lightbox is not desired.
Can you show me some of these cases, for example Toolset sites where this generic link tag added to the gallery images would solve an immediate need? As discussed, this feature would not solve the original problem in this ticket since the 3rd-party plugin you have implemented requires specific data attributes. If I have your specific cases that demonstrate the need for this feature, I can show those cases to our 2nd tier support team and ask to submit a feature request. Otherwise it's only a hypothetical "would be nice to have", without any client-provided evidence showing the usefulness and need of that feature.

[scottL-3]

Actually it does solve the original problem. That 3rd party lightbox plugin and many others can latch onto images that link to their media files without need for extra attributes.

But there are also times where the site's needs might be met simply by linking to the media file so a small thumbnail can be shown in a gallery and the user can see a larger version by clicking without needing a lightbox.

Ideally a Block like the Toolset Gallery Block would do what its WordPress equivalent does but with the addition of dynamic sources. The WordPress Gallery Block has a "Link to" setting for the block that matches the classic editor WordPress Gallery settings where you can pick None, Media File or Attachment Page. That is why so many lightbox and other plugins that enhance galleries offer the ability to trigger from those links. And that is why having that option in your Gallery Block would be really valuable. I need it for 48 client sites right now because the lightbox solution I was using, that seemed to be able to suppress your lightbox, doesn't work with WP 5.6 and the one I'd like to replace it with has this conflict with your lightbox.

You can close this ticket if you'd like. I'd like to see this as an enhancement request for the Toolset Gallery Block. If the team there agrees, great. If not, I'll solve it another way. I may have to anyway due to my urgent need for a solution.

[Christian Cox]

I see what you mean about the native WP Gallery feature, and I agree that it seems our Gallery Block should at least offer a similar option. I'd like to escalate it to my 2nd tier team to get their opinion, and present your comments for them to review. I'll let you know what I find out.

[scottL-3]

Thanks Christian. While they are looking at this issue they should consider making the same changes to the slider block if they decide to enhance the gallery block as it has the same issues with lightboxes. I rarely ever use sliders so I hadn't noticed it until a client used the block on their own just the other day.

Happy holidays to all at Toolset!

[Christian Cox]

I'll update our internal ticket with that request - happy holidays to you too!

[Christian Cox]

Hello, I presented this request to my 2nd tier support team and they in turn presented it to the developers, but the idea received lukewarm reception. Rather than manipulating the standard output of the Gallery or Slider blocks, they mentioned that custom markup output could be generated using the Repeating Field block instead.

Another alternative might be to dequeue the Toolset lightbox script, used in conjunction with the output of the Gallery block:

add_action( 'wp_print_footer_scripts', 'ts_dequeue_scripts', 1 );
function ts_dequeue_scripts( $handles ){
 
	wp_dequeue_script( 'lightbox' );
}

Not sure how that would interact with other lightbox plugins, but that's an option worth exploring.

[scottL-3]

That script does solve the problem although I worry that some other plugins might usually the same generic "lightbox" name for their scripts. The two I use the most seem to work well with this approach so I am good for now.

It'd be great to have the option to turn off the lightbox separately from turning off links to media files for gallery images in the Gallery Block and Image Slider Block (and any other / future Blocks with lightbox capabilities) rather than having to add code but this is good enough for now.