Question

我正在Visual Studio 2010中开展一个学校项目。

我正在尝试制作一个包含许多图像拇指的页面。当我点击其中一个拇指时，我希望它们出现在fancybox中。问题是，客户端应该能够上传更多图像。所以我想我会让我的javascript用数组打印拇指和图像。

这是在<a>中加载图片的Javascript：

var divbilder;
var bildenavn = ["img/Media/3.jpg", "img/Media/4.jpg"];
var bildethumb = ["<img src='img/Media/3_thumb.jpg' alt='' />", "<img src='img/Media/4_thumb.jpg' alt='' />"];

window.onload = init;

function init() {

divBilder = document.getElementById("divBilder");
genererBilder();
}

function genererBilder() {
for (var i = 0; i < bildenavn.length; i++) {
    var nyttBilde = document.createElement("a");
    nyttBilde.className = "grouped_elements";
    nyttBilde.rel="group1";
    nyttBilde.href = bildenavn[i];
    nyttBilde.innerHTML = bildethumb[i];
    divBilder.appendChild(nyttBilde);
}
}

到目前为止，图像完全加载到我的网站中。

但是当我点击它们时它们不会出现在fancyBox中，我将图像放在空白页面中。

这是我的FancyBox代码：

    $(document).ready(function () {
     $("a.grouped_elements").fancybox();

});

但是，我确实尝试了这段代码： <a class="grouped_elements" rel="group1" href="img/Media/3.jpg"><img src="img/Media/3_thumb.jpg" alt=""/></a> 进入我的HTML。然后fancybox完美地工作。

换句话说，我拥有head-tag中所需的所有fancyBox文件等等。

您可能需要的其他说明：当我在Chrome中“检查元素”时，我的javascript已经使代码行与我在html中手动放置的代码行相同。当然<a>内有不同的href和src。

我正在使用ASP.net c＃和MasterPage。

任何帮助都很感激，我是Jquery和javascript的新手，所以要善良：）

Answer 1

我认为这种情况发生的唯一原因是因为您使用的是fancybox v1.3.x。

如果上述内容正确，则fancybox v1.3.x不支持动态添加元素，这就是为什么您的硬编码链接仅适用于您的js生成的链接。

我使用jQuery .on()方法编写了一个解决方法，您可以find here

您可能需要调整代码以匹配您自己的结构，例如

$("#divBilder").on("focusin", function(){ ....

Javascript打印拇指，当点击它们时，它应该在fancyBox中打开

1 个答案: