Question

让我先说一下我是jQuery和任何类型的编程的新手，所以我的速度会慢一些。

在开始之前，我正在使用此插件（http://3.s3.envato.com/files/36161092/index.html#/homepage）在父html页面的框架内提供页面。

问题是我有两个Colorbox画廊页面。我可以毫无问题地加载第一个图库。但是，如果我使用Colorbox图库转到第二页并从其库中加载图像，则会立即加载两个Colorbox实例。因此，用户必须单击两次才能退出Colorbox窗口。

在我上面详述的第三方插件的上下文中，有没有办法阻止这种情况发生？（当我从混合中取出Revolver插件时，Colorbox工作正常，我自己链接并加载它们。）

这是我在一个页面上使用的代码 -

$(document).ready(function() {
$(".gallery1").colorbox({rel:"gallery1", transition:"fade" });
$(".gallery2").colorbox({rel:"gallery2", transition:"fade" });
$(".gallery3").colorbox({rel:"gallery3", transition:"fade" });
$(".gallery4").colorbox({rel:"gallery4", transition:"fade" });
});

我在第二页上使用的代码基本相同，但只是为了序列而更改了库名称。

$(document).ready(function() {
$(".gallery5").colorbox({rel:"gallery5", transition:"fade" });
$(".gallery6").colorbox({rel:"gallery6", transition:"fade" });
$(".gallery7").colorbox({rel:"gallery7", transition:"fade" });
$(".gallery8").colorbox({rel:"gallery8", transition:"fade" });
});

有没有办法在加载第二页时刷新Colorbox实例或以某种方式加载Colorbox，以便它可以应用于两个页面而不会像我所描述的那样搞乱？

我在StackOverflow上查找了这个问题，这是我能够解决自己问题的最接近的问题。 jQuery colorbox loading 2 iframes。提出的解决方案对我来说并不适用。我知道有些东西我可以使用.load来适应，但我不确定如何在我的上下文中使用它。我已经尝试调整解决方案的位置（它有点工作），但它总是加载第一张幻灯片，无论我选择的图库中是什么图片。

无论如何，这是我在黑暗中的镜头。很抱歉有很长的解释，并提前感谢您对互联网上的窥视可以提供的任何帮助。

Answer 1

好的，我已经解决了这个问题。不确定它是最优雅的方式，但它适合我。

Revolver插件中加载外部html内容的父html文档已经在调用jQuery加载。当外部文档在用户输入时加载时，外部页面在jQuery之上加载jQuery。但是，当我从这些外部页面中删除jQuery调用时，它们丢失了Colorbox功能。由于我需要jQuery在这些外部页面上执行Colorbox和其他依赖jQuery的插件，我必须找到一种方法来重新加载它而不会干扰父html页面的副本。

由于我的主页内容最初位于div中，因此我将其更改为另一个要加载的外部页面。在我的父html中，我使用了这个脚本：

<script> 
$(function() {
$("#your_content").load("your_home_page.html"); 
}); 
</script>

然后在我的父HTML中，我创建了一个div：

<div id="your_content"></div>

在“your_home_page.html”中，我调用了jQuery。任何其他需要jQuery的现有外部页面都不需要再次调用代码。最初在第一页内容中加载它允许您在多个外部加载的页面上使用Colorbox，而无需在用户单击Colorbox缩略图时加载两次。我相信这将解决除Colorbox之外的其他jQuery插件的冲突，这些插件与Revolver等插件一起使用。

Colorbox插件加载自身的两个实例

1 个答案: