Replace image using jQuery

Question

Here is my HTML:

<div id="show">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR51FTd5w9iwfz_PLnUTUIbYBB0bCX6d3ue1ZSx3SJObNLGECEm"
>
</div>
<div id="thumbnails">
    <div id="thumbnail1">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPIzMxDNjQ_x4iUZ6WLo9R32QKCreu8PQGxcRHWmUw4hNcYmiR"
        width="100" height="100">
    </div>
    <div id="thumbnail2">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR51FTd5w9iwfz_PLnUTUIbYBB0bCX6d3ue1ZSx3SJObNLGECEm"
        width="100" height="100">
    </div>
    <div id="thumbnail3">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTsplNlIS3zRyy89UxlT5Nwu_Bn7m6w7iqMYXPF9q9MpLOG17XR"
        width="100" height="100">
</div>

My CSS:

#thumbnails div {
    float:left;
    border:1px solid;
}
#thumbnails div:hover {
    color:yellow;
}

So, I just want to change the div #show with any thumbnails below it when clicked. I've tried it using jQuery .attr('src', 'url'); but it doesn't work well.

Fiddle: http://jsfiddle.net/PemHv/

Thank you

I've tried it using jQuery .attr('src', 'url'); but it doesn't work well. Huh? — Derek 朕會功夫
– Derek 朕會功夫, Commented Mar 1, 2013 at 5:24
You should at least post what Javascript you do have in your Fiddle for any of us to help put you on the right track. — ncksllvn
– ncksllvn, Commented Mar 1, 2013 at 5:25
I put my attempt using jQuery on my fiddle, I only knew using .remove() and .attr() and it didn't work, so I remove my .attr() — dodgerblue
– dodgerblue, Commented Mar 1, 2013 at 5:41

Dipesh Parmar · Accepted Answer · 2013-03-01 05:31:43Z

8

User .on() to assign click event to dom and .attr() to get attribute value of DOM.

$('#thumbnails img').on('click',function(){
   var src = $(this).attr('src');
   $('#show img').attr('src',src);
});

Explanation

in above code i assigned click event to the images inside div with id of thumbnails now first get the src attribute of the clicked image and set it into src variable.

then in next line it replace the src attribute of image inside show div.

edited Mar 1, 2013 at 5:31

answered Mar 1, 2013 at 5:25

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

martriay · Accepted Answer · 2013-03-01 05:26:56Z

Demo: http://jsfiddle.net/PemHv/3/

jQuery:

$('img',".thumbnail").click(function(){
  var src = $(this).attr('src');
  $('img',$('#show')).attr('src',src);
});

HTML (you should use classes):

<div id ="show">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR51FTd5w9iwfz_PLnUTUIbYBB0bCX6d3ue1ZSx3SJObNLGECEm" width="200" height="200">
    </div>

<div id="thumbnails">
<div class="thumbnail">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPIzMxDNjQ_x4iUZ6WLo9R32QKCreu8PQGxcRHWmUw4hNcYmiR" width="100" height="100">
    </div>

<div class="thumbnail">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR51FTd5w9iwfz_PLnUTUIbYBB0bCX6d3ue1ZSx3SJObNLGECEm" width="100" height="100">
    </div>
    </div>

ShibinRagh · Accepted Answer · 2013-03-01 10:28:10Z

1

http://jsfiddle.net/PemHv/9/

$('#thumbnails div').click(function(){
    var path = $(this).find('img').attr("src");
    //console.log(path)
    $('#show img').attr("src", path );
});

answered Mar 1, 2013 at 10:28

ShibinRagh

6,6764 gold badges38 silver badges61 bronze badges

Comments

Stephen Schwink · Accepted Answer · 2013-03-01 05:30:32Z

0

$('#show')
    .children()
    .on('click', function(event) {
        $(event.target).attr('src', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPIzMxDNjQ_x4iUZ6WLo9R32QKCreu8PQGxcRHWmUw4hNcYmiR');
    });

answered Mar 1, 2013 at 5:30

Stephen Schwink

5124 silver badges7 bronze badges

Collectives™ on Stack Overflow

Replace image using jQuery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related