Question

CreateImage函数函数动态创建一个新图像并将它们放入div中。当鼠标悬停在动态创建的图像上时，如何使用fancybox？

function createImage(source) {
    var pastedImage = new Image();
    pastedImage.onload = function () {}
    pastedImage.src = source;
    pastedImage.width = 150;
    pastedImage.height = 150;
    pastedImage.title = 'Click on the image to preview';
    pastedImage.setAttribute('class', 'dynamicPic');
    pastedImage.setAttribute('id', 'dynamicPic');

    var dynamicDiv = document.createElement('div');
    //div.innerHTML = "";
    dynamicDiv.setAttribute('class', 'dynamicDiv');
    dynamicDiv.setAttribute('id', 'dynamicDiv');
    dynamicDiv.appendChild(pastedImage);
    $('#editableDiv').before(dynamicDiv);
}

Answer 1

如果我理解正确，你的函数会生成一个类似

的html

<div id="dynamicDiv" class="dynamicDiv">
    <img id="dynamicPic" class="dynamicPic" width="150" hight="150" title="Click on the image to preview" src="image.jpg" />
</div>

...或理想情况下，您的动态分区#dynamicDiv应附加到包装容器（除非您将其直接附加到body），如：

<div id="wrapper">
    <div id="dynamicDiv" class="dynamicDiv">
        <img id="dynamicPic" class="dynamicPic" width="150" hight="150" title="Click on the image to preview" src="image.jpg" />
    </div>
</div>

如果这是正确的，那么我将使用包装容器选择器在其委托表单中使用.on()方法，如：

$("#wrapper").on("click", ".dynamicPic", function () {
    $.fancybox(this.src, {
        // API options here
    });
    return false;
});

如果您没有使用包装器，请使用body标签$("body")

参见 JSFIDDLE

注意如果要创建多个图像，请尝试为每个图像分配增量ID，因为ID应该是唯一的。

另请注意.on()需要jQuery v1.7 +

编辑：如果您想在鼠标悬停在图片上时触发fancybox，请使用mouseover事件代替click事件代码：

$("#wrapper").on("mouseover", ".dynamicPic", function () { ...

查看更新的 JSFIDDLE

编辑＃2 ：如果使用低于v1.7的jQuery版本，请在其委派 .delegate() ... >形式;）

通过mouseover事件查看更新的 JSFIDDLE 。

注意2 ：fancybox v2.x需要jQuery v1.6或更高版本，因此.delegate()选项仅适用于fancybox v1.3.4。

当鼠标悬停时动态创建图像的appy fancybox

1 个答案: