0

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>

現在表示中の画像です ここに画像の説明を入力

しかし、画像に水平スクロールバー(左に移動)が必要です。サムネイル表示にスクロールバーを実装するにはどうすればよいですか?? 何か案が？？

4

1 に答える 1

0

に水平スクロールバーが必要だったということです#galleryか? その場合は、幅を#gallery設定し、 として設定する必要がありますoverflow:auto;。ulまた、をより広く設定する必要があります#gallery(スクロールできるようにするため)。

次のようになります。

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

ul { 
    width:600px;
}

JSFiddle の大まかな例: http://jsfiddle.net/MHG4c/

非常に大雑把ですが、基本的な考え方はそのようなものです。

于 2012-10-18T10:11:20.553 に答える