【发布时间】：2011-05-18 08:24:56
【问题描述】：
抱歉，我可能解释得不够清楚。基本上我是一个对 jQuery 比较陌生的设计师。我们的团队正在开展一个项目，我们需要将图像（以及按 rel 属性分组的其他图像）加载到 shadowbox 中。没关系 - 我已将 Colorbox 集成到相关页面中，一切正常。
现在，一些亮眼的想法是，我们应该在我们显示的图像下方的彩盒窗口中显示“横幅广告”，因为它会为业务带来收入。
现在我最初的想法是可以通过使用 iframe 方法来完成，因为我们可以调用一个带有横幅代码的 HTML 页面（我还没有弄清楚它是否会重新加载新的横幅广告）用户正在浏览图库）。
问题是...如果您愿意，我们的网站有点像 Autotrader.co.uk - 基本上可以提供大量图片 - 用户可以上传任意数量的图片，不受限制 - 所以我真的不想每次上传新图片时都创建一个新的 HTML 页面，因为这太荒谬了。
如果这是一个愚蠢的问题，请原谅我...但是有什么方法可以创建 1 个 HTML 文件（带有横幅广告代码），然后以某种方式通过颜色框解析图像 src？或者编辑颜色框脚本，使其在图像顶部有一个横幅广告区域？
我一直在尝试弄清楚 Autotrader 是如何做到这一点的，而且看起来他们为每张图片都有不同的 URL？
任何帮助/建议将不胜感激......
为了让您看到我们正在努力实现的目标，点击其中一个缩略图，您将看到图片上方显示的横幅广告
谢谢
更新：
目前我们只有一个“产品详细信息”页面 - 有一个 jQuery 图片库和颜色框用于显示较大的图片，该部分的 HTML 如下；
<div id="fragment-1" class="ui-tabs-panel">
<div class="boatImages">
<div class="underOfferBanner"></div>
<a href="http://www.solarnavigator.net/animal_kingdom/animal_images/cat_yawning_canine_teeth.jpg" rel="gallery" title="Angry cat - or is it just yawning?"><img src="http://www.examplesite.com/boatImages/2010/11/2/9521834.jpg" alt="" /></a></div>
</div>
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide">
<div class="boatImages">
<div class="underOfferBanner"></div>
<a href="http://files.overyourhead.co.uk/images/misc/Cat%20with%20too%20much%20time.jpg" rel="gallery"><img src="http://www.examplesite.com/boatImages/2010/11/2/9521834.jpg" alt="" /></a></div>
</div>
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide">
<div class="boatImages">
<div class="underOfferBanner"></div>
<a href="http://www.solarnavigator.net/animal_kingdom/animal_images/cat_yawning_canine_teeth.jpg" rel="gallery"><img src="http://www.examplesite.com/boatImages/2010/11/2/9521834.jpg" alt="" /></a></div>
</div>
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide">
<div class="boatImages">
<div class="underOfferBanner"></div>
<a href="http://files.overyourhead.co.uk/images/misc/Cat%20with%20too%20much%20time.jpg" rel="gallery"><img src="http://www.examplesite.com/boatImages/2010/11/2/9521834.jpg" alt="" /></a></div>
</div>
目前图像只是像普通图像一样在颜色框中打开
$(document).ready(function(){
$("a[rel='gallery']").colorbox();
</script>
颜色框脚本根据主站点上的下载 - http://colorpowered.com/colorbox - 我确实添加了它，但我的帖子超过了 3000 个字符的限制。
HTML 页面将与此类似
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="bannerAdvertGoesHere">
<!--banner ad script goes here - changes dynamically -->
</div>
<div id="galleryImage">
<!-- need to try and change the url of the image below from the trigger on product detail page -->
<img src="test-image.gif" width="600" height="600" alt="test" /></div>
</body>
</html>
理想情况下，我们希望这个 HTML 页面上的图片根据在“产品详细信息”页面上点击的图片而动态变化。
如果做不到这一点 - 也许有人能指出我如何改变影子盒代码的正确方向，以便横幅脚本实际上是其中的一部分？
提前致谢
【问题讨论】：
-
为了弄清楚这一点，您的页面上有一个横幅广告，它是动态的。您希望这个确切的横幅广告显示在灯箱中的图像下方吗？另外，你能把你到目前为止的代码贴出来吗？
-
嗨 - 我已经用 HTML 和 jQuery 编辑了上面的帖子。本质上是 yex，横幅广告需要显示在灯箱中的图像上方/下方（不是大惊小怪） - 但是，如前所述，颜色框脚本也用于其他地方打开网页/其他链接，没有必要拥有这个横幅广告显示在这些上。感谢您的回复:)