JS Lightboxes and need someone to check me

Hey @zwittrock,

It seems this part of the site is a little broken, as this bit of code:

$(".gallery-item").click(function(e) {
	$(".featured-image").show();
	$(".acf-map, .acf-wrapper").removeClass('show');
});

Should look a little more like this:

$(".gallery-item").click(function(e) {
        e.preventDefault();
	$(".featured-image").show();
	$(".acf-map, .acf-wrapper").removeClass('show');
        return false;
});

So that when the thumbnail images are clicked on they show in the larger area, instead of the link being followed.

This is likely unrelated to the lightbox though.

Looking at the sourecode of that page, I cannot see any obvious lightbox references however.

Hi Matt,

Thanks so much for the response! The e.preventDefault() has not been in there and I anticipate that eventually I will want to put it in there, but for now I want to leave it out so that when they click on the thumbnail, they at least end up on a page that shows a bigger image. As it is, with e.preventDefault() in there, the user would only be able to tell their action was causing something if the map was toggled on when they clicked a thumbnail.

The $(“.featured-image”).show() line appears to only reveal the already existing featured image and does not actually change the featured image. You can see that line doing its job if you toggle the Google Map on by clicking the Map icon and then clicking a gallery image. The featured image returns into view before the page then redirects to the image source.

Another part of what has been making me crazy is that I have not been able to see/find any code that makes the thumbnail render as the actual featured image when it is clicked. The thumbnail related function appears to only make sure that the preset featured image appears if it was not already visible.

Best,

~Zach

Nice intro (“What do you mean by plugged in…”) ??

Your analysis is correct, .show() does nothing and there is no evidence of there ever being lightbox. It could be something that appeared like lightbox was in place, but there’s no evidence of even that.

Maybe you should approach this with what do you want instead of what was it. My expectation would be a thumb click puts the clicked image into the larger display, the “featured-image” container (unrelated to WP featured images for anyone like me initially confused). Then clicking in the featured-image container would invoke a modal with a larger version of that current image.

At this point, I suggest you identify a jQuery gallery or lightbox plugin that does what you want. Arrange the HTML to work with that plugin and let it do its thing. There’s some extra coding involved to get a jQuery plugin that is not a WP plugin working, but there’s a wider selection of what’s available. You should have an easier time in implementing a WP plugin that does what you want, but there is a smaller selection to chose from.

Or maybe instead of finding a plugin that does what you want, just find one that works nicely, even if it does not exactly match what you originally wanted.

Hi bcworkz!

Well, I do my best to lower expectations and the bar on account of it becomes an easier endeavor to step over it once the bar has been lowered a sufficient distance!

Also, thanks for checking things over and checking my thought that it looks like there is no code in the environment that will accomplish desired functionality.

I think we’re going to end up getting some outside paid help on this. If I felt like I could explain how we magically lost functionality that three separate people remember us having recently, I would feel better attacking this myself. I was leaning strongly on the theory that we never had the functionality in the first place and people were just remembering a different website’s functionality, but this becomes less plausible with several people having recent and distinct memories of the functionality.

As it is, I can’t shake the feeling that I am failing to understand something on a fundamental level and with that being the case, I don’t want to dive in because that is an easy way to make things worse which will only increase the costs once paid help comes in.

I was just about to reply that a single missing script file could cause all of this and leave little clue to the fact it’s missing… Then I realized that I never checked the JS Console! It says “You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.”

An error due to duplicate API loading can cause scripts downstream to fail to run. There’s a map API reference (the one with map API key) in both head and footer. Not really the true footer, but just above the contact form HTML. I’m calling it footer anyway, it’s below page content. The “footer” reference is probably coordinated with the site specific local map script (add marker etc.), so removing the head reference is probably preferred. But depending on how each is caused to load, it may be easier to eliminate the footer one.

Once one of these is removed somehow, flush caches, reload the page, and see if the image functionality has returned.

Hi bcworkz,

Thanks so much for checking this out and for being so diligent in looking through this for us! A co-worker had an old colleague who came out of the woodwork today and made short work of this issue that has taken a year or two off my life and I’m not sure how it happened, but I’ve got some bald spots on my head now where hair used to be. Just thanks again so much!

You’re welcome! There’s no substitute for old institutional knowledge ??