2

我正在尝试使用 Colorbox 创建幻灯片。不幸的是，我无法控制图像的创建方式，因此我无法在图像上放置锚标签或 rel=。

我能做的最好的事情是这样的：

<div id="cbImg" class="slideshow">
    <img src="file1.png" />    
    <img src="file2.png" />
    <img src="file3.png" />
    <img src="file4.png" />
</div>

图像标签可能有高度、宽度和 alt 标签……但它是动态生成的。我能控制的只是图像周围的 DIV 标签。图像周围可能有也可能没有其他标签（p、div、span）。

我想要这样的东西：

<div id="cbImg" class="slideshow">
    <a href="file1.png" rel="slide" class="pop"><img src="file1.png" /></a>
    <a href="file2.png" rel="slide" class="pop"><img src="file2.png" /></a>
    <a href="file3.png" rel="slide" class="pop"><img src="file3.png" /></a>
    <a href="file4.png" rel="slide" class="pop"><img src="file4.png" /></a>
</div>

是的，这是来自 CMS……不，我无法修改它的呈现方式。我正在尝试制作幻灯片（如果可能的话）。

4

2 回答 2

0

基本上，我最终使用 JQuery 在 IMG 标签周围动态创建锚标签......然后让我添加类和 rel= 我需要使用 ColorBox 选项。

这是我用于如何创建锚标签的提示的答案之一：

jQuery：用 A 锚标记包装图像标记的最简单方法

于 2011-04-13T18:09:16.363 回答
0

另一种方法是通过 XSLT 转换博客文章。但是，如果图像在博客文章内容中，这将不是一件容易的事（尤其是当 Ektron 使用不支持正则表达式的 XSLT 1.0 时）。

如果您想做这个服务器端，您可能必须获取内容并进行字符串替换。或者，您可以使用 jQuery 解决方案并使用 NodeJS 在服务器端运行它。

于 2011-05-02T01:46:11.110 回答