Проблема с JQuery swapImage();

Question

~ На моей странице статей (http://www.adrtimes.squarespace.com/articles) У меня есть каждая запись с изображением, которое изменяется при опрокидывании. Это работает нормально.

Тем не менее, на моей домашней странице (http://www.adrtimes.squarespace.com), я загружаю 2 последних статьи, которые не относятся к категории видео, и две последние статьи, помеченные как видео. Я использую загрузку jQuery(), чтобы вытащить содержимое со страницы статей. Все работает нормально, кроме swapImage rollovers на главной странице. я попытался включить функцию swapImage в качестве обратных вызовов, но только одна группа или другая команда будет опрокидываться должным образом, а не обе группы контента. Я не уверен, в чем проблема!

Вот код:

<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> 

А вот образец HTML для изображений в записи статьи:

<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

Мои извинения, если это не то, что вы хотите, но на самом деле довольно просто сделать свой собственный своп.

Я не знаю точно, что ваш селектор должен быть, но это будет захватывать src изображения при mouseenter, и изменить его от _bw.jpg к _color.jpg и обратно, когда вы 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:

версия с использованием живой()

Hopeful это сделает это за вас. Функция jQuery's live() будет управлять событиями для элементов, динамически добавленных в DOM после загрузки страницы.

Попробуйте, и дайте мне знать, как это получается.

$('.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) 
    } 
}); 

Answer 2

Оказывается, если вы запускаете $.swapimage() во второй раз он отключает себя. Таким образом, в функции обратного вызова, попробуйте следующее:

$.swapImage("#LoadRecentVideos .swapImage");