This is either a problem with your theme or with your markup, from what I can see; regardless of where you click it is launching a lightbox. That generally happens with mismatched / incomplete tags.
There does seem to be a parse error in your markup:
<header class="event-header sticky" data-sticky data-options="marginTop:0;" style="background-color:">
The style element seems incomplete. I don’t know if it is causing an issue, but it is probably a worthwhile place to see.
Thanks for the feedback. I fixed that style tag but it didn’t solve the problem.
After some more testing, it looks like some lightboxes work, others don’t. These ones don’t work:
– Colorbox
– Fancybox
– Image Lightbox
– PrettyPhoto
– Swipebox
– Thickbox
All the other ones work fine. I’ll just use one that works for now but just wanted to report in on this in case others are experiencing the same thing.
Given that these scripts have been tested against literally thousands of themes with no issues, I would say there is something weird going on with your theme.
There are a couple of things I noticed:
- Your theme seems to be replacing jQuery that is bundled with WP with something from an external CDN. This is a strict no-no for repository hosted themes. See the guidelines, where it explicitly forbids inclusion of jQuery in this manner. That is not to say that it wouldn’t work (I have seen it work), but when themes do this they end up doing some other things as well that can cause erratic behaviour. Themes such as TwentyNineteen, or any other theme from ww.wp.xz.cn wouldn’t suffer from this behaviour.
- I also noticed that there is no inclusion of jQuery-migrate happening when your theme is registering jQuery. Most of the scripts that you listed (Colorbox, Fancybox, Image Lightbox and PrettyPhoto for sure) are old scripts that were coded for old versions of jQuery. Some of them may not work on newer versions of jQuery if you don’t have the jQuery-migrate script, and this may be tripping up the behaviour. Note that WP core deploys jQuery-migrate whenever it enqueues jQuery, so it is conceivable that this is causing the breakage. There are modifications in the next version of Photonic to remove the dependency on jQuery-migrate. Only the author of Colorbox released an update to make it compatible with the latest version of jQuery, but the other scripts haven’t been updated for years (I made the updates from my end for the next iteration).
Thanks for the insightful reply. Yes, it does seem like we’re pulling in jQuery from a CDN. We are using the FoundationPress theme (https://github.com/olefredrik/FoundationPress) and I guess that’s how they do it.
I think we’ll just stay with the way things are for now and use one of the lightboxes that work but thanks for the heads-up about jQuery-migrate.
