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

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

03 апреля 2020, Пятница
2 246
1
Слайдер картинок в новостях при наведении

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

В 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>
Комментарии:
{login}

Твой комментарий..

  1. Abcd 22 декабря 2021 20:42

    Спасибо. Но работает только на ПК версии, на моб версии чтобы картинки работали , то их нужно зажимать картинку и держать, только тогда они будут меняться.
    Можно ли как нибудь для моб версии исправить, чтобы картинки менялись если новости свайпить и когда дотрагиваешься до картинки чтобы запускался этот процесс весь ?
    Помогите, отблагодарю финансово ))

Модули для создания киносайта и не только на базе DataLife Engine, и многое другое...
Просто блог Евгения Попова, он же - byroot © 2015-2025 | Карта сайта