jquery 탭의 elevate-zoom

jquery 탭에서 elevate-zoom 플러그인을 사용하려고합니다. 그것은 첫 번째 탭에서 잘 작동하지만 탭을 변경할 때 끊어집니다. 무슨 일이 일어나고 있는지 이해하지만 해결 방법을 모릅니다. 수업을 변경하면 .hide가 적용되도록 두 번째 클릭이 필요합니다. 나는 jquery에 신참이다, 어떤 도움을 주시면 감사하겠습니다. 코드를 게시 한 것은 이번이 처음이며 올바른 것으로 희망합니다.jquery 탭의 elevate-zoom

!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

질문을 명확히하십시오. 원하는 행동은 무엇입니까? 탭/조각 1에서 무엇을하고 싶습니까? 탭/조각 2에서 무엇을하고 싶습니까? 탭을 바꿀 때 * 고장은 무엇입니까? 매우 구체적이어야합니다. –

확대/축소 기능이 # fragment-1에서만 작동하도록하고 싶습니다. 추가 # 조각에는 정적 내용이 있습니다. 페이지가로드되면 줌이 올바르게 작동하지만 십자형 위에 # fragment-2 및 마우스를 선택하면 내용 위에 확대/축소 이미지가 나타납니다. 그 시점에서 탭은 또한 '부서지기'때문에 더 이상 작동하지 않습니다. 특이성이 없어서 미안해. – 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) 그의 대답에 대한 감사합니다 [여기] (http://stackoverflow.com/questions/21490554/bind-a-jquery -image-zoom-effect-onclick). – user3093812

답변

관련 문제