replacing multiple instances of html with jquery

Question

HTML:

<div class="slide">
  <div class="left">
    <img src="img-lg.png" class="image1" />
  </div>
  <div class="thumbs">
    <img src="img-sm.png" />
  </div>
</div>

<div class="slide">         
  <div class="left">
    <img src="anotherimg-lg.png" class="image1" />
  </div>
  <div class="thumbs">
    <img src="anotherimg-sm.png" />
  </div>    
</div>

Jquery:

var originalContent = $('.left').html();
$("div.thumbs img").hover(function(){
  var largesrc = $(this).attr("src").replace("sm","lg");
  $(".left").html('<img src="' + largesrc 
    + '" width="560" height="377" class="largeimage" />');
}, function() {
  $(".left").html(originalContent);
});

I am replacing the large image with the smaller one on hover and then reverting back to the original. This works fine, but I can't figure out how to get it to work with multiple instances.

In the second slide set, the left image gets replaced by the original first left image and not the second.

I guess you need to get html of parent of left originalContent = $('div.left').parent().html(); and then replace it $('div.left').parent().html(originalContent); — Tarun
– Tarun, Commented Nov 6, 2012 at 5:58
Can you please share a screen shot to make clear what you want to do? — Tarun
– Tarun, Commented Nov 6, 2012 at 6:02

Musa · Accepted Answer · 2012-11-06 06:44:37Z

4

How about

$("div.thumbs img").hover(function(){
        $(this).closest('.slide').find('.left img').attr({
            src: this.src.replace("sm","lg"),
            width: 560,
            height: 377,
            'class': 'largeimage'
        });
}, 
function() {
        var img = $(this).closest('.slide').find('.left img');
        img.attr({src: img[0].src.replace("lg","sm")})
        .removeAttr('width height class');
});

Here you swap the src property of the image element, without modifying the dom structure.

DEMO

edited Nov 6, 2012 at 6:44

answered Nov 6, 2012 at 5:58

Musa

97.9k17 gold badges123 silver badges144 bronze badges

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

2 Comments

nomi Over a year ago

This is a lot cleaner than I had, thank you! The only problem is that I need to replace the image in the left div for each slide and then revert back.

nomi Over a year ago

I think this will help the images load faster. Thank you!

Lee · Accepted Answer · 2012-11-06 06:24:33Z

0

$("div.thumbs img").hover(function(){
  var $this = $(this);

  // find the containing .slide, then find .left within that
  var left = $this.closest('.slide').find('.left');

  // store the original content as "data" on `left`, so
  // we can get it easily in the future
  left.data('originalContent', left.html());

  var largesrc = $this.attr("src").replace("sm","lg");
  left.html('<img src="' + largesrc 
    + '" width="560" height="377" class="largeimage" />');
}, function() {
  var $this = $(this);
  var left = $this.closest('.slide').find('.left');

  // fetch the "data" we stored earlier, and restore it
  left.html(left.data('originalContent'));
});

A live example is available here.

edited Nov 6, 2012 at 6:24

answered Nov 6, 2012 at 6:09

Lee

13.5k1 gold badge34 silver badges46 bronze badges

2 Comments

nomi Over a year ago

It's so close, thank you! But, I'm still at the same spot because the second slide reverts back to the original image of the first slide and I need it to show the original image of the second slide instead.

Lee Over a year ago

sorry, there was an error: left.data('originalContent', $('.left').html() should have been left.data('originalContent', left.html()). I've corrected my example above.

Collectives™ on Stack Overflow

replacing multiple instances of html with jquery

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related