CODEWITHSUNDEEP
jqueryloadthumbnails
Layne
Layne

Reputation: 672

click thumbnail and load image into empty div

Loading images from thumbnails seems to have been covered ad nauseum but I just can't wrap my brain around it. Here's my html where #sideWall holds the thumbs and I want the hi-rez to go into #photoHolder...

<div id="graphicContainer">
<div id="sideWall">
    <span class="sideHead">EXHIBITS</span><br/>
    <span class="sideChatter">Click an image to learn more.</span><br/>
    <img src="images/frisco4501_t.jpg" full="frisco4501.jpg" />
    <img src="images/centennial_t.jpg" full="centennial.jpg" />
    <!--     etc...     -->
</div> <!--End of sidewall-->
<div id="photoHolder"></div>

Here's my $. The alert() is returning the right directory and the fade is working, the image just isn't loading...

$('#sideWall img').each(function(){
    $this = $(this);
    $image = "../images/"+$this.attr('full');
    $this.click(function(){
        alert($image);
        $("#photoHolder").html('<img src="'+$image +'" />');
        $("#photoHolder").fadeIn(2000);         
    })
});

Upvotes: 1

Views: 6415

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206508

No need for the .each(). jQuery handles collections out of the box.
Also, use HTML5 data-* attribute to store the larger image src string:

$('#sideWall').on('click', '[data-src2x]', function() {
  const src2x = $(this).data('src2x');
  $("#photoHolder").hide().html(`<img src="${src2x}">`).fadeIn();         
});
<div id="graphicContainer">

  <div id="sideWall">
      <h4 class="sideHead">EXHIBITS</h4>
      <p class="sideChatter">Click an image to learn more.</p>
      <img src="http://placehold.it/100x50/cf5" data-src2x="http://placehold.it/200x100/cf5" />
      <img src="http://placehold.it/100x50/f0f" data-src2x="http://placehold.it/200x100/f0f" />
  </div>
  
  <div id="photoHolder"></div>
  
</div>

<script src="//code.jquery.com/jquery-3.1.0.js"></script>

Upvotes: 1

Robyflc
Robyflc

Reputation: 1209

I would try something like this:

$('#sideWall img').click(function(){
    $image = "../images/"+$(this).attr('data-full');
    alert($image);
    $("#photoHolder").html('<img src="'+$image +'" />').fadeIn(2000);         
});

Didn't have to test it but it should work. Note that I changed the attr 'full' to 'data-full' to make it HTML5 valid.

Upvotes: 0

Jirka Kopřiva
Jirka Kopřiva

Reputation: 3099

I think, the solution can be done more simply:

$('#sideWall img').click(function(){
  var c = $(this).attr("src").replace('_t.','.');
  $("#photoHolder").html('<img src="'+ c +'" />');
  $("#photoHolder").fadeIn(2000);         
})

sure in case (of common praxis) - thumb has same name and is in same directory. No attribute 'full' is needed then.

Upvotes: 3

Related Questions