jqzoom在多个图像上 [英] jqzoom on multiple images

问题描述

我具有一个主图像和多个缩略图的标准设置，可以用来更改主图像.我在主图像上使用了jqzoom，但是遇到了一个主要问题，即主图像发生了变化，而缩放后的图像只是空白.查看堆栈溢出时，我发现一些代码声称可以纠正此错误，并且可以做到这一点.但是，与其让每个更改后的图像进行缩放，不如使主图像只是指向大版本的链接，而绕过了jqzoom函数调用.

I have the standard setup of one main image and multiple thumbnails which can be cliced to change the main image. I'm using jqzoom on the main image but was having the common problem of the main image changing and the zoomed image just going blank. Looking through stack overflow i found some code that claimed to correct this, and in a way it does. But rather than allow each changed image to have a zoom, it makes the main image just a link to the large version, bypassing the jqzoom function call.

显示两个示例: 标准的jqzoom代码和缩略图未显示缩放: http://designerspider.net/clients/jge/project2.php?id=17

to show the two examples: with the standard jqzoom code and thumbnails not showing zooms: http://designerspider.net/clients/jge/project2.php?id=17

添加的代码和图像仅成为链接: http://designerspider.net/clients/jge/project.php?id=17

with added code and images just becoming links: http://designerspider.net/clients/jge/project.php?id=17

我添加的代码是

  $(".thumbs a").click(function(){  

      $(".jqclass").unbind();

      $(".jqclass").jqzoom(options);

      return false;
  };

如果有人可以看到我是否错过了任何东西，或者需要以不同的方式来做，那么我将不胜感激.我不明白为什么添加额外的功能会禁用主要的jqzoom功能:/

if anyone can see if i have missed anything, or need to do it a diffferent way, i'd appreciate any and all advice. I can't understand why adding the extra function would disable the main jqzoom feature :/

推荐答案

您可能会发现，因为同时使用了两个功能，一个功能是更改图像，另一个功能是取消绑定缩放功能，然后重新绑定它，图像更改之前，第二个功能正在完成.因此，当图像确实发生更改时，它仍然将不起作用.

You may find, because you are using two functions side by side, one to change images, and the other to unbind the zoom function, and then rebind it, the 2nd function is finishing before the image has changed. So when the image does change, it still won't work.

第二个问题，您实际上并没有解除绑定约束.

Second problem, you are not actually unbinding anything.

因此，请先尝试更改为:

So, try firstly changing to:

$(".jqclass").unbind(".jqclass");

或者，您可以将更多的内容迁移到jQuery.我已经测试过了:

Alternatively you could migrate a little more to jQuery. I have tested this:

您的HTML看起来像这样:

You HTML would look like this:

<div class="projectphotos">
    <div id="photo_1">
        <a href="http://designerspider.net/clients/jge/projects/h07_03_11_12_10_58.jpg" class="jqclass">
            <img src="http://designerspider.net/clients/jge/projects/h07_03_11_12_10_58.jpg" class="projectimg2" alt="Mid 15th C Oakeshott Type XXa" />
        </a>
    </div>
    <div id="photo_2" style="display:none;">
        <a href="http://designerspider.net/clients/jge/projects/h07_03_11_12_19_49.jpg">
            <img src="http://designerspider.net/clients/jge/projects/h07_03_11_12_19_49.jpg" class="projectimg2" alt="Mid 15th C Oakeshott Type XXa" />
        </a>
    </div>                                       
    <div class="thumbsdiv">
        <ul class="thumbs">
            <li>
                <img rel="photo_1" src="http://designerspider.net/clients/jge/projects/h07_03_11_12_10_58.jpg" width="80" />
            </li>
            <li>
                <img rel="photo_2" src="http://designerspider.net/clients/jge/projects/h07_03_11_12_19_49.jpg" width="80" />
            </li>
        </ul>
    </div>
</div>

您的jQuery这样，我已经解释了每一行:

And your jQuery like this, I've explained each line:

var options = {
    zoomWidth: 250,
    zoomHeight: 250,
    position: 'right',
    yOffset: 0,
    xOffset: 0,
    title: false
}
$(".jqclass").jqzoom(options);

// Make the thumbnail look clickable:
$(".thumbs img").each(function() {
    $(this).css('cursor', 'pointer');
});
// React to clicking on a thumbnail:
$(".thumbs img").click(function() {
    // Get the photo linked to:
    var photo = $(this).attr('rel');
    // Unbind the zoom:
    $(".jqclass").unbind(".jqclass");
    // Hide the current image via its parent DIV:
    $(".jqclass").parent().hide();
    // Remove teh jqclass:
    $(".jqclass").removeClass("jqclass");
    // Show the clicked photo:
    $("#"+photo).show();
    // Add the class and the zoom:
    $("#"+photo+" a").addClass("jqclass").jqzoom(options);
});

这篇关于jqzoom在多个图像上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！