使用jQuery的標籤和滑動圖片庫（simplyScroll）

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的寬度。

我不知道這個插件，但我的猜測是它增加了所有<li>（這裏是136px）的寬度來設置<ul>的寬度。

對於第一個標籤，寬度很好：8 thumb * 136 px = 1088px。

對於第二個選項卡，寬度設置爲0px，因此它無法工作。

我會說，simplyscroll試圖獲取<li>的外部寬度，然後他們被隱藏。

因此，也許嘗試隱藏後調用simplyscroll標籤。

即：

移動

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

到腳本的開頭。

但是，修復它的最好方法是編輯插件。