Скрипты для uKit 22.10.2017 4 487
Плавное увеличение картинки для виджета "Галерея" (Слайд-шоу)

Плавное увеличение картинки для виджета "Галерея" (Слайд-шоу)

Плавное увеличение фотографии не только поможет клиенту лучше рассмотреть товар, но и сделает ваш сайт более интересным для посетителей.

Скрипт увеличения картинки в слайдере поможет добавить интересную анимацию на ваш сайт и при этом не увеличивать время загрузки страниц. 
 

Многие владельцы сайтов уже воспользовались этой услугой, но в попытке увеличить эффективность вашей работы мы модернизировали и усовершенствовали стандартные анимации. Теперь вы сможете действительно выделиться среди основной массы конкурентов.
 

Принцип работы скрипта прост, но невероятно эффективен. Анимация всегда привлекает внимание посетителей. Бессознательно им захочется кликнуть на изменяющуюся картинку и просмотреть ваш товар. И чем больше раз будет просмотрено фото товара, тем больше шансов, что его купят. Статистически доказано, что посетители интернет-магазинов при принятии решения о покупке товара гораздо чаще ориентируются на фото, чем на текст описания.

 

 



Установка

Перейдите в панель управления вашего сайта в раздел «Свой код». В редактор вставьте следующий код:
 

Код
<script>
    require(['jquery'], function($){
        var ys = {};
        
        // Идем по слайдерам
        $('div[id="ul-type-slider"]').each(function(){
            // Создаем место слайдера
            ys.th_id = $(this).parents('.ul-widget').attr('id');
            $('body').append('<div data-ys="'+ys.th_id+'" class="ys_open" style="display:none;"></div>');
            
            // image добавляем в созданное место
            ys.clone = $(this).find('[itemprop="contentUrl"]').clone();
            ys.clone.appendTo('[data-ys="'+ys.th_id+'"]');
            
            $(this).css('cursor', 'pointer');
        });
        
        // Идем по созданным местам
        $('.ys_open').each(function(i){
            $(this).children().each(function(d){
                ys.th_src = $(this).attr('href');
                $(this)
                    .after('<div data-i="'+d+'" data-src="'+ys.th_src+'"><img class="ul-w-gallery-item" data-i="'+d+'" data-src="'+ys.th_src+'" src="'+ys.th_src+'"></div>')
                    .remove();
            });
        });
        
        // Запуск библ.
        $('.ys_open').addClass('ul-widget-gallery');
        if($('.ul-widget-gallery').length == 0) require(["widget-gallery-view"],function(gal){gal.init()});
        
        // Открытие
        $('body').on('click', '#ul-type-slider .ul-image', function(){
            ys.th_src = $(this).parent().find('[itemprop="contentUrl"]').attr('href');
            ys.th_id = $(this).parents('.ul-widget').attr('id');
            $('[data-ys="'+ys.th_id+'"] img[src="'+ys.th_src+'"]:eq(0)').trigger('click');
        });
    });
</script>
<style>
#body .ul-widget-gallery.ul-widget-gallery-slideshow .ul-image:before {
    background: #242324;
}
#body .ul-widget-gallery.ul-widget-gallery-slideshow .ul-image:hover:before {
    opacity: .55;
}
#body .ul-widget-gallery.ul-widget-gallery-slideshow .ul-image:before {
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
#body .ul-widget-gallery.ul-widget-gallery-slideshow .ul-image:after {
    color: #fff;
}
#body .ul-widget-gallery.ul-widget-gallery-slideshow .ul-image:hover:after {
    opacity: 1;
}
#body .ul-widget-gallery.ul-widget-gallery-slideshow .ul-image:after {
    font: normal normal normal 14px/1 FontAwesome;
    background: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,rgba(0, 0, 0, 0) 100%);
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f00e";
    font-size: 22px;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    line-height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    opacity: 0;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
</style>

 

Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В конец <body>». (скриншот).
Сохраните код и опубликуйте ваш сайт.


Установить сторонний код на ваш сайт, вы можете на тарифе «Про». Ознакомиться с тарифом вы можете на следующей странице: blog-ru.ukit.com/updates/tariffs. Также отмечу, что вы можете обратиться в службу поддержки uKit за помощью в установке кода на тарифах «Премиум» и выше, через раздел «Помощь» (скриншот). 
Всего комментариев: 4
avatar
1
Подскажите, установили скрипт а он не работает и демо тоже.
avatar
0
2
У вас на демо тоже не работает?
Покажите, пожалуйста, сайт где установлен скрипт, а именно страницу с галерей в режиме слайд-шоу.
avatar
3
Не работает!
avatar
0
4
На какой странице сайта у вас не работает код? Мы не экстрасенсы.
avatar