CODEWITHSUNDEEP
javascriptjqueryhtml
acctman
acctman

Reputation: 4349

Multiple list show hide

I'm looking for a way to show a larger image within a div when its related thumbnail is selected. below is an example of what I'm trying to do with either jquery, javascript or html5. what method would work best for a layout like below

<div id="show_area">
 show large non-thumb image here
</div>

<!-- selection list -->

<div id="view1">
 <div class="info">
  <span>Product: Info</span>
  <span>Description: Info</span>
 </div>
  <a href="#"><img src="/thumb.jpg"></a>
</div>

<div id="view2">
 <div class="info">
  <span>Product: Info</span>
  <span>Description: Info</span>
 </div>
  <a href="#"><img src="/thumb.jpg"></a>
</div>

<div id="view3">
 <div class="info">
  <span>Product: Info</span>
  <span>Description: Info</span>
 </div>
  <a href="#"><img src="/thumb.jpg"></a>
</div>

<div id="view4">
 <div class="info">
  <span>Product: Info</span>
  <span>Description: Info</span>
 </div>
  <a href="#"><img src="/thumb.jpg"></a>
</div>

<div id="view5">
 <div class="info">
  <span>Product: Info</span>
  <span>Description: Info</span>
 </div>
  <a href="#"><img src="/thumb.jpg"></a>
</div>

<div id="view6">
 <div class="info">
  <span>Product: Info</span>
  <span>Description: Info</span>
 </div>
  <a href="#"><img src="/thumb.jpg"></a>
</div>

Upvotes: 1

Views: 73

Answers (2)

SarathSprakash
SarathSprakash

Reputation: 4624

Try this 

$('a img').click(function() {
    $('#show_area img').hide();
    $('#show_area img').attr('src','https://lh4.googleusercontent.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAABSw4/fNj-YFu4lgw/s120-c/photo.jpg').stop().fadeIn();
});

get the alternate image src

Fiddle: http://jsfiddle.net/sarathsprakash/2MkVY/

Upvotes: 0

Sergio
Sergio

Reputation: 28837

Try this:

$('img').on('click',function(){
    var old_img = this.src;
    var new_img =old_img.split('_thb').join('')
    $('#show_area').html('<img src="'+new_img+'" />');
});

An example here

Upvotes: 1

Related Questions