имеем html
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Новости</title>
<style>
ul {margin:0;padding:0}
.gallery img,
.gallery {width:340px; height:225px;display:block;}
.gallery>a {position:absolute; list-style:none; width:100%; height:100%;}
.naviBlock {text-align: center; z-index: 100; position: absolute; bottom: 10px; left:10px; height:7px;background: url("../img/png24.png")}
.naviBlock a { display: block; float:left; width: 5px; height: 5px; margin-right:1px; border:2px solid #0099ff; cursor: pointer; position: relative; background:transparent;}
.naviBlock a.selected {background:#0099ff;}
p {cursor:pointer}
</style>
</head>
<body>
<h1>Галерея 1</h1>
<ul class="gallery">
<li><img src="img/ra1.jpg" alt="" /></li>
<li><img src="img/ra2.jpg" alt="" /></li>
<li><img src="img/ra3.jpg" alt="" /></li>
<li><img src="img/ra4.jpg" alt="" /></li>
</ul>
<p>стоп гал.1</p>
<h1>Галерея 2</h1>
<ul class="gallery">
<li><img src="img/dep1.jpg" alt="" /></li>
<li><img src="img/dep2.jpg" alt="" /></li>
<li><img src="img/dep3.jpg" alt="" /></li>
</ul>
<p>стоп гал.2</p>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.fading_gallery.js"></script>
<script>
//формируем галерею
$(".gallery").fading_gallery({delay: 5000,naviBlock: 'naviBlock', insertTo: 'append'});
//при клике на P нужно заморозить соответствующую галерею
$("p").click(function(){
$(this).text("stop");
$(".gallery").eq($(this).index("p")).stop();
})
</script>
</body>
</html>
скрипт галереи:
(function($){
$.fn.fading_gallery = function(options){
var types = ['vertical', 'horizontal', 'opacity'];
var opts = $.extend({}, $.fn.fading_gallery.defaults, options);
this.each(function(){
var self = $(this);
var elems = self.children();
var visible, autochange, naviBlock;
var loaded = 0;
var width = self.outerWidth();
var height = self.outerHeight();
var offsets = [];
if (self.css('position') != 'absolute' && self.css('position') != 'relative') self.css('position', 'relative');
if (elems.size() < 2) opts.naviBlock = opts.delay = false;
if (opts.delay){
opts.delay = parseInt(opts.delay);
if (opts.delay < 100) opts.delay = opts.delay * 1000;
}
if (elems.size()) sortElems();
$(this).hover(function(){
clearInterval(autochange);
},function(){
if (opts.delay) autochange = setTimeout(function(){ getItem({data: {index: randomIndex(loaded, visible)}}) }, opts.delay);
});
function sortElems(){
var index = 0;
elems.each(function(){
$(this).css({position: 'absolute', zIndex: elems.size() - index, visibility: 'visible', opacity: 0})
countLoaded();
index++;
});
sortElems = null;
}
function countLoaded(){
loaded++;
if (loaded == elems.size()){
if (opts.naviBlock) createNaviBlock();
else {
visible = 0;
elems.first().animate({opacity: 1}, opts.speed);
if (opts.delay) autochange = setTimeout(function(){ getItem({data: {index: randomIndex(loaded, visible)}}) }, opts.delay);
}
countLoaded = null;
}
}
function createNaviBlock(){
naviBlock = $(document.createElement('div')).addClass(opts.naviBlock).css('display', 'none');
for (var i = 0; i < loaded; i++){
var navItem = $(document.createElement(opts.navItem)).bind('click', {index: i}, getItem);
naviBlock.append(navItem);
}
switch (opts.insertTo){
case 'before': naviBlock.insertBefore(self); break;
case 'append': self.append(naviBlock); break;
case 'prepend': self.prepend(naviBlock); break;
default: naviBlock.insertAfter(self);
}
self = null;
naviBlock.fadeIn('fast', function(){$(this).children().first().trigger('click')});
createNaviBlock = null;
}
function getItem(event){
var index = event.data.index;
if (index != visible){
if (autochange) clearInterval(autochange);
if (naviBlock){
naviBlock.children('.selected').removeClass('selected');
$(naviBlock.children().get(index)).addClass('selected');
}
var show = elems.get(index);
if (typeof visible != 'undefined'){
var hide = elems.get(visible);
$(show).css({display: 'block',zIndex: loaded - 1, opacity: 1});
var animate = (opts.animateType == 'random')?types[randomIndex(Math.floor(Math.random() * (types.length - 1)))]:opts.animateType;
switch (animate){
case 'horizontal':
var direction = (visible > index)?-width:width;
$(hide).animate({marginLeft: direction}, opts.speed, function(){$(show).css({zIndex: loaded}); $(this).css({opacity: 0})});
break;
case 'vertical':
var direction = (visible > index)?height:-height;
$(hide).animate({marginTop: direction}, opts.speed, function(){$(show).css({zIndex: loaded}); $(this).css({opacity: 0})});
break;
default: $(hide).animate({opacity: 0}, opts.speed, function(){$(show).css({zIndex: loaded}); $(this).css({display: 'none'})});
}
}else $(show).css({display: 'block'}).animate({opacity: 1}, opts.speed, function(){$(this).css({zIndex: loaded})});
visible = index;
}
if (typeof event.preventDefault != 'undefined') event.preventDefault();
if (opts.delay) autochange = setTimeout(function(){ getItem({data: {index: randomIndex(loaded, visible)}}) }, opts.delay);
}
/** Останавливаем слайдинг **/
function stop(){alert("stop it");
clearInterval(autochange);
}
});
}
function randomIndex(loaded, visible){
var rand = (visible+1<loaded)? visible+1:0
return rand;
}
$.fn.fading_gallery.defaults = {
naviBlock: false,
delay: false,
speed: 500,
insertTo: '',
navItem: 'a',
animateType: 'opacity'
};
})(jQuery);
Здесь через определенный интервал времени меняются картинки. Мне нужно чтобы была ф-я, которая выключила бы замену картинок у конкретной галереи и ф-я, которая бы включила. Я написал функцию (там где /** Останавливаем слайдинг **/) и попробовал привязать ее к клику на тег P, но почему-то не срабатыват. В фаирбаге никаких ошибок тоже нет.
Взываю о помощи
