Всем привет!
Есть
страница, на которой расположен слайдер на основе setInterval(), который демонстрирует фото и видео (по 6 превью за один слайд), при клике по которым появляется полноразмерные модальные окна, реализованные - я так понимаю - с помощью jbox.
Есть задача: при наведении курсора мыши на превью или при открытии модального окна, слайдер должен приостанавливать свою работу, и - соответственно - при закрытом окне и уводе курсора с превью работа возобновляется. Практически, всё получилось, но...при открытом модальном окне слайдер перестает работать лишь когда курсор наведен на само окно. Если его увести на затемняющий слой (div id="jBox-overlay"), то прокрутка возобновляется, хотя я и прописал нужное условие, ну, или я так надеюсь!)))
$('#jBox-overlay').on('mouseover', function(e){
clearInterval (setIntId );
});
Вот весь код скрипта:
<script type="text/javascript">
var groupcurrent = 0;
var setIntId = setInterval(function(){
if (groupcurrent < <?=$groupcnt1?> - 1) {
groupcurrent++;
} else {
groupcurrent = 0;
}
$('.groupsbtn a').eq(groupcurrent).click();
}, 5000);
var myModal = new jBox('Modal', {content: $('#galdialog'), delayOpen: 500, onClose: function() {
$('#galdialog .cntnt').html('');
}});
var activei = 0;
$('#thegallery .galimg').on('mousemove', function(){
$(this).find('.galmore, .galopacity').show();
}).on('mouseleave', function(){
$(this).find('.galmore, .galopacity').hide();
});
$('#thegallery a').on('click', function(e){
e.preventDefault();
activei = $(this).index('#thegallery a');
if (gallery[activei].type === 'foto') {
var inhtml = '<div><img src="'+gallery[activei].url+'" alt="" /></div>';
} else if (gallery[activei].type === 'video') {
var inhtml = '<div><video src="'+gallery[activei].url+'" autoplay controls></video></div>';
}
$( "#galdialog div.cntnt" ).html(inhtml);
myModal.open();
});
$('.groupsbtn a').on('click', function(e){
e.preventDefault();
$('.groupsbtn div').removeClass('active');
$(this).find('div').addClass('active');
var num = $(this).index('.groupsbtn a');
$('.galgroup').fadeOut().eq(num).delay(600).fadeIn(600);
groupcurrent = num;
});
$('#thegallery .galgroup').on('mouseover', function(e){
clearInterval (setIntId );
});
$('#galdialog').on('mouseover', function(e){
clearInterval (setIntId );
});
$('#thegallery .galgroup').on('mouseout', function(e){
goAhead();
});
$('#galdialog').on('mouseout', function(e){
goAhead();
});
$('#jBox-overlay').on('mouseover', function(e){
clearInterval (setIntId );
});
/**/
function goAhead (){
setIntId = setInterval(function(){
if (groupcurrent < <?=$groupcnt1?> - 1) {
groupcurrent++;
} else {
groupcurrent = 0;
}
$('.groupsbtn a').eq(groupcurrent).click();
}, 5000);
}
</script>
Уважаемые профессионалы, укажите, пожалуйста, где мой косяк? Вроде, должно работать...прошу прощения за кривоватый скрипт, не я изначально его делал, взял только подпилить по настойчивой просьбе знакомых...
Сам слайдер находится в блоке с заголовком "галерея".
Всем заранее спасибо.