0

ファンシーボックス ギャラリーにたくさんの写真があり、サムネイル ナビゲーションがページの端からはみ出してしまいます。

そのため、表示されているサムネイル ナビゲーションを矢印などで 5 程度にページ分割したいと考えています。

私は js が得意ではありません (学習中です) が、html は理解しています。

http://ryansamul.com/dark/gallery-subject-new.html

以下は私のコードの切り詰められたバージョンです:

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery(".fancybox-thumb").fancybox({
        prevEffect  : 'none',
        nextEffect  : 'none',
        helpers : {
            title   : {

                type: 'outside'
            },
            thumbs : {
                width : 100,
                height : 100
            }
        }
    });
});
    </script>


<div class="one-fifth">
                <p>
                    <a class="fancybox-thumb" rel="fancybox-thumb" href="images/gallery/subject/1.jpg" ><img src="images/gallery/subject/thumbs/1.png" width="158" height="158" alt=" "/></a>
                </p>
            </div>

            <div class="one-fifth">
                <p>
                    <a href="images/gallery/subject/2.jpg" class="fancybox-thumb" rel="fancybox-thumb"><img src="images/gallery/subject/thumbs/2.png" width="158" height="158" alt=" " /></a>
                </p>
            </div>
            <div class="one-fifth">
                <p>
                    <a href="images/gallery/subject/3.jpg" class="fancybox-thumb" rel="fancybox-thumb"><img src="images/gallery/subject/thumbs/3.png" width="158" height="158" alt=" " /></a> 
                </p>
            </div>
            <div class="one-fifth">
4

1 に答える 1

0

サムネイルをブラウザの幅に「合わせる」場合は、いくつかの CSS 要素を変更して幅を 100% にすることができます。この3つを変更すれば、そこにたどり着きます。

.center {
    width: 100%;
}

#content {
    width: 100%;
}

.portfolio-container {    
    width: 100%;
}

次に、ブラウザーの幅を変更すると、各行に収まる画像の数が増減します。

于 2012-10-02T15:36:34.423 に答える