Question

~ On my articles page (http://www.adrtimes.squarespace.com/articles) I have each entry start with an image that changes on rollover. This is working fine.

However, on my homepage (http://www.adrtimes.squarespace.com), I am loading in the 2 most recent articles that are not categorized as video, and the 2 most recent articles that are tagged as video. I am using jQuery load() to pull in the content from the articles page. Everything works ok with that except the swapImage rollovers on the homepage. i tried including the swapImage function as callbacks but only one group or the other will rollover properly, not both groups of content. I’m not sure what the problem is!!

Here is the code:

<script type="text/javascript">
<!--

$(function(){ 

$.swapImage(".swapImage");

/* Homepage */
// load recent articles
$("#LoadRecentArticles").load("/articles/ .list-journal-entry-wrapper .journal-entry-wrapper:not(.category-video)", function(){ 
  //callback...
  $("#LoadRecentArticles .journal-entry-wrapper").wrapAll('<div class="list-journal-entry-wrapper" />');
  $("#LoadRecentArticles .journal-entry-wrapper:gt(1)").remove();
  // modify Read More tag
  $('.journal-read-more-tag a:contains(Click to read more ...)').each(function(){ 
      var str = $(this).html(); 
      $(this).html(str.replace('Click to read more ...','Continue reading—')); 
  });
  $.swapImage(".swapImage"); 
});

// load recent videos
$("#LoadRecentVideos").load("/articles/category/video .list-journal-entry-wrapper", function(){ 
  //callback...
  $("#LoadRecentVideos .journal-entry-wrapper:gt(1)").remove();
  $('<div class="VideoTag">—video</div>').insertBefore("#LoadRecentVideos .category-video .body img");
  // modify Read More tag
  $('.journal-read-more-tag a:contains(Click to read more ...)').each(function(){ 
      var str = $(this).html(); 
      $(this).html(str.replace('Click to read more ...','Continue reading—')); 
  });
  $.swapImage(".swapImage");
}); 


}); 
-->
</script>

And here is a sample of the html for the images in an article entry:

<a href="/articles/2010/5/6/article-title-goes-here.html"><img class="swapImage {src: '/storage/post-images/Sample2_color.jpg'}" src="/storage/post-images/Sample2_bw.jpg" /></a>

Answer 1

My apologies if this isn’t what you want, but it is really pretty simple to do your own swap.

I don’t know exactly what your selector should be, but this will grab the src of the image when you mouseenter, and change it from _bw.jpg to _color.jpg, and back when you mouseleave.

HTML:

<img class='imageToSwap' src="http://adrtimes.squarespace.com/storage/post-images/Sample2_bw.jpg">

jQuery:

    $('.imageToSwap').hover(function() {
        var $th = $(this);
        var src = $(this).attr('src');
        var newSrc = src.replace(/_bw.jpg/, '_color.jpg');
        $th.attr('src', newSrc)
    },
    function() {
        var $th = $(this);
        var src = $(this).attr('src');
        var newSrc = src.replace(/_color.jpg/, '_bw.jpg');
        $th.attr('src', newSrc)
    });

---

EDIT:

version using live()

Hopefully this will do it for you. jQuery’s live() function will manage events for elements dynamically added to the DOM after the page loads.

Give it a try, and let me know how it turns out.

$('.imageToSwap').live('mouseover mouseout', function(event) {
    var $th = $(this);
    var src = $(this).attr('src');
    if (event.type == 'mouseover') {
      var newSrc = src.replace(/_bw.jpg/, '_color.jpg');
      $th.attr('src', newSrc)
    } else {
      var newSrc = src.replace(/_color.jpg/, '_bw.jpg');
      $th.attr('src', newSrc)
    }
});