Support » Developing with WordPress » JS Lightboxes and need someone to check me

  • Resolved zwittrock

    (@zwittrock)


    Hi all,

    I am hoping that I am posting this in the right place. Also, I’m an accidental web developer and am a fair bit outside of areas that I have a strong background in and where I do most of my work. I just say that upfront so people will understand when they ask me to, “Check if the computer is plugged in,” and I respond with the equivalent of, “What do you mean by plugged in and where do I look on the computer for this power cable that you speak of?”

    The issue:

    I have been told that the linked page used to have lightbox functionality where a window would pop out when the featured image was clicked and when one of the little image thumbnails was clicked, it would change the featured image to that thumbnail image. This functionality is no longer working. I have not been able to find ANYTHING in the code that could have provided this functionality ever and so am turning to the community for help.

    The below code are the functions that I have surfaced that control the behavior when the featured image as well as the thumbnails are clicked. The function for the toggle map is included as well as it is right with the rest of the code.

    JS

    $(".featured-image a").click(function(e) {
    		$(".gallery-item:first-child").click();
    		return false;
    	});
    	
    	
    	$("#toggle-map").click(function(e) {
    		$(".featured-image").slideToggle(0);
    		$(".acf-map, .acf-wrapper").toggleClass('show');
    		return false;
    	});
    	
    	$(".gallery-item").click(function(e) {
    		$(".featured-image").show();
    		$(".acf-map, .acf-wrapper").removeClass('show');
    	});

    I can provide CSS and HTML if desired, but wanted to keep this first post as short as I could.

    The question I have to start is if we have anything in our environment that would make lightbox functionality happen. If so, I need to figure out how to get it working again. If not, then I would likely try to make that happen with a plugin, but I don’t want to do that if we already have code sitting that needs fixing if that makes sense. For if it is helpful at all, this was discovered around the same time our Google Maps started glitching because we did not have an API key. Fixing that issue did not resolve this.

    TLDR: I see nothing that would make lightbox functionality work in our environment, but multiple users distinctly remember us having lightbox functionality and I am feeling a bit crazy because I can’t find anything to indicate that we ever had that functionality in the first place.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • 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

    Moderator bcworkz

    (@bcworkz)

    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.

    Moderator bcworkz

    (@bcworkz)

    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!

    Moderator bcworkz

    (@bcworkz)

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘JS Lightboxes and need someone to check me’ is closed to new replies.