Question

我需要隐藏图片和不使用 display:none

我使用Highlight脚本创建一个图库，问题是我只需要显示4个图片而没有其他图片，脚本让我们点击一张图片并用箭头显示其他图片，问题就是我使用{ {1}}对于其他照片而不是前4个，其他照片最后没有显示

我尝试其他可能性，但没有作品，我需要隐藏所有照片的第一次4但我不能使用display：none

最诚挚的问候

Answer 1

您可以轻松更改此Highslide示例库：http://highslide.com/examples/gallery-thumbstrip-above.html，在页面中有四个可见的缩略图，而不是一个可见的缩略图。线索是在隐藏容器div之外移动您想要显示的缩略图的标记。

示例库在hidden-container div之外有一个缩略图（请参阅源代码）。
js有四个可见的缩略图：http://jsfiddle.net/roadrash/Un4N7/

一个包含八个图像但只有四个可见缩略图的图库的HTML标记将如下所示：

<div class="highslide-gallery">
    <a href="large-image1.jpg" onclick="hs.expand(this)" />
        <img src="thumbnail1.jpg" alt="" />
    </a>

    <a href="large-image2.jpg" onclick="hs.expand(this)" />
        <img src="thumbnail2.jpg" alt="" />
    </a>

    <a href="large-image3.jpg" onclick="hs.expand(this)" />
        <img src="thumbnail3.jpg" alt="" />
    </a>

    <a href="large-image4.jpg" onclick="hs.expand(this)" />
        <img src="thumbnail4.jpg" alt="" />
    </a>

    <div class="hidden-container">
        <a href="large-image5.jpg" onclick="hs.expand(this)" />
            <img src="thumbnail5.jpg" alt="" />
        </a>

        <a href="large-image6.jpg" onclick="hs.expand(this)" />
            <img src="thumbnail6.jpg" alt="" />
        </a>

        <a href="large-image7.jpg" onclick="hs.expand(this)" />
            <img src="thumbnail7.jpg" alt="" />
        </a>

        <a href="large-image8.jpg" onclick="hs.expand(this)" />
            <img src="thumbnail8.jpg" alt="" />
        </a>
    </div>
</div>

CSS和隐藏元素

1 个答案: