Problem JQuery swapImage ();

Question

~ auf meinem Artikel Seite ( http://www.adrtimes.squarespace.com/articles) ich habe jeden Eintrag Start mit einem Bild, das auf Roll ändert. Dies funktioniert gut.

Allerdings auf meiner Homepage ( http://www.adrtimes.squarespace.com ), ich bin Laden in den 2 neuesten Artikel, die nicht als Video kategorisiert sind, und die 2 neuesten Artikel, die als Video-Tags versehen sind. Ich bin mit jQuery load () in dem Inhalt der Artikel Seite zu ziehen. Alles funktioniert mit, dass mit Ausnahme des swapImage Rollovers auf der Homepage ok. Ich habe versucht, einschließlich der swapImage Funktion als Rückrufe aber nur eine Gruppe oder der andere Roll richtig, nicht beide Gruppen von Inhalten. Ich bin nicht sicher, was das Problem ist !!

Hier ist der 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>

Und hier ist eine Probe des html für die Bilder in einem Artikel Eintrag:

<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

Ich entschuldige mich, wenn dies nicht das, was Sie wollen, aber es ist wirklich ziemlich einfach Ihre eigenen Swap zu tun.

Ich weiß nicht genau, was Ihre Wähler sein sollte, aber dies wird die src des Bildes greifen, wenn Sie mouseenter, und ändern Sie es von _bw.jpg zu _color.jpg und zurück, wenn Sie 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 mit Live ()

Hoffentlich wird es für Sie tun. jQuery live() Funktion verwaltet Ereignisse für Elemente dynamisch hinzugefügt, um den DOM, nachdem der Seite geladen wird.

Versuchen Sie es einmal, und lassen Sie mich wissen, wie es sich herausstellt.

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

Es erscheint, wenn Sie ein zweites Mal ausführen $.swapimage() es selbst deaktiviert. So in dem Rückruf versuchen Sie dies:

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