在jquery选项卡中提升放大

我想在jquery选项卡中使用elevate-zoom插件。它在第一个选项卡中正常工作，但在更改选项卡时会中断。我明白发生了什么，但不知道如何解决。如果我更改了类，则需要再次单击以使.hide生效。我是jquery的新手，任何帮助将不胜感激。这是我第一次发布代码，我希望它是正确的。在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>

来源

2014-03-01 user3093812

请澄清一下问题。期望的行为是什么？你想在tab/fragment 1上发生什么？你想在tab/fragment 2上发生什么？ *当我更改标签时*会有什么意义？非常具体。 –

我希望缩放功能仅适用于＃fragment-1。额外的#fragments会有静态内容。当页面加载缩放工作正常时，但是当您选择＃fragment-2并将鼠标悬停在十字准线上并且缩放图像显示在内容上时。在这一点上，标签ui'破坏'也不再有效。对不起，缺乏特异性。 – user3093812

因此，当用户点击不同的选项卡时，是否要从图像中解除绑定* elevateZoom？然后*重新绑定*时/如果他们再次点击第一个选项卡？ –

只需绑定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({

来源

2014-03-01 03:58:52

这给出了相同的结果。也许我不清楚。我只想要在面板（0）上进行升降变焦操作。 – user3093812

已将＃zoom_02编辑为#no_zoom。 – user3093812

这似乎是我能找到上述问题的最佳解决方案，似乎运作良好：

$('#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 
     }); 
    } 
});

来源

2014-03-02 22:41:48 user3093812

感谢[mark -s]（http://stackoverflow.com/users/1961198/mark-s）为他找到的答案[here]（http://stackoverflow.com/questions/21490554/bind-a-jquery - 图像变焦效果到的onclick）。 – user3093812

在jquery选项卡中提升放大

回答

相关问题