Question

我的fancybox图库中有很多照片，缩略图导航从页面一侧泄漏。

所以我想将可见的缩略图导航分为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">

Answer 1

如果您希望缩略图“适合”浏览器的宽度，则可以将一些CSS元素更改为宽度为100％。如果你改变这三个，你就会到达那里。

.center {
    width: 100%;
}

#content {
    width: 100%;
}

.portfolio-container {    
    width: 100%;
}

然后，当您更改浏览器的宽度时，每行中将包含更少或更多的图像。

我如何分页fancybox导航缩略图

1 个答案: