Trying to make a image tab gallery with click event

Question

W3Schools has an example I am using to make an image tab gallery.

Their example in using plain JS and I'm trying to use jQuery. I am new to using jQuery but I have a function that appears to grab the image in the console but the image selected will not appear in the img element with the id of #expandedImg.

I can't seem to figure out what is wrong or why it won't render the image I click on. I would appreciate any guidance. Thanks.

$(document).ready(function() {
    $(".column img").click(function() {
      var newclass = $(this).attr("src");
      console.log(newclass);
      var oldclass = $("#expandedImg").attr("id");
      console.log(oldclass);

      $("#expandedImg").fadeOut(function() {
        $("#expandedImg").removeClass(oldclass).addClass(newclass).fadeIn("slow");
        console.log(newclass);
      });
    });
  });

/* The grid: Four equal columns that floats next to each other */

.column {
  float: left;
  width: 20%;
  padding: 10px;
}


/* Style the images inside the grid */

.column img {
  opacity: 0.8;
  cursor: pointer;
}

.column img:hover {
  opacity: 1;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* The expanding image container */

.container {
  position: relative;
  display: none;
  width: 50%;
}


/* Closable button inside the expanded image */

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}






  
  
  Image Gallery
  
  
  
  



  
  
    
      
    
    
      
    
    
      
    
    
      
    
  

  
    ×

ikiK · Accepted Answer

Your whole container with image inside is hidden with display: none in CSS:

.container {
  position: relative;
  display: none;
  width: 50%;
}

You need to show it first:

$(".container").show()

Also you are using removeClass and addClass to add new image source. removeClass and addClass are ONLY for adding and removing CSS classes, nothing else.

Data you have stored in newclass and oldclass are not CSS classes, those are variables with values and value is source of image in case of newclass, you just called variable newclass by name.

You need to add source same way you get them and fill it with value from variable:

$("#expandedImg").attr('src', newclass)

$(document).ready(function() {
  $(".column img").click(function() {
    console.clear();
    var newclass = $(this).attr("src");
    console.log(newclass);
    var oldclass = $("#expandedImg").attr("id");
    console.log(oldclass);

    $(".container").show();
    // show .container

    $("#expandedImg").attr('src', newclass).hide().fadeIn("slow");
    //set new source and hide element in order to be able to fade it in again
    // fade in works only on hidden elements

  });
});

/* The grid: Four equal columns that floats next to each other */

.column {
  float: left;
  width: 20%;
  padding: 10px;
}


/* Style the images inside the grid */

.column img {
  opacity: 0.8;
  cursor: pointer;
}

.column img:hover {
  opacity: 1;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* The expanding image container */

.container {
  position: relative;
  display: none;
  width: 50%;
}


/* Closable button inside the expanded image */

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}






  
  
  Image Gallery
  
  
  

  



  
  
    
      
    
    
      
    
    
      
    
    
      
    
  

  
    ×

Trying to make a image tab gallery with click event

Answers (1)

Related Questions