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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Gallery</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <link href="../jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css" />
  <script src="../jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>
  <script src="../jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
</head>

<body>
  <!-- The four columns -->
  <div class="row">
    <div class="column">
      <img src="../images/trees_mountains.jpg" alt="Nature" style="width:100%">
    </div>
    <div class="column">
      <img src="../images/snow_mountains.jpg" alt="Snow" style="width:100%">
    </div>
    <div class="column">
      <img src="../images/mountain_landscape.jpg" alt="Mountains" style="width:100%">
    </div>
    <div class="column">
      <img src="../images/skylights.jpg" alt="Lights" style="width:100%">
    </div>
  </div>

  <div class="container">
    <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
    <img id="expandedImg" style="width:100%" />
  </div>
</body>

</html>

No errors in the console. The script is at the bottom of the body tag in the html. — Jeremy Mark, Jul 28 '20 at 16:28

ikiK · Accepted Answer · 2020-07-28T16:46:45.980

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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Gallery</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <link href="../jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="../jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
</head>

<body>
  <!-- The four columns -->
  <div class="row">
    <div class="column">
      <img src="https://pmcvariety.files.wordpress.com/2019/12/baby-yoda-plush-toy-mattel-the-mandalorian.png?w=1000&h=563&crop=1" alt="Nature" style="width:100%">
    </div>
    <div class="column">
      <img src="https://i.kinja-img.com/gawker-media/image/upload/t_original/oicrsr3wwqi6u3buvvxx.jpg" alt="Snow" style="width:100%">
    </div>
    <div class="column">
      <img src="https://images2.minutemediacdn.com/image/upload/c_crop,h_1224,w_2177,x_80,y_0/f_auto,q_auto,w_1100/v1574876645/shape/mentalfloss/609512-disney_0.jpg" alt="Mountains" style="width:100%">
    </div>
    <div class="column">
      <img src="https://static1.srcdn.com/wordpress/wp-content/uploads/2019/12/Baby-Yoda-in-The-Mandalorian-Chapter-4.jpg" alt="Lights" style="width:100%">
    </div>
  </div>

  <div class="container">
    <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
    <img id="expandedImg" style="width:100%" />
  </div>
</body>

</html>

@JeremyMark Great, you should consider marking this answer as accepted on checkmark to mark this question as solved for others, cheers. — ikiK, Jul 28 '20 at 17:12
@JeremyMark Not on that check mark (I don't mind a vote up), that one is for voting up ad down. To mark it as solved you need to press: ✔︎ , next to up and down arrow. I see you are new here so that you know for future reference. Cheers. — ikiK, Jul 28 '20 at 17:45

Trying to make a image tab gallery with click event

1 Answers1

Linked