Добрый день!
Хочу прикрутить к странице JQuery плагин ElevateZoom-Plus. вроде выполняю все их инструкции (, Gallery & Lightbox), но не работает, хоть ты тресни...
Мой код:
<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>
/*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;
}
<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>
В JQuery прикрутил и ссылку на сам ElevateZoom-Plus тоже.
В итоге превьюшки появляются, изображение, котрое должно быть больим принимает размер превьюешек (что, в общем, неудивительно - стоит изображение маленького размера). Почему ни требуют загружать маленькое ихображение? Совсем непонятно...
И сам скрипт не работает - можно мышкой дыру в мониторе протереть, ни фига ничего не увеличивается...
Что я делаю не так?