通过单击一个图像进行颜色框多图像幻灯片放映答案

【问题标题】：Colorbox multiple image slideshow by clicking one image通过单击一个图像进行颜色框多图像幻灯片放映
【发布时间】：2010-08-04 04:36:49
【问题描述】：

请参考本站：http://www.philsalesses.com/place-pulse/

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

我正在使用 wordpress，因此与该帖子相关联的还有 4 个屏幕截图，都在一个图库中。

我想要做的是，当您单击该一张图片时，循环浏览与该帖子关联的图库中的所有图片。

我是 wordpress 的新手，所以请跟我说话。

【问题讨论】：

标签： javascript jquery wordpress colorbox

【解决方案1】：

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

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 样式。这样，彩盒插件会找到它们并将它们与您的主图像分组，但实际上不会在帖子上显示缩略图。

四张图片是这样的：

<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>

如果这不起作用，请检查颜色盒插件添加到图像中的 class 标记。格式应为colorbox-[0-9]+（即colorbox-123）。

【讨论】：

这是 95% 的解决方案。现在最后一个问题：当显示设置为无时，我的文章末尾仍然有空白，因为每个链接都在那里，所以有 35 行长。我尝试将图像大小设置为 0。为每个图像设置相同的 x y 位置并使其固定工作？
是的，可以。 position: absolute; left: -5000px 之类的东西会将它们从屏幕上移开，并且不会添加任何空白。
谢谢，成功了。你知道我是否可以编写一个循环来提取画廊中的每张图片并添加此代码，这样我就不必手动添加它们了吗？
当然。这个问题应该让你走上正轨：stackoverflow.com/questions/1815158/…

【解决方案2】：

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

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

【讨论】：