есть слайдер реализованный в Drupal,слайдеры можно переключать при клике,как сделать чтобы слайды переключались при наведении мышкой?
снизу код и картинка
jQuery(document).ready(function($){
/****
* запуск слайдер-плагина на 3 окна
****/
$('#slideshow0').cycle({
fx: 'fade', // transition type
delay: -300,
speed: 1000,
timeout: 5000
});
$('#slideshow1').cycle({
fx: 'fade', // transition type
delay: 0,
speed: 1000,
timeout: 5000
});
$('#slideshow2').cycle({
fx: 'fade', // transition type
delay: 300,
speed: 1000,
timeout: 5000
});
/**
* Запиливание разворачивающихся и сворачивающихся списков
*/
var $catalogMenu = $('#block-cat-tree');
if ($catalogMenu.size()) {
var menuOptions = {
collapse: 'collapsed',
expand: 'expanded',
liActive: 'active-trail',
act: 'active',
ul: 'item-cat'
}
var menuMethods = {
setExpanded: function($li){
if ($li.has('ul').size()){
$li
.addClass(menuOptions.expand)
.removeClass(menuOptions.collapse);
}
},
setExpandedTree: function($li){
this.setExpanded($li);
if (!$li.parent().hasClass(menuOptions.ul)){
this.setExpandedTree($li.parent().closest('li'));
}
}
}
var $liWithUl = $catalogMenu.find('li:has(>ul)').not('.' + menuOptions.expand).not('.' + menuOptions.collapse);
$liWithUl
.addClass(menuOptions.collapse)
.has('ul:visible').removeClass(menuOptions.collapse).addClass(menuOptions.expand);
var $liActive = $catalogMenu.find('a.' + menuOptions.act).closest('li');
if ($liActive.size()){
menuMethods.setExpandedTree($liActive);
}
//console.log($liWithUl.size());
$catalogMenu.find('li.collapsed, li.expanded').find('>span').bind('click', function(evt){
evt.preventDefault();
evt.stopPropagation();
var $span = $(this),
$li = $span.closest('li'),
$ul = $span.siblings('ul');
$ul.toggle();
$li
.toggleClass(menuOptions.collapse)
.toggleClass(menuOptions.expand);
});
}
$('.slider').alSlider();
var $scrollbarX = $('#scrollbarX');
if ($scrollbarX.size()) {
$scrollbarX.find('.overview').css('width', ($scrollbarX.find('.overview li').size() * $scrollbarX.find('.overview li:eq(0)').outerWidth(true)) + 'px');
$scrollbarX.tinyscrollbar({ axis: 'x'});
}
});
/**
* Функция, в которой мы запилим наш слайдер
*/
(function($){
$.fn.extend({
alSlider: function(options){
var defaults = {
speed: 500,
delay: 5000
};
var metric = {
elem: '.elem',
title: '.title',
text: '.text',
// панель управления
controls: 'controls',
controlElem: 'page',
appendix: 'arrow',
// data-аттрибуты
dataIndex: 'data-index',
// активность
active: 'active'
};
options = $.extend(defaults, options);
return this.each(function(){
var o = options,
slider = $(this);
// В начале получаем список элементов
var $elems = slider.find(metric.elem);
// теперь определим высоту слайдера по первой картинке
slider.height( parseInt($elems.eq(0).find('img').height()) );
// Определяем нашу панель управления, которая будет содержать текст из элементов и показывать ее поверх
// и хвостик, который будет ездить туда-сюда
var $controls = $('<div class="' + metric.controls + '"></div>'),
$appendix = $('<span class="' + metric.appendix + '"></span>');
$elems.each(function(ind){
var text = $('<div class="' + metric.controlElem + '"></div>'),
that = $(this);
// Проставим им всем атрибут с индексом для связи
that.attr(metric.dataIndex, ind);
// и для содержимого панели управления тоже
text.attr(metric.dataIndex, ind);
// ну и активный класс для первой страницы
if ( ind == 0 ){
text.addClass(metric.active);
}
that.find(metric.title).clone().appendTo(text);
that.find(metric.text).clone().appendTo(text);
$controls.append(text);
});
$controls.append($appendix);
slider.after($controls);
var methods = {
slider: slider,
sliderElements: $elems,
/**
* Функция запуска прокрутки картинок
*/
init: function(){
var that = this;
that.sliderElements.not(':first').hide();
that.reApplyInterval();
that.controlElems = $controls.find('.' + metric.controlElem);
// запиливаем контролеры
$controls.delegate('.' + metric.controlElem, 'click', function(){
clearInterval(that.timer);
var $elem = $(this),
pos = $elem.attr(metric.dataIndex);
// переставляем активные классы
$elem.siblings().removeClass(metric.active).end().addClass(metric.active);
that.showImg(pos);
that.appendixMove(pos, $controls);
that.reApplyInterval();
});
},
/**
* Функция перезапускает интервал, если он был сбит
*/
reApplyInterval: function(){
var that = this;
if(that.timer){
clearInterval(that.timer);
}
that.timer = setInterval(function(){
var elemVisible = that.sliderElements.filter(':visible');
var elemNext = ( elemVisible.next().size() ) ? elemVisible.next() : that.sliderElements.eq(0);
that.showImg();
}, o.delay);
},
/**
* Производит смену картинок в слайдере.
* Если передан индекс, то меняет на нужную
* @param ind {Number} Определяет индекс слайда для показа
*/
showImg: function(ind){
var that = this,
elemVisible = that.sliderElements.filter(':visible'),
elemNext,
indMoveTo;
if (isNaN(ind)){
elemNext = ( elemVisible.next().size() ) ? elemVisible.next() : that.sliderElements.eq(0);
indMoveTo = elemNext.attr(metric.dataIndex);
}
else if (ind != elemVisible.attr(metric.dataIndex) ){
elemNext = that.slider.find( metric.elem + ':eq(' + ind + ')' );
indMoveTo = ind;
}
else {
return;
}
elemVisible.css('z-index','100');
elemNext.css('z-index', '99');
elemNext.show();
elemVisible.fadeOut(o.speed);
// перемещаем аппендикс
that.appendixMove(indMoveTo);
// ну и вешаем активный класс
that.controlElems.removeClass(metric.active).eq(indMoveTo).addClass(metric.active);
},
/**
* Функция, которая сдвигает уголок-указатель в панельке управления
* @param ind
*/
appendixMove: function(ind){
var that = this,
$elemMoveTo = that.controlElems.eq(ind);
// оцениваем позицию в списке относительно родителя
var position = $elemMoveTo.position();
// теперь надо найти аппендикс наш
if ( !that.appendix ){
that.appendix = that.slider.parent().find('.' + metric.appendix);
}
var newLeftPosition = position.left + Math.floor($elemMoveTo.outerWidth(true) / 2);
that.appendix.animate( { left: newLeftPosition + 'px' }, defaults.speed );
}
};
methods.init();
});
}
});
})(jQuery);