Question

请查看此网站作为参考：http://www.philsalesses.com/place-pulse/

在左侧，您会看到图片的屏幕截图。如果单击图像，它将打开该图像的颜色框。

我正在使用wordpress，所以与该帖子相关联还有4个截图，全部都在一个图库中。

我想要做的是当你点击那个图像时，循环浏览与该帖子相关联的图库中的所有图像。

我是打字版本的新品牌，所以请跟我说话。

Answer 1

无需说话 - 每个人都从某个地方开始。至于显示你的其他图像，在你的页面上设置colorbox插件的方式是这样的（伪代码）：

for all links that contain an image {
    if the link is to an image {
        if the image has a CSS class of "colorbox-[0-9]+" {
            group it with all other images with the same CSS class
        }     
        if the image has a CSS class of "colorbox-manual" or no CSS class {
            don't group it with any other images
        }       
    }
}

查看您的页面我发现了两个问题：

您的一个图片链接包含CSS类“colorbox-manual”。
您网页上只有一个符合上述条件的链接：）

最简单的解决方法是将其他4张图片添加到你的帖子中，这样它们就会显示为缩略图，但我怀疑这不是你想要的。作为一个黑客，你可以做的是添加其他4个图像，然后给它们所有display: none样式。这样，colorbox插件会找到它们并将它们与主图像分组，但实际上并没有在帖子上显示缩略图。

这四张图片的内容如下：

<a href="image1.jpg" style="display: none;"><img src="image1-thumb.jpg" /></a>
<a href="image2.jpg" style="display: none;"><img src="image2-thumb.jpg" /></a>
<a href="image3.jpg" style="display: none;"><img src="image3-thumb.jpg" /></a>
<a href="image4.jpg" style="display: none;"><img src="image4-thumb.jpg" /></a>

如果这不起作用，请检查您的标记，以查找colorbox插件添加到图片的class。它应采用colorbox-[0-9]+形式（即colorbox-123）。

Answer 2

我使用NextGen Gallery，使用它导入图片，将选项中的“效果”设置为关闭。然后我进入了nextgen源并在每个img下添加了colorbox-1作为一个类。设置CSS样式，我就完成了。 4个小时的上衣。

查看http://www.philsalesses.com/seaswarm进行演示。

通过单击一个图像Colorbox多个图像幻灯片

2 个答案: