Нужна помощь гуру jQuery[Решено]

Главные вкладки

Аватар пользователя darkdim darkdim 7 апреля 2012 в 14:46

Доброго времени суток!
в views_showcase есть такой "кусок" кода(ниже), где одна его часть, а именно

    pagerAnchorBuilder: function(idx, slide) {
        // return selector string for existing anchor
        return '.views-showcase-mini-list .views-showcase-pager-item:eq(' + idx + ')';
    }

возвращает ссылку на фотку в "слайдере", т.е. при клике на списке мини-лист меняется картинка.

Для того, что бы картинка менялась при событии мыши, добавляется строка
pagerEvent: 'mouseover.cycle',

а как добиться того, что бы при наведении мыши на item мини-лист менялась картинка, а при клике на ссылку в том же мини-лист осуществлялся переход на соответствующий url?

// $Id$
Drupal.behaviors.views_showcaseBehavior = function (context) {
  //change the active slide class name
  $.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) {
      $(pager).find('.views-showcase-pager-item').removeClass('activeItem')
          .filter('.views-showcase-pager-item:eq('+currSlideIndex+')').addClass('activeItem');
  };
 
  var sync      = Drupal.settings.views_showcase.sync      == "true" ? true : false;
  var listPause = Drupal.settings.views_showcase.listPause == "true" ? true : false;
  var pause     = Drupal.settings.views_showcase.pause     == "true" ? true : false;

  //if timeout is set to a negative value change it to 0
  if (parseInt(Drupal.settings.views_showcase.timeout) > 0) {
    var handled_timeout = parseInt(Drupal.settings.views_showcase.timeout);
  }
  else {
    var handled_timeout = 0;
  }

  $('ul.views-showcase-big-panel').cycle({
    fx: Drupal.settings.views_showcase.cycle,
    easing: Drupal.settings.views_showcase.easing,
    sync: sync,
    pauseOnPagerHover: listPause,
    pause: pause,
    timeout: handled_timeout,
    pager:  '.views-showcase-mini-list',
    pagerAnchorBuilder: function(idx, slide) {
        // return selector string for existing anchor
        return '.views-showcase-mini-list .views-showcase-pager-item:eq(' + idx + ')';
    }
  });
};

Комментарии

Аватар пользователя darkdim darkdim 8 апреля 2012 в 10:14

RESPECT!!!

Я сначала подумал, что это "не совсем то"... скорее из-за ничтожно малой практики работы с jQuery, потом сообразил, что вместо ссылка "вписывается" выбор элемента DOM, а не то что можно подумать(линк), тогда все стало на свои места.

Большое человеческое Спасибо!

PS jQuery надо учить, однозначно.

Аватар пользователя darkdim darkdim 24 мая 2012 в 9:25

По просьбам, привожу измененный код views_showcase.js

в идеале хорошо было бы unset его из массива подгружаемых js и add измененный файл из папки темы, тогда при обновлении меньше шансов его потереть.

// $Id$
Drupal.behaviors.views_showcaseBehavior = function (context) {
  //change the active slide class name
  $.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) {
      $(pager).find('.views-showcase-pager-item').removeClass('activeItem')
          .filter('.views-showcase-pager-item:eq('+currSlideIndex+')').addClass('activeItem');
  };
 
  var sync      = Drupal.settings.views_showcase.sync      == "true" ? true : false;
  var listPause = Drupal.settings.views_showcase.listPause == "true" ? true : false;
  var pause     = Drupal.settings.views_showcase.pause     == "true" ? true : false;

  //if timeout is set to a negative value change it to 0
  if (parseInt(Drupal.settings.views_showcase.timeout) > 0) {
    var handled_timeout = parseInt(Drupal.settings.views_showcase.timeout);
  }
  else {
    var handled_timeout = 0;
  }

  $('ul.views-showcase-big-panel').cycle({
    fx: Drupal.settings.views_showcase.cycle,
    easing: Drupal.settings.views_showcase.easing,
    sync: sync,
    pauseOnPagerHover: listPause,
    pause: pause,
    timeout: handled_timeout,
    pager:  '.views-showcase-mini-list',
    pagerEvent: 'mouseover.cycle',
//    pagerEvent: 'click.cycle',
    pagerAnchorBuilder: function(idx, slide) {
        // return selector string for existing anchor
        return '.views-showcase-mini-list .views-showcase-pager-item:eq(' + idx + ')';
    }
  });
 
  $('ul.views-showcase-mini-list li.views-showcase-pager-item a').click(function(){
    location.href = this.href;
  });
};