Fatal编程技术网
  • jquery/
  • Jquery Colorbox-链接到HTML文件，但通过Colorbox解析变量，从而更改HTML文件的内容？

Jquery Colorbox-链接到HTML文件，但通过Colorbox解析变量，从而更改HTML文件的内容？

jquery

Jquery Colorbox-链接到HTML文件，但通过Colorbox解析变量，从而更改HTML文件的内容？,jquery,colorbox,Jquery,Colorbox,对不起，我可能解释得不太清楚。基本上，我是一名设计师，对jQuery来说比较陌生。我们的团队正在进行一个项目，我们需要一个图像（以及其他按rel属性分组的图像）加载到阴影盒中。这很好-我已经将Colorbox集成到相关页面中，所有工作都很好 现在，一些亮点已经有了这样的想法：我们应该在我们展示的图像下方的彩盒窗口上显示“横幅广告”，因为这将为业务创造收入 现在，我最初的想法是，可以使用iframe方法来实现，因为我们可以调用一个带有横幅代码的HTML页面（我还不确定当用户在图库中导航时是否会重新

对不起，我可能解释得不太清楚。基本上，我是一名设计师，对jQuery来说比较陌生。我们的团队正在进行一个项目，我们需要一个图像（以及其他按rel属性分组的图像）加载到阴影盒中。这很好-我已经将Colorbox集成到相关页面中，所有工作都很好

现在，一些亮点已经有了这样的想法：我们应该在我们展示的图像下方的彩盒窗口上显示“横幅广告”，因为这将为业务创造收入

现在，我最初的想法是，可以使用iframe方法来实现，因为我们可以调用一个带有横幅代码的HTML页面（我还不确定当用户在图库中导航时是否会重新加载一个新的横幅广告）

问题是。。。我们的网站有点像Autotrader.co.uk，如果你愿意的话——基本上是大量图像的潜力——用户可以上传任意数量的图像，这是不受限制的——所以我真的不想每次上传新图像时都创建一个新的HTML页面，因为这太荒谬了

如果这是个愚蠢的问题，请原谅我。。。但是有没有什么方法可以让我们在上面创建一个HTML文件（带有横幅广告代码），然后通过colorbox以某种方式解析图像src？或者编辑颜色框脚本，使其在图像顶部有一个横幅广告区域

我一直在试图弄清楚Autotrader是如何做到这一点的，看起来他们对每个图像都有不同的URL

如有任何帮助/建议，将不胜感激

为了让你能看到我们正在努力实现的目标，点击其中一个缩略图，你会看到横幅广告显示在图像上方

谢谢

更新：

目前我们只有一个“产品详细信息”页面-有一个jQuery图像库，colorbox用于显示较大的图像，该部分的HTML如下
目前，这些图像与普通图像一样在colorbox中打开

$(document).ready(function(){
$("a[rel='gallery']").colorbox();       
</script>

$（文档）.ready（函数（）{
$（[rel='gallery']）；
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页面上的图像根据在“产品详细信息”页面上单击的图像动态变化

如果失败了-也许有人能给我指出正确的方向，告诉我如何修改暗箱代码，使横幅脚本成为其中的一部分

提前感谢

这取决于您如何调用横幅图像。如果图像调用横幅脚本作为其源，您可以动态注入图像。例如

$("a[rel='gallery']").colorbox({
    onLoad: function() {
        $("cboxLoadedContent").prepend($("#bannerImg"));
    }
});
在HTML中，您会看到横幅图像：

<p style="display:none;>
    <img src="http://www.domain.com/banner.cgi?Id=123" id="bannerImg"/>
</p>

这实际上取决于您如何调用横幅图像。如果它是一个调用横幅脚本作为其源的图像，您可以动态注入该图像。例如


$("a[rel='gallery']").colorbox({
    onLoad: function() {
        $("cboxLoadedContent").prepend($("#bannerImg"));
    }
});


在HTML中，您会看到横幅图像：


<p style="display:none;>
    <img src="http://www.domain.com/banner.cgi?Id=123" id="bannerImg"/>
</p>



好的，最简单的方法是创建自己的标记并将其传递给colorbox的html属性。下面是一个示例：


$("a[rel='example1']").colorbox({width:800, height:500, html:function(){
    return "<div><div class='banner' style='width:300px; height:50px; background:#f00;'></div><img src='"+this.href+"'/></div>";
}});



$（[a[rel='example1']）。颜色框（{width:800，height:500，html:function（）{
返回“”；
}});



每个“example1”都是一个照片链接。这样做的缺点是您无法自动调整大小（因为colorbox在加载之前不知道新创建的IMG元素的大小）.
嗯，最简单的方法是创建自己的标记并将其传递给colorbox的html属性。下面是一个示例：


$("a[rel='example1']").colorbox({width:800, height:500, html:function(){
    return "<div><div class='banner' style='width:300px; height:50px; background:#f00;'></div><img src='"+this.href+"'/></div>";
}});



$（[a[rel='example1']）。颜色框（{width:800，height:500，html:function（）{
返回“”；
}});



每个“example1”都是一个照片链接。这样做的缺点是您无法自动调整大小（因为colorbox在加载之前不知道新创建的IMG元素的大小）.
为了澄清这一点，您的页面上有一个横幅广告，它是动态的。您希望这个横幅广告显示在灯箱中的图像下吗？另外，您可以发布到目前为止的代码吗？您好-我已经用HTML和jQuery编辑了上面的文章。本质上是的，横幅广告需要显示在上方/下方（不必大惊小怪）lightbox中的图像-但是，如前所述，colorbox脚本也在其他地方用于打开网页/其他链接，不必在这些页面上显示此横幅广告。感谢回复：）为了澄清这一点，你的页面上有一个横幅广告，它是动态的。你想让这个横幅广告显示在灯箱中的图像下吗？另外，你能发布你到目前为止的代码吗？嗨-我已经用HTML和jQuery编辑了上面的文章。本质上是的，横幅广告需要显示在上面/下面（不要大惊小怪）lightbox中的图像-但是，如前所述，colorbox脚本也在其他地方用于打开网页/其他链接，不需要在这些页面上显示此横幅广告。感谢您的回复：）好的，这是有意义的…虽然我需要传递的不是实际图像，但它是google adsense脚本（将显示图像/闪光灯）-这仍然有效吗？现在尝试挖掘代码…嗨-脚本代码如下…这有效吗？GA_googleFillSlot（“Live_HeaderBanner”）；Jack，有没有办法在t中自动调整大小