Скрипты для uKit 05.04.2018 8 581
Увеличение картинки для виджетов «Товар» и «Карточка» при нажатии

Увеличение картинки для виджетов «Товар» и «Карточка» при нажатии

В конструкторе uKit, в виджете «товар» нет плавного увеличения картинок, но для многих разработчиков сайтов эта функция необходима. Поэтому мы рады представить наше уникальное решение, реализующее реакцию картинки на щелчок. Наш универсальный скрипт модернизирует виджеты «карточка» и «товар» абсолютно на всех шаблонах uKit.

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

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

Сделать свой сервис максимально комфортным – приоритетная задача разработчика. В этом ему поможет наш скрипт.

 



Установка

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

Код

<style>
    #ul-lightbox-preview {
        z-index: 99999999999999999999999999;
    }
</style>


<script>
    require(['jquery'], function($){
        $(document).ready(function(){
            // идентификация блоков с картинками
            $('.ul-widget-goods, .ul-w-productCard').each(function(i){ 
                $(this).attr('data-id', 'elId_'+i+''); 
                $('*[data-id="elId_'+i+'"] img').each(function(){ 
                    $(this).attr('data-id', 'elId_'+i+''); 
                }); 
                $(this).find('[class="js-goods-popup-link ul-goods-view-link"]').remove();
            });
            
            // погнали по картинкам 
            var block = '';
            $('.ul-widget-goods img, .ul-w-productCard img').each(function(i){
                var th_block = $(this).attr('data-id'); 
                if(block != th_block) i = 0; 
                block = th_block; 
                
                if($(this).parents('.ul-widget-goods').length > 0){
                    console.log('goods');
                    var src_txt = $(this).parents('.ul-widget-goods').find('source:eq(0)').attr('srcset');
                    if(src_txt){
                        if(src_txt.indexOf(',') != -1){
                            src_txt = src_txt.split(',');
                            src_txt = src_txt[0];
                        }
                        
                        if(src_txt.indexOf('?') != -1){
                            src_txt = src_txt.split('?');
                            src_txt = src_txt[0];
                        }
                    }
                }else if($(this).parents('.ul-w-productCard').length > 0){
                    var src_txt = $(this).parents('.ul-w-productCard__picture').find('source:eq(0)').attr('srcset');
                    if(src_txt){
                        if(src_txt.indexOf(',') != -1){
                            src_txt = src_txt.split(',');
                            src_txt = src_txt[0];
                        }
                        
                        if(src_txt.indexOf('?') != -1){
                            src_txt = src_txt.split('?');
                            src_txt = src_txt[0];
                        }
                    }
                } else {
                    var src_txt = $(this).attr('src'), styl = '';
                }
                
                $(this).parent().children('a').remove(); 
                $(this).before('<div data-i="'+i+'" data-src="'+src_txt+'"><div id="id_'+i+'" class="ul-w-gallery-item myyy" style="z-index:99999999;position:relative;" data-i="'+i+'" data-src="'+src_txt+'"></div></div>'); 
                $(this).appendTo('#id_'+i+''); 
                $('#id_'+i+'').removeAttr('id'); 
                $(this).removeClass('js-w-productCard__picture__image'); 
            });
            
            // скрыть стрелочки 
            $('body').on('click', '.myyy', function(){ 
                $('body').append('<style id="nostrelki">.ul-next, .ul-prev{display:none!important;}</style>'); 
            }); 
            $('body').on('click', '#ul-w-lightbox-overlay-close', function(){ 
                $('#nostrelki').remove(); 
            });
            
            // Запуск библ. 
            if($('.ul-widget-gallery').length == 0){
                $('.ul-widget-goods, .ul-w-productCard').addClass('ul-widget-gallery');
                require(["widget-gallery-view"],function(gal){gal.init()});
            }else{
                $('.ul-widget-goods, .ul-w-productCard').addClass('ul-widget-gallery');
            }
            
            // Фикс отображения изображений
            setTimeout(function(){
                $('.myyy').each(function(){
                    var th_img = $(this).children('img');
                    if(th_img.width() == 0) $(this).attr('style', 'position:absolute;top:0;left:0;bottom:0;right:0;');
                });
            }, 1000);
        });
    });
</script>

<style>

.ul-w-gallery-item.myyy:hover:before {

     opacity: .55;

}

.ul-w-gallery-item.myyy: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;

}

.ul-w-gallery-item.myyy:before {

     background: #242324;

}

   .ul-w-gallery-item.myyy: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;

}

.ul-w-gallery-item.myyy:after {

     color: #fff;

}

   .ul-w-gallery-item.myyy:hover:before {

     opacity: .55;

}

   .ul-w-gallery-item.myyy:hover:after {

     opacity: 1;

}

       .ul-w-gallery-item.myyy {

           margin: 0px !important;

       }

</style>


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


Установить сторонний код на ваш сайт, вы можете на тарифе «Про». Ознакомиться с тарифом вы можете на следующей странице: blog-ru.ukit.com/updates/tariffs. Также отмечу, что вы можете обратиться в службу поддержки uKit за помощью в установке кода на тарифах «Премиум» и выше, через раздел «Помощь» (скриншот). 
Всего комментариев: 8
avatar
1
Очень ждал! Но все равно не работает на опубликованном сайте)
avatar
1
2
Как я говорил вам ранее при личной переписки, uKit выпустил обновление, которое изменило алгоритм работы картинок, особенно это коснулось виджета "Карточка", сейчас мы создаем новое решение. Увы, но создание требует времени и иногда на это затрачивается несколько недель, поскольку скрипт нужно тщательно протестировать — проверить всё ли корректно работает на всех шаблонах и после того как мы убедимся в его корректной работе, мы сможем его выпустить. Ожидайте, пожалуйста.
avatar
3
Спасибо, я просто думал этот уже новый вышел.
avatar
2
4
Скрипт обновлен
avatar
5
проверил, картинка увеличивается, скрипт работает. НО! если например раньше при нажатии на картинку или карточку в целом открывалось всплывающее окно с заказом или заявкой (или другое, смотря какую ссылку установить) то теперь при нажатии на фото открывается фото. Для всплывающего окна только нажатие на кнопку. это для тех, кто будет пробовать аметка...
avatar
0
6
Да все верно Вы заметили, чтобы фото увеличить в карточки товара нужно на него нажать, данный скрипт для этого и предназначен, еще желательно отключить пункт в тонких настройках карточки «Вся карточка» http://skrinshoter.ru/s/060418/uXqZgzCv
avatar
7
Да было бы хорошо еще сделать, чтобы при наведении на Карточку появлялась лупа. А то посетитель может подумать, что сейчас перейдет на страницу товара, а ему увеличивают картинку.
avatar
0
8
Да согласен, мы пропустили это, скрипт обновим, добавьте для данного скрипта эти слили, появится значок «Крестик» при наведении на изображение.
Код
<style>
.ul-w-gallery-item.myyy:hover:before {
     opacity: .55;
}

.ul-w-gallery-item.myyy: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;
}
.ul-w-gallery-item.myyy:before {
     background: #242324;
}
   .ul-w-gallery-item.myyy: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;
}
.ul-w-gallery-item.myyy:after {
     color: #fff;
}
   .ul-w-gallery-item.myyy:hover:before {
     opacity: .55;
}
   .ul-w-gallery-item.myyy:hover:after {
     opacity: 1;
}
       .ul-w-gallery-item.myyy {
           margin: 0px !important;
       }
</style>
avatar