Problema con JQuery swapImage ();

Question

~ En mi página de noticias ( http://www.adrtimes.squarespace.com/articles) tengo cada inicio de entrada con una imagen que cambia el vuelco del vehículo. Esta multa se encuentra trabajando.

Sin embargo, en mi página ( http://www.adrtimes.squarespace.com ), estoy de carga en los 2 artículos más recientes que no están clasificados como de vídeo, y los 2 artículos más recientes que están etiquetadas como de vídeo. Estoy utilizando la carga jQuery () para tirar en el contenido de la página de artículos. Todo funciona bien con eso, excepto los vuelcos swapImage en la página principal. He intentado incluyendo la función swapImage como devoluciones de llamada, pero sólo un grupo u otro vuelco voluntad correctamente, no ambos grupos de contenido. No estoy seguro de cuál es el problema !!

Este es el código:

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

Y aquí es una muestra del HTML para las imágenes en una entrada del artículo:

<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

Mis disculpas si esto no es lo que quiere, pero en realidad es muy simple de hacer su propio intercambio.

No sé exactamente lo que debe ser su selector, pero esto va a agarrar el src de la imagen cuando mouseenter, y cambiarlo de _bw.jpg a _color.jpg, y la espalda cuando 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:

versión en vivo usando ()

Esperamos que esto lo haga por usted. live() función de jQuery gestionará eventos para elementos añadidos dinámicamente a la DOM después se carga la página.

Darle una oportunidad, y quiero saber cómo resulta.

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

Parece si ejecuta $.swapimage() segunda vez que se desactiva. Así, en la devolución de llamada intente lo siguiente:

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