Делаем эффект лупы для изображений в Zero Block

Модификация может сделать эффект лупы, и настроить размеры, толщину и цвет обводки, позиционирование и цвет тени

Время настройки: 2 минуты

Генератор кода

Видео инструкция

Инструкция

1. Добавляем своё изображение в Зеро Блок и указываем класс к нему такой же как и в генераторе;

Что бы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку "Add CSS Class Name", далее, справа в настройках указываешь тот же класс что и в генераторе;

2. Настраиваем размер лупы, радиус скругления, толщину и цвет обводки, цвет фона лупа вне фото;

3. Настраиваем тень: позиционирование по X и Y, blur, strech и цвет;

4. Добавляем блок Т123 и вставляем в него сгенерированный HTML код;

ВАЖНО: Модификация не работает с элементом Shape!

Сгенерировать пример

Копировать код <!-- Эффект лупы для изображений в Zero Block -->
<!-- https://nolim.cc/loupe-image-zero -->
<script> (function(a){a.fn.loupe=function(b){var c=a.extend({loupe:"loupe",width:50,height:50},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:absolute; width:100%; top:0; } .loupe { background-color: 523253; background: 523253; border: 2px solid 132; z-index: 9999999; border-radius: 15px; box-shadow: 24124px 12412px 12312px 124px 123; cursor:none; } </style> <script type="text/javascript"> $(document).ready(function(){ setTimeout(function(){ if ($(window).width() >= 960) { $('.class img').addClass('imgloupe'); for(let i = 0; i < $('.imgloupe').length; i++){  if( "y" === window.lazy ){ var imagelink = $('.imgloupe:eq(' + i + ')').attr('data-original'); } else { var imagelink = $('.imgloupe:eq(' + i + ')').attr('src'); } $('<img src=" '+imagelink+' " class="demo t-img">').insertAfter('.imgloupe:eq('+i+')'); }; $('.demo').loupe(); } }, 500); }); </script>