使用 Colorbox 在 iframe 之外显示图像

Posted 2023-05-09

【中文标题】使用 Colorbox 在 iframe 之外显示图像

【英文标题】：Display images outside of an iframe using Colorbox

【发布时间】：2012-04-21 09:29:34

【问题描述】：

请查看我正在使用的示例代码：http://www.christoffah.com/kk/gallery.php

红色和黄色 DIV 包含 iframe。单击黄色 DIV 中的文本链接会加载彩盒照片，但会将其加载到 iframe 中。目标父级会自行打开图像，也就是说，如果您输入了 jpg 图像的 URL，就会发生同样的事情。有没有办法让图片加载到整个网页的顶部？

我使用 iframe 的原因是因为我正在处理的网站需要两个不同的画廊，每个画廊都包含许多专辑，我认为 iframe 将是用户独立浏览画廊的好方法 - 如果有一种更有效的方法我愿意接受建议！谢谢。

【参考方案1】：

首先，我没有看到第二个带有链接的 iframe 的必要性。

您需要使用 javascript 进行链接，因为 target 属性不提供这样的想法作为父目标。有关详细信息，请参阅 Javascript window.parent 对象或特别是 window.parent.frames[...].location 属性。

但是从 SEO 的角度来看，这不是很好。

编辑尝试：

<a ... onclick="parent.$.fn.colorbox(href: this.href); return false;">

【讨论】：

我的第二个 iframe 现在有文本，因为我正在测试插件，它最终看起来像第一个带有缩略图的 iframe。每个 iframe 都有下一个和上一个链接，因此用户可以一次查看两个画廊。我很欣赏这对 SEO 来说可能不是很好，但我想不出另一种方法来解决它。我已经查看了您推荐的 JS，但我不确定如何更改图像 URL 以包含此语法。 Colorbox FAQ 建议 在父窗口中打开，但这似乎也不起作用......请你给点建议吗？

您的方法实际上看起来不错，但是您需要在您的父级中包含 colorbox js 才能使其工作。查看已编辑的问题

感谢您的代码，我已经对同一页面进行了更改 - 它几乎就在那里，但没有加载下一个/上一个按钮或背景覆盖，并且仍然加载了一个 colorbox 的实例内嵌框架。试试“测试链接”：christoffah.com/kk/gallery.php 有什么想法吗？

1.您还将在父级中包含 Colorbox css。至于第二个实例，您可以将脚本从 iframe 中分离为

啊！在父级上包含 CSS 会使背景看起来很棒，但不幸的是它会阻止图像显示...我已经从第二个实例中分离了脚本，但是每个项目都需要这个脚本，例如，如果用户单击第 5 个画廊项目，脚本将需要到位，以便画廊项目加载到父级而不是 iframe。