Question

我会缩放并在灯箱中显示图像。

示例在此链接中：

http://www.elevateweb.co.uk/image-zoom/examples

该网站转到名为gallery＆amp;的分区。收藏夹。

我已经尝试过代码，但它没有用。

代码：

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

<div id="gal1">

  <a href="#" data-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png" data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png">
    <img id="img_01" src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png" />
  </a>

</div>

<script type="text/javascript">

    //initiate the plugin and pass the id of the div containing gallery images
$("#zoom_03").elevateZoom({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('elevateZoom'); 
    $.fancybox(ez.getGalleryList());
  return false;
});

</script>

<style type="text/css">

    /*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>

</body>
</html>

请帮助。

不是：我的英语不好。对不起。我希望你明白。

Answer 1

ElevateZoom示例看起来有缺陷。显示的代码似乎有错误，例如HTML中的重复ID和JavaScript中引用的不存在的ID，并且似乎与演示中正在执行的代码不匹配。不知道那里发生了什么。

主要是，HTML代码中不存在用于启动ElevateZoom的ID。在下面的示例中，我将“gallery”元素存储在变量中供以后使用，这样我只需要指定一次ID。

我无法使用ElevateZoom代码来使用最新版本的FancyBox。 ElevateZoom提供的对象似乎没有为FancyBox正确格式化，所以我重写了那部分。

jQuery(function($) {

  // define the gallery object
  var $gallery = $('#gallery_01');

  // Build array of objects to open in Fancybox.
  var $imgs = [];
  $('a', $gallery).each(function() {
    $imgs.push({'src': $(this).data('zoom-image')});
  });

  // Initiate ElevateZoom
  $("#zoom").elevateZoom({
    gallery: $gallery.attr('id'),
    cursor: 'pointer',
    galleryActiveClass: 'active',
    imageCrossfade: true,
    loadingIcon: '//www.elevateweb.co.uk/spinner.gif'
  });

  // Bind Fancybox to clicking the zoom image.
  // Open it to the currently active index.
  $("#zoom").on("click", function(e) {
    e.preventDefault();
    var active_index = $('a.active', $gallery).index();
    $.fancybox.open($imgs, false, active_index);
  });

});

#gallery_01 img {
  border: 2px solid white;
  width: 96px;
}

#gallery_01 .active img {
  border: 2px solid #333;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevatezoom.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.css" rel="stylesheet" />

<img id="zoom" src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png" data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image1.jpg" width="411">

<div id="gallery_01">

  <a href="#" class="elevatezoom-gallery active" data-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png" data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image1.jpg">
    <img src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png" width="100"></a>

  <a href="#" class="elevatezoom-gallery" data-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image2.png" data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image2.jpg">
    <img src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image2.png" width="100"></a>

  <a href="#" class="elevatezoom-gallery" data-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png" data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image3.jpg">
    <img src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png" width="100"></a>

  <a href="#" class="elevatezoom-gallery" data-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image4.png" data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image4.jpg">
    <img src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image4.png" width="100"></a>

</div>

Answer 2

这是完整的工作代码。试着从中学习！：）

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title></title>


<link rel="stylesheet" href="http://www.elevateweb.co.uk/wp-content/themes/radial/jquery.fancybox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="http://www.elevateweb.co.uk/wp-content/themes/radial/jquery.elevatezoom.min.js" type="text/javascript"></script>
<script src="http://www.elevateweb.co.uk/wp-content/themes/radial/jquery.fancybox.pack.js" type="text/javascript"></script>

</head>
<body>


<div class="zoom-wrapper">
    <div class="zoom-left">

<div style="height:274px;width:411px;" class="zoomWrapper"><img style="border: 1px solid rgb(232, 232, 230); position: absolute;" id="zoom_03" src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png" data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image3.jpg" width="411">
</div>

        <div id="gallery_01" style="width:500px">

        <a href="#" class="elevatezoom-gallery active" data-update="" data-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png" data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image1.jpg">
        <img src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png" width="100"></a>

        <a href="#" class="elevatezoom-gallery" data-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image2.png" data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image2.jpg"><img src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image2.png" width="100"></a>

        <a href="tester" class="elevatezoom-gallery" data-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png" data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image3.jpg">
             <img src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png" width="100">
        </a>

        <a href="tester" class="elevatezoom-gallery" data-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image4.png" data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image4.jpg"><img src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image4.png" width="100"></a>

        </div>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function () {
$("#zoom_03").elevateZoom({gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: "active",
    imageCrossfade: true,loadingIcon: "loading.gif"}); 

$("#zoom_03").bind("click", function(e) {  
    var ez =   $('#zoom_03').data('elevateZoom');
    ez.closeAll(); //NEW: This function force hides the lens, tint and window   
        $.fancybox(ez.getGalleryList());
        return false;
    }); 
}); 
</script>


<script type="text/javascript">
$('#zoom_01').elevateZoom({
    zoomType: "inner",
    cursor: "crosshair",
    zoomWindowFadeIn: 500,
    zoomWindowFadeOut: 750
}); 
</script>

</body>
</html>

HTML缩放＆amp;灯箱

2 个答案: