0

я установил плагин xzoom. Мне нужно чтобы при переходе в мобильную версию сайта, зум не работал. Там есть опция,которая отключает зум, но применив ее, зум отключается и в полной версии. Опция,которая запрещает зум: mposition:fullscreen. Вопрос в том, как можно применять эту опцию только для мобильных устройств?

$('.xzoom, .xzoom-gallery').xzoom({mposition:fullscreen, scroll: false, position: 'lens', lensShape: 'box', bg:true, sourceClass: 'xzoom-hidden'});

Зум применяется для картинок карты товара. html карты я получаю из js файла. В итоге полный код карты:

    function goodsOut(data){
    if(data!=0){
        var pack=JSON.parse(data);
        console.log(pack);
        var out="";

    out+='<div class="col-lg-12 single">';
        out+='<div class="col-lg-5 ">';
            out+='<div class="xzoom-container ">';           
                out+=`<img class="xzoom" id="xzoom-default" width="250" xoriginal="pages/orderPage/goods/${pack.img}" src="pages/orderPage/goods/${pack.img}">`;
                    out+='<div class="xzoom-thumbs">';
                        out+=`<a href="pages/orderPage/goods/${pack.img}">`
                            out+=`<img class="xzoom-gallery" width="75"  src="pages/orderPage/goods/${pack.img}" >`;
                        out+='</a>'
                        out+=`<a href="pages/orderPage/goods/${pack.img}">`
                            out+=`<img class="xzoom-gallery" width="75"  src="pages/orderPage/goods/${pack.img}" >`;
                        out+='</a>'
                        out+=`<a href="pages/orderPage/goods/${pack.img}">`
                            out+=`<img class="xzoom-gallery" width="75"  src="pages/orderPage/goods/${pack.img}" >`;
                        out+='</a>' 
                    out+='</div>';
            out+='</div>';
 out+='</div>';

        $('.goods-out').html(out);
        $('.ad-to-crt').on('click',addToCart);
        $('.later').on('click',addToLater);
        $('.val-plus').on('click', plusGoods);
        $('.val-min').on('click',minusGoods);


       if (window.innerWidth < 768) {
         $('.xzoom, .xzoom-gallery').xzoom({ scroll: false, position: 'lens' /*right*/, lensShape: 'box', bg:true, sourceClass: 'xzoom-hidden'});
        }
    else { 
        $('.xzoom, .xzoom-gallery').xzoom(mposition:fullscreen, scroll: false, position: 'lens', lensShape: 'box', bg:true, sourceClass: 'xzoom-hidden'});
        }
1
  • 1
    да, можно, вам нужно данный код поместить в обработчик размера экрана, допустим когда ширина экрана <= вашему значению - работает данный код 22 окт 2018 в 7:39

1 ответ 1

1

Что то напоминающее вот такое:

function goodsOut(data){
    if(data!=0){
        var pack=JSON.parse(data);
        console.log(pack);
        var out="";

    out+='<div class="col-lg-12 single">';
        out+='<div class="col-lg-5 ">';
            out+='<div class="xzoom-container ">';           
                out+=`<img class="xzoom" id="xzoom-default" width="250" xoriginal="pages/orderPage/goods/${pack.img}" src="pages/orderPage/goods/${pack.img}">`;
                    out+='<div class="xzoom-thumbs">';
                        out+=`<a href="pages/orderPage/goods/${pack.img}">`
                            out+=`<img class="xzoom-gallery" width="75"  src="pages/orderPage/goods/${pack.img}" >`;
                        out+='</a>'
                        out+=`<a href="pages/orderPage/goods/${pack.img}">`
                            out+=`<img class="xzoom-gallery" width="75"  src="pages/orderPage/goods/${pack.img}" >`;
                        out+='</a>'
                        out+=`<a href="pages/orderPage/goods/${pack.img}">`
                            out+=`<img class="xzoom-gallery" width="75"  src="pages/orderPage/goods/${pack.img}" >`;
                        out+='</a>' 
                    out+='</div>';
            out+='</div>';
 out+='</div>';
		}
        $('.goods-out').html(out);
        $('.ad-to-crt').on('click',addToCart);
        $('.later').on('click',addToLater);
        $('.val-plus').on('click', plusGoods);
        $('.val-min').on('click',minusGoods);


       if (window.matchMedia('(max-width: 360px)').matches) {
         $('.xzoom, .xzoom-gallery').xzoom({ scroll: false, position: 'lens' /*right*/, lensShape: 'box', bg:true, sourceClass: 'xzoom-hidden'});
        } else {
        $('.xzoom, .xzoom-gallery').xzoom({mposition:fullscreen, scroll: false, position: 'lens', lensShape: 'box', bg:true, sourceClass: 'xzoom-hidden'});
				}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Я не уверен, но у меня данный код не выдает никаких ошибок... Так же вы пропустили несколько знаков } - возможно потому, что это скорее всего не весь код.

11
  • Пишу сначала с условием, после него обычный, с полной версией и все равно почему то зум ни в одной не срабатывает 22 окт 2018 в 7:54
  • ` после него обычный` - что это значит? 22 окт 2018 в 7:57
  • то есть без опции запрета зума 22 окт 2018 в 7:58
  • дополните ответ своим кодом, исправлю свой ответ, если ошибка будет явной 22 окт 2018 в 7:59
  • Такой порядок: if(window.matchMedia('(max-width: 768px)').matches) { $('.xzoom, .xzoom-gallery').xzoom({mposition:fullscreen, scroll: false, position: 'lens', lensShape: 'box', bg:true, sourceClass: 'xzoom-hidden'}); } $('.xzoom, .xzoom-gallery').xzoom({ scroll: false, position: 'lens' /*right*/, lensShape: 'box', bg:true, sourceClass: 'xzoom-hidden'}); 22 окт 2018 в 8:00

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.