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

Смена изображений при наведении на них мышкой. Идеально подойдёт для тубов, но можно так же и к киносайтам это применить, например для смены кадров при их наведении или же если у вас много постеров к материалу - для смены разных постеров...

В 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>

Перейти на сайт (скачивать файлы можно только на сайте)