CODEWITHSUNDEEP
jquery
3gwebtrain
3gwebtrain

Reputation: 15303

jquery replace images for responsive layout

In my HTML page, i have 3 images for each sizes, to match responsive layouts. on click how can i replace the name alone in the img?

example:

 <img class="img-1024" src="images/photo-holder.jpg" />
 <img class="img-768" src="images/768/photo-holder.jpg" />
 <img class="img-320" src="images/320/photo-holder.jpg" />

how to change like this?

 <img class="img-1024" src="images/new-holder.jpg" />
 <img class="img-768" src="images/768/new-holder.jpg" />
 <img class="img-320" src="images/320/new-holder.jpg" />

any shortest way to do this?

Upvotes: 1

Views: 295

Answers (2)

Siva Charan
Siva Charan

Reputation: 18064

Do this way:-

$(document).on("click", "img", function(){
    $(this).attr("src", function(i,v) { 
        return v.replace("photo","new");
    });
});​​

Refer LIVE DEMO

Upvotes: 1

Ram
Ram

Reputation: 144689

One short option is using attr method.

$('img').attr('src', function(i, c) {
    return c.replace('photo', 'new')
});

or:

$('img').click(function() {
    this.src = this.src.replace('photo', 'new')
})

http://jsfiddle.net/hHSQe/

Upvotes: 1

Related Questions