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

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

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

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

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

 



Установка

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

Код

<style>
    #ul-lightbox-preview {
        z-index: 99999999999999999999999999;
    }
  #aDialog {
    z-index: 99999999999;
  }
</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>
  @media (min-width: 992px) {
    .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 за помощью в установке кода на тарифах «Премиум» и выше, через раздел «Помощь» (скриншот). 
Всего комментариев: 28
avatar
1
Очень ждал! Но все равно не работает на опубликованном сайте)
avatar
1
2
Как я говорил вам ранее при личной переписки, uKit выпустил обновление, которое изменило алгоритм работы картинок, особенно это коснулось виджета "Карточка", сейчас мы создаем новое решение. Увы, но создание требует времени и иногда на это затрачивается несколько недель, поскольку скрипт нужно тщательно протестировать — проверить всё ли корректно работает на всех шаблонах и после того как мы убедимся в его корректной работе, мы сможем его выпустить. Ожидайте, пожалуйста.
avatar
3
Спасибо, я просто думал этот уже новый вышел.
avatar
3
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
9
С лупой конечно хорошо, да не очень-то!))) Дело в том что при наведении на картинку, картинка затемняется и появляется лупа, даже если поверх картинки открыто всплывающее окно и становится затруднительно заполнять форму всплывающего окна!  cry  А в мобильной версии сайта из-за функции "лупа с затемнением" (назовем это так) при первом нажатии она затемняется, а при втором открывается увеличенная картинка, а поверх нее затемненная с лупой и никак не убрать!  cry  cry  cry
avatar
1
11
Исправили, переустановите скрипт, должно все корректно отображаться.
avatar
12
Красавцы! Спасибо!
avatar
10
А так спасибо за скрипт, четкий!
avatar
13
Что-то в мобильной версии опять барахлит. В режим увеличения заходит, пальцами раздвигаешь, она не увеличивается. И бывает на некоторых картинках накладываются одна на другую в режиме увеличения
avatar
0
14
1. Масштабирование  в этом решение нет.
2. Покажите, пожалуйста, страницу и скриншот, где будет видно, что у вас накладываются изображения
avatar
15
В мобильной версии в карточках товаров изображения накладываются, а в обычных карточках все нормально. 
https://pp.userapi.com/c847218/v847218217/6855d/khlRg8vdZgU.jpg
И еще, в компьютерной версии скрипт не даёт нажать пункт выпадающего меню, а при прокрутке картинки накладываются на меню и на корзину
avatar
16
Поправочка: накладываются изображения именно из карточек товаров магазина, а изображения обычных карточек как и положено располагаются под меню и под корзиной.
avatar
17
Если закреплено меню, то картинки накладываются поверх пунктв меню... что делать??
avatar
0
18
На демо не повторил, указывайте, пожалуйста адреса страниц
avatar
19
https://velosokol.ru/roadbykes
avatar
0
20
Можете починить при помощи следующего решения: 

Код
<style> #body .ul-w-productCard[data-design=design-0] .ul-w-productCard__picture { z-index: 1 !important; } </style>
avatar
21
это отдельным кодом вставить или добавить в основной код скрипта? и если отдельным то в конце body?
avatar
0
22
Не имеет значения, добавляете отдельно. Если можете сократить код, то добавляйте сразу вместе.
avatar
23
помогло, спасибо!
avatar
24
Возвращаясь к проблеме накладывания картинок на пункты меню, если его закрепить. Всё хорошо картинки не накладываются, но накладывается затемняющая часть с лупой при наведении на картинку. То есть наводишь например на раскрывающийся пункт меню, наводишь на нужный пункт и меню закрывается, если под пунктом меню окажется карточка с картинкой. С карточками товаров, прошу заметить, такой проблемы нет.
avatar
0
25
Адрес сайта где такое повторяется и скриншот
avatar
26
trikonitka.ru 
https://pp.userapi.com/c848736/v848736272/5f77/FsFis_62Agk.jpg
avatar
0
27
Можете починить при помощи следующего решения:

Код
<style> #body .ul-widget-gallery .ul-w-gallery-item[data-src] { z-index: 1 !important; } </style>
avatar
28
Спасибо!
avatar