在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選項卡中提升放大

回答

相關問題