Как добавить эффект лупы для фото в Tilda
Цветочный салон
Выберите один из готовых букетов или закажите уникальный, который будет соответствовать всем вашим пожеланиям
Купить букет
Бургундская роза и гвоздика
2399
р.
Купить
В букете использованы белые и пурпурные розы, красный гиперикум и ветви эвкалипта Baby Blue. По желанию вы можете добавить стандартную или подарочную упаковку к заказу.
Кремовая роза и ромашка
1999
р.
Купить
Этот небольшой букет состоит из кремовых роз, полевых ромашек, эвкалипта Baby Blue и белой вероники. По желанию вы можете добавить стандартную или подарочную упаковку к заказу.
Розовая роза и гвоздика
2499
р.
Купить
Этот букет состоит из нежных розовых роз, вероники, гвоздики, альстромерии и амми. По желанию вы можете добавить стандартную или подарочную упаковку к заказу.

Как добавить эффект лупы для фото в Tilda

1
Добавили на страницу блок ST200
2
Добавили в него фото одного размера 800х800px
3
Добавили скрипты на страницу
Скрипт вставляется в блок ДРУГОЕ►Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Получить полное видео
Посмотреть все видео
Добавляем эффект приближения лупы при наведении на фотографии в разных блоках.
Длительность видео: 17 мин
Фрагмент видео
Посмотреть видео в личном кабинете ►
Библиотека для примера

<script>
(function(a){a.fn.loupe=function(b){var c=a.extend({loupe:"loupe",width:200,height:200},b||{});return this.length?this.each(function(){var j=a(this),g,k,f=j.is("img")?j:j.find("img:first"),e,h=function(){k.hide()},i;if(j.data("loupe")!=null){return j.data("loupe",b)}e=function(p){var o=f.offset(),q=f.outerWidth(),m=f.outerHeight(),l=c.width/2,n=c.height/2;if(!j.data("loupe")||p.pageX>q+o.left+10||p.pageX<o.left-10||p.pageY>m+o.top+10||p.pageY<o.top-10){return h()}i=i?clearTimeout(i):0;k.show().css({left:p.pageX-l,top:p.pageY-n});g.css({left:-(((p.pageX-o.left)/q)*g.width()-l)|0,top:-(((p.pageY-o.top)/m)*g.height()-n)|0})};k=a("<div />").addClass(c.loupe).css({width:c.width,height:c.height,position:"absolute",overflow:"hidden"}).append(g=a("<img />").attr("src",j.attr(j.is("img")?"src":"href")).css("position","absolute")).mousemove(e).hide().appendTo("body");j.data("loupe",true).mouseenter(e).mouseout(function(){i=setTimeout(h,10)})}):this}}(jQuery));
</script>


<style>
.demo { 
    float:left;
    position:relative;
    width:100%;
} 
.loupe { 
/*Визуальные настройки лупы*/    
    background-color: #444;
    background: rgba(255, 255, 255, 0.25);
    border: 5px solid rgb(255, 255, 255);
    z-index: 9999999;
    border-radius: 100px;
    box-shadow: 0 0 12px #ffffff;
    cursor:none;
}

.t-slds__imgwrapper .t-slds__bgimg {
    padding-bottom: 0 !important;
}
</style>


<script type="text/javascript">
//Добавляем класс к изображениям в нашем блоке
$('.t-slds__imgwrapper .t-slds__bgimg').addClass('imgloupe');
for(let i = 0; i < $('.imgloupe').length; i++){
//Добавляем фото с классом demo для лупы
var imagelink = $('.imgloupe:eq('+i+')').attr('data-original');
$('.imgloupe:eq('+i+')').append('<img src=" '+imagelink+'  " class="demo t-img">');
};
//Активируем лупу
$('.demo').loupe();
</script>
Made on
Tilda