Проблема с JQuery swapImage();

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

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

Вот код:

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

html jquery content-management-system rollover squarespace
person VUELA    schedule 20.05.2010    source источник
comment
Я ничего не знаю об этом плагине (кроме того, что я только что посмотрел), но может ли быть так, что он запутался, потому что вы используете одно и то же изображение src для двух наборов свопов? Не могли бы вы попробовать дать уникальное имя изображениям, которые не хотят обмениваться, и посмотреть, поможет ли это? (В основном создайте дубликаты изображений с новыми именами.) Я вижу из выделения кода в Firebug, что при наведении курсора происходит изменение src изображения. Но, похоже, он просто дает ему оригинальные src для двух, которые не работают.   -  person user113716    schedule 20.05.2010
comment
Похоже, что страница статей (adrtimes.squarespace.com) будет иметь ту же проблему, если она вызвана используя одни и те же изображения ... но я все равно попробовал и настроил так, чтобы все изображения, загружаемые на домашнюю страницу, имели уникальные имена, но это не сработало. :(   -  person VUELA    schedule 20.05.2010
comment
Из любопытства, это {src: '/storage/post-images/Sample2_color.jpg'} добавлено вами или плагином?   -  person user113716    schedule 20.05.2010
comment
Часть, помеченная как html в приведенном выше коде, — это то, что я помещаю туда, где мне нужны изображения. поэтому я вставил это, но он изменен, чтобы добавить swapimageid плагином.   -  person VUELA    schedule 20.05.2010
comment
документация по плагину: code.google.com/p/jquery-swapimage   -  person VUELA    schedule 20.05.2010
comment
Да, я видел документы. Есть ли причина, по которой вы хотите использовать плагин, а не просто менять изображение самостоятельно?   -  person user113716    schedule 20.05.2010

Ответы (2)


arrow_upward
1
arrow_downward

Мои извинения, если это не то, что вы хотите, но сделать свой собственный обмен действительно довольно просто.

Я не знаю точно, каким должен быть ваш селектор, но он захватит 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 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)
    }
});
person user113716    schedule 20.05.2010
comment
Это хороший фрагмент! Спасибо! я перешел на эту версию и снова столкнулся с той же проблемой... ролловеры отлично работают на исходной странице (adrtimes.squarespace.com/articles), но не работают при загрузке с помощью jquery load() на главной странице (adrtimes.squarespace.com). когда контент загружается на домашнюю страницу, мне приходится повторно инициировать любой jquery, который необходимо применить к контенту, и, похоже, он не работает так, как я пытаюсь. - person VUELA; 20.05.2010
comment
@VUELA - я обновлю свой ответ через минуту. Метод jQuery live() может быть подходящим способом. Дайте мне знать, если это работает. - person user113716; 20.05.2010
comment
Я искал предыдущие вопросы, касающиеся jquery load(), и наткнулся на это: -inserted-using-jquery-loadur" title="выяснение того, когда изображения загружаются после их вставки с помощью jquery loadur"> stackoverflow.com/questions/1539129/ .... возможно, применяется сценарий прокрутки до того, как изображения на самом деле закончат загрузку? - person VUELA; 20.05.2010
comment
ВТОРАЯ ВЕРСИЯ С ИСПОЛЬЗОВАНИЕМ .live() РАБОТАЕТ ОТЛИЧНО!!! СПАСИБО БОЛЬШОЕ, ВЫ СПАСИТЕЛЬ. - person VUELA; 20.05.2010

arrow_upward
0
arrow_downward

Он появляется, если вы запустите $.swapimage() во второй раз, когда он отключится. Итак, в обратном вызове попробуйте следующее:

$.swapImage("#LoadRecentVideos .swapImage");
person Mottie    schedule 20.05.2010
comment
Я думал об этом, и я думаю, что вы правы. Плагин, который не проверяет этот сценарий, не стоит использовать (на мой взгляд). - person user113716; 20.05.2010
comment
Спасибо и за этот совет! Я буду помнить об этом методе (ошибке?), если снова столкнусь с проблемой! - person VUELA; 20.05.2010
comment
Я думаю, что это сделано намеренно, хотя, похоже, это не задокументировано. В любом случае, я рад, что вы получили ответ :) - person Mottie; 21.05.2010