Форум

romang · #1 (**permalink**) 13.02.2017, 00:18

Всем доброго времени суток. Возможно хто-то сталкивался с этим скриптом Elevate zoom - http://www.elevateweb.co.uk/image-zoom/examples, не могу заставить работать переключатель картинок, загружаются пустые картинки. Там в основе fancyBox. Прикладаю к сообщению архив, посмотрите если не трудно.

Спасибо

рони · #2 (**permalink**) 13.02.2017, 00:55

romang, ищите разницу, рабочий код ниже

<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'/>
	<title>jQuery elevateZoom Demo</title>
	<script src='jquery-1.8.3.min.js'></script>
	<script src='jquery.elevatezoom.js'></script>
	<link href="fancy-box.css" rel="stylesheet">
	<script src="fancy-box.js"></script>



<style media="screen">
	/*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;}
</style>
</head>
<body>
<h1>Basic Zoom Example</h1>
<img id="img_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>

<div id="gal1">
   <a href="#" data-image="images/small/image1.png" data-zoom-image="images/large/image1.jpg">
    <img class="img_01" src="images/thumb/image1.jpg" />
  </a>
  <a href="#" data-image="images/small/image2.png" data-zoom-image="images/large/image2.jpg">
    <img class="img_01" src="images/thumb/image2.jpg" />
  </a>
  <a href="#" data-image="images/small/image3.png" data-zoom-image="images/large/image3.jpg">
    <img class="img_01" src="images/thumb/image3.jpg" />
  </a>
  <a href="#" data-image="images/small/image4.png" data-zoom-image="images/large/image4.jpg">
    <img id="img_01" src="images/thumb/image4.jpg" />
  </a>
</div>


<script>
//initiate the plugin and pass the id of the div containing gallery images
$("#img_01").elevateZoom({gallery:'gal1', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});

//pass the images to Fancybox
$("#img_01").bind("click", function(e) {
  var ez =   $('#img_01').data('elevateZoom');
	$.fancybox(ez.getGalleryList());
  return false;
});
</script>
</body>
</html>

рони · #3 (**permalink**) 13.02.2017, 01:08

romang,
тоже самое но с актуальными версиями

<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'/>
	<title>jQuery elevateZoom Demo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevatezoom.min.js'></script>
  <link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
  <script type='text/javascript' src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
  <script type='text/javascript' src="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<style media="screen">
	/*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;}
</style>
 <script>
$(function() {
    var options = {
        gallery: "gal1",
        cursor: "pointer",
        galleryActiveClass: "active",
        imageCrossfade: true,
        loadingIcon: "http://www.elevateweb.co.uk/spinner.gif"
    };
    var ez = $("#img_01").elevateZoom(options).on("click", function(e) {
        $.fancybox(ez.getGalleryList());
        return false
    }).data("elevateZoom")
});
  </script>

</head>
<body>
<h1>Basic Zoom Example</h1>
<img id="img_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>

<div id="gal1">
   <a href="#" data-image="images/small/image1.png" data-zoom-image="images/large/image1.jpg">
    <img class="img_01" src="images/thumb/image1.jpg" />
  </a>
  <a href="#" data-image="images/small/image2.png" data-zoom-image="images/large/image2.jpg">
    <img class="img_01" src="images/thumb/image2.jpg" />
  </a>
  <a href="#" data-image="images/small/image3.png" data-zoom-image="images/large/image3.jpg">
    <img class="img_01" src="images/thumb/image3.jpg" />
  </a>
  <a href="#" data-image="images/small/image4.png" data-zoom-image="images/large/image4.jpg">
    <img id="img_01" src="images/thumb/image4.jpg" />
  </a>
</div>


<script>


</script>
</body>
</html>

romang · #4 (**permalink**) 13.02.2017, 07:37

Спасибо за подсказку и заобновленную версию скрипта, свою ошибку нашел.

Форум

Справочник

Discord чат

Курсы javascript