在 div 中加载新图像时重置缩放位置

Question

我正在创建的页面当前有一个 div，里面有一个图像。该图片 div 下方有一组链接，当点击新链接时，该 div 中的图片会发生变化。

我还对图像 div 有缩放效果，这样当用户点击加号/减号或用鼠标滚动时，他们会放大图像。

我使用的缩放脚本是这个：http://lab.gianiaz.com/jquery/gzoom/

我的问题是：单击新链接并更改图像时，缩放仍然“放大”。当在 div 中加载新图像时，我正在尝试将缩放重置为完全缩小。

有人有什么想法吗？

附：我也在使用最新的 Jquery。

这是我的编码一瞥。

<div id="zoom01" class="zoom minizoompan">
<img class="zoomable" id="SHOWCASEIMG" src="images/image1.jpg">
</div>

<div class="showcase-links">     
<a href="#" onclick="document.getElementById('SHOWCASEIMG').src='images/image1.jpg';return false;">Image 1</a>
<a href="#" onclick="document.getElementById('SHOWCASEIMG').src='images/image2.jpg';return false;">Image 2</a>
<a href="#" onclick="document.getElementById('SHOWCASEIMG').src='images/image3.jpg';return false;">Image 3</a>
</div>

<script type= "text/javascript">
        /*<![CDATA[*/
        $(function() {
            $("#zoom01").gzoom({
                    sW: 700,
                    sH: 525,
                    lW: 1400,
                    lH: 1050,
                    lightbox : false,
            });
        });
        /*]]>*/
    </script>

Answer 1

您似乎已经通过一点帮助解决了 ;-)

这是一个旧插件，但似乎有人使用它。根据您的问题，我已对其进行了更新，现在它包含了 setZoom 方法。

:-)

Answer 2

我不是 Javascript 方面的专家，但我认为您可以尝试执行“重置”类型的交易，并使用 HTML 中的“onLoad”函数来调用 Javascript 函数，将缩放更改回原始值。

Answer 3

我会让它变成这样：

HTML：

<div class="showcase-links">     
     <a class="imageSwap" href="javascript:void(0);" data-link="images/image1.jpg">Image 1</a>
     <a class="imageSwap" href="javascript:void(0);" data-link="images/image1.jpg">Image 1</a>
     <a class="imageSwap" href="javascript:void(0);" data-link="images/image1.jpg">Image 1</a>
</div>

JQuery:

$(".imageSwap".on("click", function() {
     // reset function to set the zoom back to default
     ...

     var imageUrl = $(this).data('link');
     $("#SHOWCASEIMG".attr("src",imageUrl);
});

由于我不知道缩放脚本，您需要自己创建一个重置缩放的函数。

Answer 4

我终于能够联系到我正在使用的缩放脚本的原始创建者，他很友好地更新了脚本以允许重置缩放。但是，我们两个之间很快就解决了一个问题（但大多数是他，说实话，因为我还是一个 Javascript 新手）。我告诉他我会更新这篇文章，以防有人遇到和我一样的问题。

[http://lab.gianiaz.com/jquery/gzoom/][1]

新的 JS 文件可以很好地处理缩放功能，但是需要在页面本身中进行更改。

这是我原来的样子。

<script type= "text/javascript">
    /*<![CDATA[*/
    $(function() {
        $("#zoom01").gzoom({
                sW: 700,
                sH: 525,
                lW: 1400,
                lH: 1050,
                lightbox : false,
        });
    });
    /*]]>*/
</script>

新脚本如下所示：

 <script type= "text/javascript">
      /*<![CDATA[*/
      $(function() {
          $zoom = $("#zoom01").gzoom({
                sW: 700,
                sH: 525,
                lW: 2000,
                lH: 1500, 
                lightbox : false
         });
      });
      /*]]>*/
    </script>

改变的部分是这样的：

$zoom = $("#zoom01").gzoom({

在更改脚本以允许重置缩放后出现的问题是，当调用多个 $zoom 以适应不同尺寸的图像时。这是使用这种 javascript 语言完成的：

 $('#select1, #select2, #select3, #select4, #select5, #select6').click(function() {
                $('#subContainer1').show();                               
                $('#subContainer2').hide();
                $zoom.setZoom(0);
            });

            $('#select7, #select8').click(function() {
                $('#subContainer1').hide();                                   
                $('#subContainer2').show();
                $zoom2.setZoom(0);
            });
        });

为了解决这个问题，我更改了每个被调用的 $zoom 的名称：

 <script type= "text/javascript">
      /*<![CDATA[*/
        $(function() {
            $zoom = $("#zoom01").gzoom({
                sW: 700,
                sH: 525,
                lW: 2000,
                lH: 1500, 
                lightbox : false
            });
            $zoom2 = $("#zoom02").gzoom({
                sW: 700,
                sH: 350,
                lW: 2000,
                lH: 1000, 
                lightbox : false
            });
            $('#select1, #select2, #select3, #select4, #select5, #select6').click(function() {
                $('#subContainer1').show();                               
                $('#subContainer2').hide();
                $zoom.setZoom(0);
            });

            $('#select7, #select8').click(function() {
                $('#subContainer1').hide();                                   
                $('#subContainer2').show();
                $zoom2.setZoom(0);
            });
        });
      /*]]>*/
    </script>

随着脚本更改为上述最终版本，HTML 也进行了更改以适应不同的图像尺寸。

<div id="zoom01" class="zoom minizoompan"><img class="zoomable" id="SHOWCASEIMG" src="images/image1.jpg"></div>

<div id="zoom02" class="zoom minizoompan"><img class="zoomable" id="SHOWCASEIMG2" src="images/image2.jpg"></div>

<a href="#" id="select1" onclick="document.getElementById('SHOWCASEIMG').src='image1.jpg';return false;">Image 1</a> 
<a href="#" id="select7" onclick="document.getElementById('SHOWCASEIMG2').src='image2.jpg';return false;">Image 2</a>

id 值 SHOWCASEIMG 和 SHOWCASEIMG2 根据需要缩放 div 来更改图像：zoom01 或 zoom02。 id 值“select1”和“select7”用于指定缩放框需要的大小。

非常感谢 Giovanni 的宝贵帮助！