Плавное увеличение картинки для виджета "Галерея" (Слайд-шоу)
Плавное увеличение фотографии не только поможет клиенту лучше рассмотреть товар, но и сделает ваш сайт более интересным для посетителей.
Скрипт увеличения картинки в слайдере поможет добавить интересную анимацию на ваш сайт и при этом не увеличивать время загрузки страниц.
Многие владельцы сайтов уже воспользовались этой услугой, но в попытке увеличить эффективность вашей работы мы модернизировали и усовершенствовали стандартные анимации. Теперь вы сможете действительно выделиться среди основной массы конкурентов.
Принцип работы скрипта прост, но невероятно эффективен. Анимация всегда привлекает внимание посетителей. Бессознательно им захочется кликнуть на изменяющуюся картинку и просмотреть ваш товар. И чем больше раз будет просмотрено фото товара, тем больше шансов, что его купят. Статистически доказано, что посетители интернет-магазинов при принятии решения о покупке товара гораздо чаще ориентируются на фото, чем на текст описания.
Установка
Перейдите в панель управления вашего сайта в раздел «Свой код». В редактор вставьте следующий код:
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>». (скриншот).
Сохраните код и опубликуйте ваш сайт.
0
