Problème avec JQuery swapImage ();

Question

~ Sur mes articles la page ( http://www.adrtimes.squarespace.com/articles) Je chaque début d'entrée avec une image qui change lors du survol. Cela fonctionne très bien.

Cependant, sur ma page d'accueil ( http://www.adrtimes.squarespace.com ), Je suis chargement dans les 2 derniers articles qui ne sont pas classés comme vidéo, et les 2 articles les plus récents qui sont marqués comme vidéo. J'utilise la charge jQuery () pour tirer dans le contenu de la page des articles. Tout fonctionne bien avec l'exception que les renversements de swapImage sur la page d'accueil. J'ai essayé, y compris la fonction swapImage comme callbacks mais seulement un ou l'autre groupe repassera correctement, pas les deux groupes de contenu. Je ne sais pas quel est le problème !!

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

Et voici un échantillon du html pour les images dans une entrée de l'article:

<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

Mes excuses si ce n'est pas ce que vous voulez, mais il est vraiment très simple à faire votre propre swap.

Je ne sais pas exactement ce que votre sélecteur doit être, mais cela va récupérer le src de l'image lorsque vous mouseenter, et changer de _bw.jpg à _color.jpg, et quand vous 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

à l'aide en direct ()

Espérons que cela fera pour vous. La fonction live() jQuery va gérer les événements pour les éléments ajoutés dynamiquement au DOM après le chargement de la page.

Essayez-le, et laissez-moi savoir comment il se trouve.

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

Il apparaît si vous exécutez $.swapimage() une seconde fois il se désactive. Donc, dans le rappel, essayez ceci:

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