Lightbox won’t open

hi @siouxchief

I had a look at the gallery and, unfortunately, when you switch off their lightbox, they no longer output an href attribute on the anchor elements. FooBox needs this in order to know what to open.

Do they have an option to open the image directly in the page? If so, then FooBox should pick it up and open the image in a lightbox.

Really appreciate you checking Brad. I just checked and the settings are – do nothing, lightbox and redirect to url and I have just chosen the last one. I have then put in the URL to the actual location of the original image.

Not sure if that is enough to work with or if you want me to use a different url to get Foobox to kick in and work but currently on clicking it did just take me to the original image.

Thanks
David

OK @siouxchief

I think this will work now, but you will need FooBox PRO, as the pro version has a setting to choose a Specific CSS classes, which you now need.

Set the Specific CSS classes setting to .bwg-a which is the class on the anchor links in the photo gallery.

Start the free trial of FooBox PRO to test that it works. You can then also test out the social sharing.

Excellent, I’ll give it a go now and report back

Wow it actually worked and I love the way after tweeting the link back is to the exact lightbox of the image. Just one last question please.

One thing it struggled with is if you add a Tag of economics then the image after filtering doesn’t have the lightbox, any css for that maybe please?

Also a small thing but see the way on a phone the share button is way up the top, is it possible to bring it more center or just above the image so people spot it easier? Even if it means reducing the lightbox to be less fullscreen as it seems to be currently?

Thanks again, I will definitely be getting Pro after the trial.

• This reply was modified 4 years ago by siouxchief.

hey @siouxchief

FooBox changes it’s layout on phones so that the image space is maximized.
Unfortunately there is no way to change the button layout within FooBox at the moment, but we are working on a rewrite and I will add that to the list of things to look into.

Thanks Brad, that’s not a biggie. I edited my post so maybe you missed this final question.

“One thing it struggled with is if you add a Tag of Economics then the image after filtering doesn’t have the lightbox, any css for that maybe please?”

Would be great to have it working after filtering too.

Thanks

Ah ye I did miss that.

Looking again, it seems that Photo Gallery is doing an ajax request to get images and then inserts them when you select tags. Unfortunately FooBox does not know about this and cannot hook into that event to initialize itself for the new images.

I would suggest you contact their support and ask them if there is a javascript event you can hook into after the new images have been added to the page, after the ajax call. If there is, then we can provide you a bit of code to rerun foobox and it should work.

Great, thank you for all your help

Hi Brad,

No answer from them yet but I wonder could this help. The other sharing plugin is capable of knowing the Tags filter has been applied using this function then it then knows to once again overlay its sharing icons again.

Maybe foobox could hook in here somewhere like this potentially?

Thanks

add_action( ‘wp_enqueue_scripts’, ‘sti_wp_enqueue_scripts2’, 9999999 );
function sti_wp_enqueue_scripts2() {
$script = ”
var timeoutID;
jQuery(‘body’).on(‘DOMSubtreeModified’, ‘.bwg_container’, function() {
window.clearTimeout(timeoutID);
timeoutID = window.setTimeout( function() {
jQuery(‘.bwg_container img’).sti();
}, 1000 );
});
“;
wp_add_inline_script( ‘sti-script’, $script);
}`