-5

как сделать такой зум при наведении на картинку https://www.templatemonster.com/ru/demo/44264.html

чтобы работал с jquery 1.11 пытаюсь сделать в modx revo minishop2 при выводе галереи, если ставлю этот js <script src="../js/jquery-1.6.js" type="text/javascript"></script> то работает, а если 1.11 то не работает

<script type="text/javascript">

$(document).ready(function() {
    $('.jqzoom').jqzoom({
            zoomType: 'standard',
            lens:true,
            preloadImages: false,
            alwaysOn:true
        });


});

<script src="../js/jquery.jqzoom-core.js" type="text/javascript"></script>

<link rel="stylesheet" href="../css/jquery.jqzoom.css" type="text/css">
</script>

<div id="msGallery">
    {if $files?}
        <div class="fotorama"
             data-nav="thumbs"
             data-thumbheight="45"
             data-allowfullscreen="true"
             data-swipe="true"
             data-autoplay="5000"  oncontextmenu="return false;">

            {foreach $files as $file}
                <a href="{$file['url']}" class="jqzoom" target="_blank">
                    <img src="{$file['small']}" class="large" alt="" title="" oncontextmenu="return false;">
                </a>
            {/foreach}
        </div>
    {else}
        <img  src="{('assets_url' | option) ~ 'components/minishop2/img/web/ms2_medium.png'}"
             srcset="{('assets_url' | option) ~ 'components/minishop2/img/web/[email protected]'} 2x"
             alt="" title=""  oncontextmenu="return false;"/>
    {/if}
</div>
2
  • а где zoom в приведенном примере?
    – Air
    14 сен 2017 в 14:09
  • сделал правку в главном вопросе
    – Aslero
    14 сен 2017 в 14:28

1 ответ 1

1

Jquery Image Zoom Plugin Ниже пример с jquery версией 1.11. Все работает, только вставьте его к себе. Ссылка http://www.elevateweb.co.uk/image-zoom/examples#gallery-lightbox

$("#zoom_01").elevateZoom();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevatezoom.min.js"></script>
<img id="zoom_01" width="100" height="150" src="https://i.pinimg.com/736x/1d/b9/40/1db9405db607f7564f6f4e7516c03362--img-models-women-models.jpg" data-zoom-image="https://i.pinimg.com/736x/1d/b9/40/1db9405db607f7564f6f4e7516c03362--img-models-women-models.jpg"/>

А для динамического добавления:

$("#zoom_03").elevateZoom({
  gallery:'gallery_01', 
  cursor: 'pointer', 
  galleryActiveClass: 'active', 
  imageCrossfade: true
}); 

Почти как у Вас

Ваш ответ

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

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