Question

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

我对图像div也有缩放效果，因此当用户点击加号/减号时，或者用鼠标滚动时，它们会放大图像。

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

我的问题是：当点击新链接并且图像发生变化时，缩放仍然“放大”。我试图使缩放重置在div中加载新图像时完全缩小。

有人有什么想法吗？

P.S。我也在使用最新的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

我不是Javascript的专家，但我认为你可以尝试做一个'重置'类型的交易，并使用HTML中的“onLoad”函数调用一个Javascript函数，将缩放变回原来的。

Answer 2

我会这样做：

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 3

看来你已经解决了一点帮助; - ）

这是一个旧插件，但似乎有人使用它。有了你的问题，我已经更新了它，现在它包含了setZoom方法。

： - ）

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根据需要的zoom div更改图像：zoom01或zoom02。 id值'select1'和'select7'用于指定缩放框需要的大小。

非常感谢Giovanni的宝贵帮助！

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

4 个答案: