Новый просмотрщик Swiper

Подскажите новичку - а куда вставлять этот скрипт?

А в шаблонах smarty и архитектуре cs-cart что-то понимаете?
Если да, то в файл scripts.post.tpl в своем модуле. Если нет - обратитесь к специалистам за деньги.

Включите модуль “Мои изменения”, затем в “Дизайн - Шаблоны” создайте файл в пути:

responsive/templates/addons/my_changes/hooks/index/scripts.post.tpl

Отсутствующие папки тоже нужно создать.

В файл scripts.post.tpl вставьте код:

<script>
$(document).bind('ready ajaxComplete', function(){
    $('body').on('click','.ui-widget-overlay', function() {
        $('.ui-dialog').filter(function () {
            return $(this).css("display") === "block";
        }).find('.ui-dialog-content').dialog('close');
    });
});
</script>

Сохраните и почистите кэш.

4 лайка

Вот мой вариант специально для swiper методом css увеличена область закрытия просмотра и сам крестик, может кому пригодится
(необходимо вставить код в пользовательские css в редакторе стилей)
.ui-dialog-titlebar.ui-corner-all.ui-widget-header.ui-helper-clearfix:hover {
background-color: #00000042;
}
.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon {
top: 18px;
}
.ui-dialog-titlebar.ui-corner-all.ui-widget-header.ui-helper-clearfix {
height: 100px;
z-index: 10 !important;
}
.ty-swiper-previewer__dialog .ui-dialog-titlebar.ui-widget-header .ui-icon-closethick {
color: #fff;
font-size: 60px;
width: 60px;
height: 60px;
}
.ui-button.ui-corner-all.ui-widget.ui-button-icon-only.ui-dialog-titlebar-close {
width: 100%;
height: 60px;
}
.ui-button-icon-only .ui-icon {
left: 96%;
}
.ty-swiper-previewer.ui-dialog-content.ui-widget-content {
bottom: 90px;
}
@media (min-width: 768px) {
.ui-button-icon-only .ui-icon {
left: 90vw;
}
}

заодно вопрос как вставить код в режиме кода чтобы блок выделялся в сообщении?

1 лайк

http://joxi.ru/1A5MWbnu4o9LqA

получается код на белом фоне, а как сделать как в сообщении выше на сероватом фоне? %D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202022-09-02%20165409

так и получается

@media (min-width: 768px) {
.ui-button-icon-only .ui-icon {
left: 90vw;
}
}

выделяем и жмем эту кнопу

подскажите, пожалуйста! а как вообще отключить zoom везде, как на десктопе так и в мобильном?
на мобильном приближать нет смысла, а на десктопе увеличение актуально только для non-retina дисплеев, не вижу смысла в этом
на офф сайте указана возможность управления при инициализации

const swiper = new Swiper('.swiper', {
  zoom: {
    maxRatio: 5,
  },
});

но где это настраивать не нахожу!

Если бы @alex_vp -у платили за каждый совет то он бы стал миллиардером, мы для этого тут и сидим чтобы помогать друг другу, БЕСПЛАТНО! и потом, если бы человек хотел решить это платно не стал бы писать сюда!