탭 및 슬라이딩 이미지 갤러리 (simplyScroll)에 jQuery 사용

Question

요트 페이지에서 요트의 이미지와 함께 클릭하면 주 이미지 위에 표시되는 더 많은 사진이 표시되는 요트 웹 사이트를 구축하고 있습니다.

또한 탭이있어 사용자가 페이지를 떠나지 않고도 요트의 가상 둘러보기를 볼 수 있습니다 (두 번째 이미지 갤러리와 같습니다).

내 문제는 jQuery 탭을 사용할 때 두 번째 갤러리 (가상 둘러보기)에 이미지가 표시되지 않고 스크롤러가 작동하지 않는 두 번째 탭입니다. 내가 본 코드를 보면 jQuery .hide 함수 ($ j (". tab_content"). hide();)와 관련이 있지만, 주석으로 처리하면 모든 탭이 표시됩니다.

다음은 jQuery 코드입니다 :

<script type="text/javascript"> 
     // Initialize the plugin with no custom options 
     var $j = jQuery.noConflict(); 
     $j(document).ready(function() { 
      //Default Action 
      $j(".tab_content").hide(); //Hide all content 
      $j("ul.tabs li:first").addClass("active").show(); //Activate first tab 
      $j(".tab_content:first").show(); //Show first tab content 

      //On Click Event 
      $j("ul.tabs li").click(function() { 
       $j("ul.tabs li").removeClass("active"); //Remove any "active" class 
       $j(this).addClass("active"); //Add "active" class to selected tab 
       $j(".tab_content").hide(); //Hide all tab content 
       var activeTab = $j(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content 
       $j(activeTab).fadeIn(); //Fade in the active content 
       return false; 
      }); 
      $j("#scroller").simplyScroll({ 
       speed: 25 
      }); 
      $j("#scroller2").simplyScroll({ 
       speed: 25 
      }); 
     }); 
     $j('.project').live('click',function(){ 
      newImg = $j(this).attr('rel'); 
      $j('img.projectImg').attr('src', newImg); 
      hideLoading(); 
     }); 
     $j('.vrtour').live('click',function(){ 
      newSwf = $j(this).attr('rel'); 
      var newObjElement = '<object style="width:681px;height:511px;"><param name="movie" value="'+newSwf+'"><embed src="'+newSwf+'" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="681" height="511"></object>'; 
      $j('#Swf').html(newObjElement); 
      hideLoading(); 
     }); 
    </script> 

그리고 여기에 HTML의 :

<ul class="tabs"> 
     <li><a href="#tab1">PHOTOS</a></li> 
     <li><a href="#tab2">VIRTUAL TOUR</a></li> 
    </ul> 
    <div class="tab_container"> 
    <div id="tab1" class="tab_content"> 


    <div id="photosItem"> 
            <!-- Item Image --> 
       <div class="itemImageBlock" id="imageBox"> 
        <span class="itemImage"> 
         <img src="184b7cb84d7b456c96a0bdfbbeaa5f14_L.jpg" alt=" Posillipo 80 1997" style="width:681px; height:511px;" class="projectImg" /> 
        </span> 
                   </div> 

            <div class="clr"></div> 
      </div> 
            <!-- Item image gallery --> 
        <a name="itemImageGalleryAnchor" id="itemImageGalleryAnchor"></a> 
        <div class="itemImageGallery"> 
         <div id="gallery"> 
         <ul id="scroller"> 
          <li><img rel="IMG_3104.jpg" src="jwsigpro_cache_8d00638fe2img_3104.jpg" alt="Click to open image!" title="Click to open image!" style="width:136px;height:92px;cursor:pointer" class="project" /></li> 
          <li><img rel="IMG_3109.jpg" src="jwsigpro_cache_8d00638fe2img_3109.jpg" alt="Click to open image!" title="Click to open image!" style="width:136px;height:92px;cursor:pointer" class="project" /></li> 

          <li><img rel="IMG_3133.jpg" src="jwsigpro_cache_8d00638fe2img_3133.jpg" alt="Click to open image!" title="Click to open image!" style="width:136px;height:92px;cursor:pointer" class="project" /></li> 
          <li><img rel="IMG_3136.jpg" src="jwsigpro_cache_8d00638fe2img_3136.jpg" alt="Click to open image!" title="Click to open image!" style="width:136px;height:92px;cursor:pointer" class="project" /></li> 
          <li><img rel="IMG_3156.jpg" src="jwsigpro_cache_8d00638fe2img_3156.jpg" alt="Click to open image!" title="Click to open image!" style="width:136px;height:92px;cursor:pointer" class="project" /></li> 
          <li><img rel="IMG_3159.jpg" src="jwsigpro_cache_8d00638fe2img_3159.jpg" alt="Click to open image!" title="Click to open image!" style="width:136px;height:92px;cursor:pointer" class="project" /></li> 
          <li><img rel="IMG_3164.jpg" src="jwsigpro_cache_8d00638fe2img_3164.jpg" alt="Click to open image!" title="Click to open image!" style="width:136px;height:92px;cursor:pointer" class="project" /></li> 
          <li><img rel="IMG_3169.jpg" src="jwsigpro_cache_8d00638fe2img_3169.jpg" alt="Click to open image!" title="Click to open image!" style="width:136px;height:92px;cursor:pointer" class="project" /></li> 
         </ul> 
         </div> 
        </div> 

         </div> 
    </div> 
    <div id="tab2" class="tab_content"> 
     <div id="photosItem"> 
       <div class="itemImageBlock" id="imageBox"> 
        <span class="itemImage"> 
        <div id="Swf"> 
        <object width="681" height="511"> 
        <param name="movie" value="Ferretti_165_main_saloon.swf"> 
        <embed type="application/x-shockwave-flash" src="Ferretti_165_main_saloon.swf" width="681" height="511" class="projectSwf"></embed> 

        </object> 
        </div> 
        </span> 
       </div> 
       <div class="clr"></div> 
       <div class="itemImageGallery"> 
         <div id="gallery"> 
          <ul id="scroller2"> 
           <li><img rel="Ferretti_165_main_saloon.swf" src="deck.jpg" alt="Click to open 360!" title="Click to open 360!" style="width:136px;height:92px;cursor:pointer" class="vrtour" /></li> 

           <li><img rel="example.swf" src="deck.jpg" alt="Click to open 360!" title="Click to open 360!" style="width:136px;height:92px;cursor:pointer" class="vrtour" /></li> 
           <li><img rel="example.swf" src="deck.jpg" alt="Click to open 360!" title="Click to open 360!" style="width:136px;height:92px;cursor:pointer" class="vrtour" /></li> 
           <li><img rel="Ferretti_165_main_saloon.swf" src="deck.jpg" alt="Click to open 360!" title="Click to open 360!" style="width:136px;height:92px;cursor:pointer" class="vrtour" /></li> 
           <li><img rel="Ferretti_165_main_saloon.swf" src="deck.jpg" alt="Click to open 360!" title="Click to open 360!" style="width:136px;height:92px;cursor:pointer" class="vrtour" /></li> 
           <li><img rel="Ferretti_165_main_saloon.swf" src="deck.jpg" alt="Click to open 360!" title="Click to open 360!" style="width:136px;height:92px;cursor:pointer" class="vrtour" /></li> 
           <li><img rel="Ferretti_165_main_saloon.swf" src="deck.jpg" alt="Click to open 360!" title="Click to open 360!" style="width:136px;height:92px;cursor:pointer" class="vrtour" /></li> 
           <li><img rel="Ferretti_165_main_saloon.swf" src="deck.jpg" alt="Click to open 360!" title="Click to open 360!" style="width:136px;height:92px;cursor:pointer" class="vrtour" /></li> 
           <li><img rel="Ferretti_165_main_saloon.swf" src="deck.jpg" alt="Click to open 360!" title="Click to open 360!" style="width:136px;height:92px;cursor:pointer" class="vrtour" /></li> 
           <li><img rel="Ferretti_165_main_saloon.swf" src="deck.jpg" alt="Click to open 360!" title="Click to open 360!" style="width:136px;height:92px;cursor:pointer" class="vrtour" /></li> 

          </ul> 
         </div> 
        </div> 
      </div> 
    </div> 

그리고 여기에 라이브를보고 싶다면 데모 페이지의 :

http://www.cre8.gr/test/

누구든지 도울 수 있다면 크게 감사하겠습니다.

감사합니다.

Answer 1

문제는 # scroller2의 너비입니다.

나는이 플러그인을 모른다. 그러나 내 생각에 그것은 (여기서는 136px) 너비를 더하여 <ul> 너비를 설정한다.

첫 번째 탭의 너비는 8 thumb * 136 px = 1088px입니다.

두 번째 탭의 너비는 0px로 설정되어 작동하지 않습니다.

간단히 말해서 <li>의 외부 너비를 가져 오려고 시도합니다. 그러면 안 그러면 실패합니다.

simplyscroll을 호출 한 후 탭을 숨기려고합니다.

예 : 스크립트의 시작 부분에

이동

$j("#scroller2").simplyScroll({ 
       speed: 25 
      }); 

.

그러나 플러그인을 수정하는 것이 가장 좋은 방법입니다.