Problemi con JQuery swapImage ();

Question

~ sulla mia pagina di articoli ( http://www.adrtimes.squarespace.com/articles) ho ogni avvio voce con un'immagine che cambia il rollover. Questo raffinato sta lavorando.

Tuttavia, sulla mia home page ( http://www.adrtimes.squarespace.com ), sono carico nei 2 articoli più recenti che non sono classificati come video e gli articoli 2 più recenti che sono contrassegnati come video. Sto usando jQuery load () per tirare nel contenuto dalla pagina articoli. Tutto funziona bene con che, tranne i rollover swapImage sulla homepage. ho provato compresa la funzione swapImage come callback ma solo gruppo o l'altro rollover volontà correttamente, non entrambi i gruppi di contenuti. Non sono sicuro di quale sia il problema !!

Ecco il codice:

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

E qui è un campione del HTML per le immagini in una voce articolo:

<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

Le mie scuse se questo non è ciò che si vuole, ma in realtà è abbastanza semplice da fare il proprio swap.

Non so esattamente che cosa il vostro selettore dovrebbe essere, ma questo sarà afferrare il src dell'immagine quando si mouseenter, e cambiare da _bw.jpg a _color.jpg, e di nuovo quando si 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)
    });

---

Modifica

versione che utilizza dal vivo ()

Speriamo che questo lo farà per voi. la funzione live() di jQuery gestirà gli eventi per gli elementi aggiunti dinamicamente al DOM dopo il caricamento della pagina.

Provatelo e fatemi sapere come andrà a finire.

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

Sembra se si esegue $.swapimage() una seconda volta esso si disattiva. Così nel callback provate questo:

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