jquery image gallery is not working as it should

Question

i am trying to create a simple photo gallery where one photo is big and there are also thumbinals at the bottom which when clicked become that big photo. Galleries are in separate modal windows. My code only works in the first modal window. In fact this is my very first time using jquery. I can't even find how to use the console.log to check where the problem is.

HTML:

jQuery:

   $("#thumbnails a").on("click", function (e) {
      e.preventDefault();
    
      $("#big").attr("src", $(this).attr("href"));
    });

user_7380779 · Answer

id have to be uniq to avoid problem..

eliminate id="big" and replace id="thumbnails" by class="thumbnails"

$(".thumbnails a").on("click", function(e) {
  e.preventDefault();

  $(this).closest(".gallery").find("img").first().attr("src", $(this).attr("href"));
});

explanation:

$(this).closest(".gallery") means find the first parent with class gallery

find("img").first() means find the childrens with tag img and select first

if you replace id="big" by class="big"

you could write too:

$(".thumbnails a").on("click", function(e) {
  e.preventDefault();

  $(this).closest(".gallery").find("img.big").attr("src", $(this).attr("href"));
});

user_6469645 · Answer

Find closest using jquery closest() and the find #big and replace.

$("#thumbnails a").on("click", function (e) {
    e.preventDefault();
    $(this).closest(".gallery").find(".big").attr("src", $(this).attr("href"));
});

.modal_content{text-align:center;margin-top:100px;}

jquery image gallery is not working as it should

2 Answers