FooBox Starts to Display, the Gets Redirected

This is a strange one indeed. If you disable all plugins except for FooBox, does it still happen? And if so, then does it still happen if you change to the default 2015 theme?
I am trying to narrow down where the problem is coming from

I changed the theme to 2015 and it worked fine. I’m using the Salient theme. I’ve turned off their lightbox features and there aren’t any other lightbox plugins installed. I turned off everything but foobox, shortcoder, and visual composer but it still didn’t work. I noticed that the second I click the image, the address bar shows the link to the image, so it’s going straight to an image page but showing me a glimpse of foobox before the page completes loading.

Any update on this? I’m scheduled to go live on Wednesday. If you need login credentials for the site, please send me an email.

Thanks!

It seems to be some JS bindings that is being added by the Salient theme.

Paste the URL to your site, so we can dig further

Here you go: https://soulmazing.com/products-and-services/

Hi @jayrenn,

I’ve been digging into this and it seems your theme has an option somewhere for an ajax loading screen. When enabled the themes JavaScript binds to every anchor in the page that the following (extremely long) selector matches:

a[href]:not(.no-ajaxy):not([target="_blank"]):not([href^="#"]):not([href^="mailto:"]):not(.comment-edit-link):not(.magnific-popup):not(.magnific):not(.meta-comment-count a):not(.comments-link):not(#cancel-comment-reply-link):not(.comment-reply-link):not(#toggle-nav):not(.logged-in-as a):not(.add_to_cart_button):not(.section-down-arrow):not([data-filter]):not(.pp):not([rel^="prettyPhoto"]):not(.pretty_photo)

The specific code can be found on line 12075 of the https://soulmazing.com/wp-content/themes/salient/js/init.js file. As you can see they specifically make exceptions for Magnific and PrettyPhoto lightboxes in this selector but any other type of lightbox would cause this same issue to occur.

There are basically three options you have to correct this:

1. Ask the theme developers to change this behavior so it works with FooBox as well.
2. Add the no-ajaxy class to every anchor you want displayed with FooBox.
3. You can modify the JavaScript yourself and add in :not(.foobox):not([target="foobox"]) to the end of the selector on the previously mentioned line but this change would be lost when updating the theme.

Thanks

• This reply was modified 7 years, 10 months ago by steveush. Reason: Changed `.no-ajaxy` to `no-ajaxy`

Hi @jayrenn,

I’ve been digging into this and it seems your theme has an option somewhere for an ajax loading screen. When enabled the themes JavaScript binds to every anchor in the page that the following (extremely long) selector matches:

a[href]:not(.no-ajaxy):not([target="_blank"]):not([href^="#"]):not([href^="mailto:"]):not(.comment-edit-link):not(.magnific-popup):not(.magnific):not(.meta-comment-count a):not(.comments-link):not(#cancel-comment-reply-link):not(.comment-reply-link):not(#toggle-nav):not(.logged-in-as a):not(.add_to_cart_button):not(.section-down-arrow):not([data-filter]):not(.pp):not([rel^="prettyPhoto"]):not(.pretty_photo)

The specific code can be found on line 12075 of the https://soulmazing.com/wp-content/themes/salient/js/init.js file. As you can see they specifically make exceptions for Magnific and PrettyPhoto lightboxes in this selector but any other type of lightbox would cause this same issue to occur.

There are basically three options you have to correct this:

1. Ask the theme developers to change this behavior so it works with FooBox as well.
2. Add the no-ajaxy class to every anchor you want displayed with FooBox.
3. You can modify the JavaScript yourself and add in :not(.foobox):not([target="foobox"]) to the end of the selector on the previously mentioned line but this change would be lost when updating the theme.

Thanks

Excellent researching! I went with option #2 because I used Shortcoder to build a shortcode I could use everywhere, so I added the class in that one place and, Boom!, everything works as expected.

Thanks again for your help!