CODEWITHSUNDEEP
jqueryhtmlcss
dodgerblue
dodgerblue

Reputation: 255

Replace image using jQuery

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

Upvotes: 5

Views: 19180

Answers (4)

ShibinRagh
ShibinRagh

Reputation: 6656

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

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

Upvotes: 1

Dipesh Parmar
Dipesh Parmar

Reputation: 27384

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.

Upvotes: 8

Stephen Schwink
Stephen Schwink

Reputation: 512

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

Upvotes: 0

martriay
martriay

Reputation: 5742

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>

Upvotes: 1

Related Questions