views:

194

answers:

2

Hello!~ 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>
A: 

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"&gt;

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)
    }
});
patrick dw
This is a nice snippet! Thanks! i switched to this version and am having the same problem again ... the rollovers work fine on the original page (http://www.adrtimes.squarespace.com/articles), but don't work when loaded in using jquery load() on the homepage (http://www.adrtimes.squarespace.com). when the content is loaded in on the homepage i have to re-initiate any jquery that needs to be applied to the content and it doesnt seem to be working the way i try it.
VUELA
@VUELA - I'll update my answer in a minute. jQuery's `live()` method may be the way to go. Let me know if it works.
patrick dw
I was searching previous questions relating to jquery load() and came across this: http://stackoverflow.com/questions/1539129/figuring-out-when-images-are-loaded-after-they-are-inserted-using-jquery-loadur .... perhaps the rollover script is being applied before the images are actually finished loading?
VUELA
THE SECOND VERSION USING .live() WORKS PERFECTLY!!! THANKS SO MUCH, YOU'RE A SAVER.
VUELA
@VUELA - Glad it worked for you!
patrick dw
A: 

It appears if you run $.swapimage() a second time it disables itself. So in the callback try this:

$.swapImage("#LoadRecentVideos .swapImage");
fudgey
@fudgey - I was wondering about that, and I think you're right. A plugin that doesn't check for that scenario isn't worth using (in my opinion).
patrick dw
Thanks for this tip as well! I will keep this method (bug?) in mind if i run into the problem again!
VUELA
I think it is done on purpose, although it doesn't seem to be documented. Either way, I'm glad you got your answer :)
fudgey