Слайдер картинок в новостях при наведении

Смена изображений при наведении на них мышкой. Идеально подойдёт для тубов, но можно так же и к киносайтам это применить, например для смены кадров при их наведении или же если у вас много постеров к материалу - для смены разных постеров... В shortstory.tpl или любом другом шаблоне, где нужно сделать смену изображений, прописываем код:
<img class="js-hover" alt="" src="{image-1}" data-images="{image-2},{image-3}">
Далее, вниз, перед закрывающимся тегом
</body>
вставляем:<script>
//onhover image
$('.js-hover').hover(function() {
var _this = this,
images = _this.getAttribute('data-images').split(','),
counter = 0;
this.setAttribute('data-src', this.src);
_this.timer = setInterval(function() {
if(counter > images.length) {
counter = 0;
}
if (images[counter] != undefined) {
_this.src=images[counter];
} else {
_this.src=_this.getAttribute('data-src');
}
counter++;
}, 750);
}, function() {
this.src = this.getAttribute('data-src');
clearInterval(this.timer);
});
</script>
Похожие статьи:
Комментарии: