Need help with making an interactive photo gallery


#1

I would like to make interactive lightbox gallery.

I learned HTML and CSS. I also did Make a Website and Make an Interactive Website courses. I'm learning jQuery right now. I also learned some things from the Internet.

I did a lightbox gallery webpage, but I have some problems:

  1. When you first click on image, it appears normally, in the max-height 500px as I wanted, but when you close lightbox and click another image, it doesn't work properly.

  2. I would like to use keys left and right to change images.

Here is the link to it: https://www.codecademy.com/elleaf/codebits/2fx3Pm

Thanks for help. =)


#2

It looks pretty, though it's quite a bit past what I know. But I imagine something in your JS is making it apply max height to the first image that's clicked instead of all of them. From the looks of it, it seems like your if/else statement is attached to clicking the image. Something in the if part of the statement is not being triggered by default. So, if I'm understanding correctly, the else part of the statement keeps getting triggered. This is the comment for the beginning of the else code " //#lightbox does not exist - create and insert (runs 1st time only)." So maybe something is wrong with the lightbox?

The problem only seems noticeable on the last 3 images, which I assume is because they are much larger than the first 2. Hopefully you find your answer, because it looks really nice!


#3

Good Morning @elleaf

As usual with coding, we cause our own problems. :weary: Your jQuery was structured very well, however you overlooked something about your stylesheet that would cause a very simple mistake.

Firstly - and this may seem irrelevant - I noticed that you have segmented your script into two sections, one for if lightbox exists, and the other if not, however once your lighbox does exist, it almost never is deleted by the normal processes, because you are calling jQuery to hide() it when you click anywhere in the lighbox. This will not remove the element from your html, so once you open an img, only the first half of your script will now be running with each following img click. See how that kind of helps with how we look at the problem? Now why that matters is because I also noticed how you structured your stylesheets.

I noticed your max-height is assigned in the stylesheet, and not being assigned by force to the img attribute - which you could've done to get the guaranteed results if you wanted. However your max-height is only showing on your first img, and looking into your stylesheet I noticed, despite what I expected to find, that you created an id specifically for your img in the lightbox container. What that means is that, you're not dynamically looking for your images inside the lighbox, but only images with this id are getting the max-height. While I watched for the code changes in the developer window while clicking on the images I noticed the id which was applied on the first one, dissappears, so I went over to your script again.

Remember how I said your script will only run the first half of after you create the lightbox, because it never is deleted, only hidden, well going through your first script I noticed you were checking and recycling the existing lightbox elements, which by process of elimination is where your problem lies, specifically, where you recreate the img tag entirely simply to apply the href to it.

In your second segment when you create your img tag, you're applying your id to the img, but in your first segment, you're not, you're creating the img tag, and appending your href string into the src. All you have to do to fix your problem, is include your id in the img string in both segments. Ta da!

Now what I would recommend you do, is update your stylesheet a bit, if you want to use your id as a marker, that's great for selection in jQuery, however you should also consider adding a more specific rule for immediately nested imgs in your light box container, because that's almost a guaranteed circumstance.

#lightbox > img, #lightbox-img {
    max-height: 500px;
}

This is usually a better structure when you're creating container - content relationships, and saves you the trouble of having to name everything uniquely.

Another solution, which would make a lot of sense given you're already checking if lightbox exists, is if it does exist, then you know your img exists, so instead of recreating the html content in your lightbox, simply change the href attribute. the .attr() can contain two parameters, if you want to get an attribute you just pass in one, however if you want to set that attribute, you pass in a second parameter to be set, so yours would look like this:

$('#lightbox-img').attr('href', image_href);

This is all you really need, because you're already getting the href of your current img, and that's all that really changes.

I hope this long-winded explanation helps, not only fix your problem, but show how you can look at your code to see how it works, and where it's normal operation may allow for problems. :wink:


#4

Thank for all your help! :slight_smile:

I figured out also another solution, and just simply replaced hide with remove, so now it's working correctly. :slight_smile: