Проблема с jQuery Swapsimage ();

Question

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

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

Вот код:

<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)
    });

---

РЕДАКТИРОВАТЬ:

Версия, используя Live ()

Надеюсь, это сделает это для вас. 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");