Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Kelly Hogan
Kelly Hogan
351 Points

I am trying to have an image gallery and when one is clicked a larger version of that image pops out of the gallery.

I am trying to have an image gallery and when one is clicked a larger version of that image pops out of the gallery. My code looks like this but nothing happens when I click on the image.

<script> "use strict";

$(function(){

  $(".image").click(function() {
    console.log("$(this).attr('src')=" + $(this).attr('src'));
    displayLargeImage($(this));
});


  function displayLargeImage(selectedPic) {
      var old_large_image = $("#largeimage").stop().fadeOut(5000,function(){

        $("#largeimage").attr("src",selectedPic.prop('src'));
        $("#largeimage").prop("width", Number(selectedPic.attr('width'))*2);
        $("#largeimage").prop("height", Number(selectedPic.attr('height'))*2);
        $("#largeimage").stop().show();

    });

  }

  $("#largeimage").attr("src",$("#gallery img:last").prop('src'));
  $("#largeimage").prop("width", Number($("#gallery img:last").attr('width'))*2);
  $("#largeimage").prop("height", Number($("#gallery img:last").attr('height'))*2);

});

</script>

</head>

<body style="background-color:powderblue;"> <a href="../home.html">Home</a><br> <img src="../sftwear.jpg" alt="sftwear logo"><br><br>

<div id="gallery"> <h1> IT 411</h1> <h3>Image Gallery</h3><hr />

<p>Move your mouse over an image and it will become larger.</p>

<img class="image" src="images/one.jpg" height="250px" width="250px"><br><br>
<img class="image" src="images/two.jpg" height="250px" width="250px"><br><br>
<img class="image" src="images/three.jpg" height="250px" width="250px"><br><br>
<img class="image" src="images/four.jpg" height="250px" width="250px"><br><br>       <img class="image" src="images/five.jpg" height="250px" width="250px"><br><br>

  <img id="largeimage">

</div>

</body>

<footer><br> <p>Ā© Sftwear by Kelly Hogan</p> </footer>

</html>