Question

我正在尝试在jquery选项卡中使用elevate-zoom插件。它在第一个选项卡中工作正常，但在更改选项卡时会中断。我理解发生了什么，但不知道如何解决它。如果我更改了类，则需要再次单击才能使.hide生效。我是jquery的新手，任何帮助都会受到赞赏。这是我第一次发布代码，我希望这是正确的。

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org  /TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"</script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="Scripts/jquery.elevatezoom.js"></script>
    <link type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/black-tie/jquery-ui.css" rel="stylesheet" />
    <style type="text/css">
        .hide { position: absolute; top: -9999px; left: -9999px; }
    </style>
    </head>
    <body>
    <div id="wrapper" style="min-height: 520px;">
    <div id="tabs" style="margin: 0px 10px 10px 10px; min-height: 460px; font-size: 9pt;">
        <ul>
            <li><a href="#fragment-1"><span><b>First Panel</b></span></a></li>
            <li><a href="#fragment-2"><span>Second Panel</span></a></li>
        </ul>

            <div id="fragment-1" class="first">
                <div id='Div1' style='margin-left: 60px;'>
                    <img id="zoom_01" src='http://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Austin_Healey_3000_red_vl.jpg/800px-Austin_Healey_3000_red_vl.jpg' width="300" data-zoom-image="http://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Austin_Healey_3000_red_vl.jpg/800px-Austin_Healey_3000_red_vl.jpg"/>
                </div>
            </div>
            <div id="fragment-2">
                <div id='Div2' style='margin-left: 60px;'>
                    <img id="no_zoom" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Austin-Healey_3000_at_2010_Ottawa_British_Auto_Show.jpg/800px-Austin-Healey_3000_at_2010_Ottawa_British_Auto_Show.jpg" />
                </div>
            </div>
        </div>
</div>
<script type="text/javascript">
    $("#tabs").tabs({ show: { effect: "blind", duration: 500} });

    jQuery(document).ready(function () {
        $("#accordion").accordion({ active: 0 });
        $("#zoom_01").elevateZoom({
            zoomWindowWidth: 300,
            zoomWindowHeight: 300,
            scrollZoom: true,
            easing: true,
            zoomWindowFadeIn: 500,
            zoomWindowFadeOut: 500,
            lensFadeIn: 500,
            lensFadeOut: 500,
            zoomWindowPosition: 1,
            zoomWindowOffetx: 10
        });
    });


    $('#tabs').click('tabsselect', function (event, ui) {
        event.preventDefault();
        if ($("#tabs").tabs('option', 'active') > 0)
            $(".first").addClass("hide")
        else
            $(".first").removeClass("hide")
    });

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

Answer 1

只需将elevatZoom功能绑定到多个元素，您就应该好了：

$("#zoom_01, #zoom_02").elevateZoom({
        zoomWindowWidth: 300,
        zoomWindowHeight: 300,
        scrollZoom: true,
        easing: true,
        zoomWindowFadeIn: 500,
        zoomWindowFadeOut: 500,
        lensFadeIn: 500,
        lensFadeOut: 500,
        zoomWindowPosition: 1,
        zoomWindowOffetx: 10
    });

更好的是，为您的图片提供缩放（或类似）的类，并且您可以更改您的选择器以便更轻松地使用：

$(".zoom").elevateZoom({

Answer 2

这似乎是我能找到上述问题的最佳解决方案，似乎效果很好：

    $('#tabs').click('tabsselect', function (event, ui) {
    if ($("#tabs").tabs('option', 'active') > 0) {
        $('.zoomContainer').remove();
    } else {
        $("#zoom_01").elevateZoom({
            zoomWindowWidth: 300,
            zoomWindowHeight: 300,
            scrollZoom: true,
            easing: true,
            zoomWindowFadeIn: 500,
            zoomWindowFadeOut: 500,
            lensFadeIn: 500,
            lensFadeOut: 500,
            zoomWindowPosition: 1,
            zoomWindowOffetx: 10
        });
    }
});

在jquery选项卡中提升

2 个答案: