Как подключить плагин easyzoom?

Question

Хочу прикрутить к странице JQuery плагин ElevateZoom-Plus. вроде выполняю все их инструкции (https://igorlino.github.io/ele... amples.htm, Gallery & Lightbox), но не работает, хоть ты тресни...

Мой код:

<script>
            //initiate the plugin and pass the id of the div containing gallery images
        $('#zoom_03').ezPlus({
            gallery: 'gallery_01', cursor: 'pointer', galleryActiveClass: 'active',
            imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'
        });
        
        //pass the images to Fancybox
        $('#zoom_03').bind('click', function (e) {
            var ez = $('#zoom_03').data('ezPlus');
            $.fancyboxPlus(ez.getGalleryList());
            return false;
        });
          </script>

/*set a border on the images to prevent shifting*/
#gallery_01 img {
    border: 2px solid white;
}

/*Change the colour*/
.active img {
    border: 2px solid #333 !important;
}

<img id="img_01" src="../../img/bijoux/broche/small/broche_001_01_small.jpg" data-zoom-image="../../img/bijoux/broche/broche_001_01.jpg"/>

    <div id="gallery_01">
    
        <a href="#" data-image="../../img/bijoux/broche/small/broche_001_01_small.jpg" data-zoom-image="../../img/bijoux/broche/broche_001_01.jpg">
            <img id="img_01" src="../../img/bijoux/broche/small/broche_001_01_small.jpg"/>
        </a>
    
        <a href="#" data-image="../../img/bijoux/broche/small/broche_002_01_small.jpg" data-zoom-image="../../img/bijoux/broche/small/broche_002_01.jpg">
            <img id="img_01" src="../../img/bijoux/broche/small/broche_002_01_small.jpg"/>
        </a>
    
        <a href="#" data-image="../../img/bijoux/broche/small/broche_003_01_small.jpg" data-zoom-image="../../img/bijoux/broche/small/broche_003_01.jpg">
            <img id="img_01" src="../../img/bijoux/broche/small/broche_0013_01_small.jpg"/>
        </a>
    
        <a href="#" data-image="../../img/bijoux/broche/small/broche_004_01_small.jpg" data-zoom-image="../../img/bijoux/broche/small/broche_004_01_small.jpg">
            <img id="img_01" src="../../img/bijoux/broche/small/broche_004_01_small.jpg"/>
        </a>
    
    </div>

В JQuery прикрутил и ссылку на сам ElevateZoom-Plus тоже.

В итоге превьюшки появляются, изображение, котрое должно быть больим принимает размер превьюешек (что, в общем, неудивительно - стоит изображение маленького размера). Почему ни требуют загружать маленькое ихображение? Совсем непонятно...

И сам скрипт не работает - можно мышкой дыру в мониторе протереть, ни фига ничего не увеличивается...

Что я делаю не так?

Answer 1

Спасибо, проблема решена! ))))

БЛОГ НА HUSL

Как подключить плагин easyzoom?

Ответы (1 шт):