Главная страница / DataLife Engine / Хаки / Слайдер картинок в новостях при наведении

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

03 апрель 2020, Пятница
83
0
Слайдер картинок в новостях при наведении

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

В 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>
Комментарии:
Прокомментировать
Модули для создания киносайта и не только на базе DataLife Engine, и многое другое...
Просто блог Евгения Попова, он же - byroot © 2020