jQuery LightBox中的滾動條

Question

我想用ASP.net中的滾動條顯示縮略圖圖像。這是我的代碼示例。

 <h2 id="example">Example</h2> 
<p>Click in the image and see the <strong>jQuery lightBox plugin</strong> in action.</p> 
<div id="gallery"> 
    <ul> 
     <li> 
      <a href="photos/image1.jpg" rel="lightbox" title="Media Monitors All Pakistan Newspapers Web Hub!"> 
       <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" /> 
      </a> 
     </li> 
     <li> 
      <a href="photos/image2.jpg" rel="lightbox" title="Media Monitors All Pakistan Newspapers Web Hub!"> 
       <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" /> 
      </a> 
     </li> 
     <li> 
      <a href="photos/image3.jpg" rel="lightbox" title="Media Monitors All Pakistan Newspapers Web Hub!"> 
       <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" /> 
      </a> 
     </li> 
     <li> 
      <a href="photos/image4.jpg" rel="lightbox" title="Media Monitors All Pakistan Newspapers Web Hub!"> 
       <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" /> 
      </a> 
     </li> 
     <li> 
      <a href="photos/image5.jpg" rel="lightbox" title="Media Monitors All Pakistan Newspapers Web Hub!"> 
       <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" /> 
      </a> 
     </li> 
     <li> 
      <a href="photos/image6.jpg" rel="lightbox" title="Media Monitors All Pakistan Newspapers Web Hub!"> 
       <img src="photos/thumb_image6.jpg" width="72" height="72" alt="" /> 
      </a> 
     </li> 
     <li> 
      <a href="photos/image7.jpg" rel="lightbox" title="Media Monitors All Pakistan Newspapers Web Hub!"> 
       <img src="photos/thumb_image7.jpg" width="72" height="72" alt="" /> 
      </a> 
     </li> 
     <li> 
      <a href="photos/image8.jpg" rel="lightbox" title="Media Monitors All Pakistan Newspapers Web Hub!"> 
       <img src="photos/thumb_image8.jpg" width="72" height="72" alt="" /> 
      </a> 
     </li> 
     <li> 
      <a href="photos/image9.jpg" rel="lightbox" title="Media Monitors All Pakistan Newspapers Web Hub!"> 
       <img src="photos/thumb_image9.jpg" width="72" height="72" alt="" /> 
      </a> 
     </li> 
     <li> 
      <a href="photos/image10.jpg" rel="lightbox" title="Media Monitors All Pakistan Newspapers Web Hub!"> 
       <img src="photos/thumb_image10.jpg" width="72" height="72" alt="" /> 
      </a> 
     </li> 
     <li> 
      <a href="photos/image11.jpg" rel="lightbox" title="Media Monitors All Pakistan Newspapers Web Hub!"> 
       <img src="photos/thumb_image11.jpg" width="72" height="72" alt="" /> 
      </a> 
     </li> 
     <li> 
      <a href="photos/image12.jpg" rel="lightbox" title="Media Monitors All Pakistan Newspapers Web Hub!"> 
       <img src="photos/thumb_image12.jpg" width="72" height="72" alt="" /> 
      </a> 
     </li> 
    </ul> 
</div> 

這是圖像顯示現在

，但我想水平srollbar（向左寫）的圖像 我怎樣才能實現縮略圖顯示滾動條？任何想法？？

Answer 1

你的意思是你想要一個水平滾動條爲你的#gallery？如果是這種情況，那麼你應該設置你的寬度#gallery並將其設置爲overflow:auto;。你應該設置ul比#gallery（允許它滾動）更寬。

它看起來好像是這樣的：

#gallery { 
    width:300px; 
    overflow:auto; 
} 

ul { 
    width:600px; 
} 

的jsfiddle粗糙例如：http://jsfiddle.net/MHG4c/

這是很粗糙，但其基本思想是類似的東西。