Question

我有一个多产品页面，如果选择一个，该产品的PHP被加载到div替换多个产品 - 我使用fancybox插件为所选产品的图像库。当我选择一个产品并点击任何图像时，它完美地显示了fancybox画廊。但当我回去选择第二个产品时，它就不会打开...

页面地图如下 - 产品页面包含2（名为type1和type2）按钮和1（动态div）产品页面在加载时加载type1.php

按钮使用以下ajax

$('div#type1_link').on('click',function() {         
        $('div#ajax_div').html("<img src='ajax-load.gif' />").load("type1.php?carmodel=" + $for_url);
        });

我使用像

这样的fancybox

$(".fancybox").fancybox();//for initialisation

<a class="fancybox" rel="group" href="images/<?php echo $row2['img1'] ?>">
    <img src="images/thumbs/<?php echo $row2['img1'] ?>"></a></li>//on images

请告诉我可以解决这个问题的方法。使用最新的fancybox和jquery版本

Answer 1

根据我的理解，您使用ajax在第一个fancybox请求后显示您的内容，这意味着您的jquery命令与动态内容无关。

要使它们相关，您需要使用“倾听”方法，这将响应您的动态内容操作：

假设你的jQuery高于1.7，你应该使用你的fancybox on()方法。应该是这样的：

$(".fancybox").on("click", function(){
   $(this).fancybox();
});

有更好的方法可以做到这一点，但那个应该有用。

Answer 2

首先，为您的产品和包装器创建一个通用的容器包装器。
将其命名为“product-container- {id}”，将{id}替换为自定义数字唯一值
当您通过ajax加载新产品时，如果“＃product-container- {requested-id}”存在，则替换内容检查
如果存在，请隐藏每个“product-container- {id}”元素并取消隐藏所请求的元素“#product-container- {requested-id}” 如果它不存在，则创建一个新容器“#product-container- {requested-id}”并在该文件夹中启动jquery fancybox，如下所示：$（“＃product-container- {requested-id} .fancybox”）。的fancybox（）;
现在，您应该为会话中已加载的元素设置一个小的ajax缓存，而不会破坏功能

Answer 3

所以从我理解你的花哨的盒子在插入div的第二个元素之后不工作。为此，您必须重新初始化这些元素的 facncybox 。

在成功功能上，你必须像这样重新初始化 facncybox

$('div#type1_link').on('click',function() {         
    $('div#ajax_div').html("<img src='ajax-load.gif' />").load("type1.php?carmodel=" + $for_url,function(){
        $(".fancybox").fancybox();//This initialized for dynamic content
    });
});

您还应该检查您的动态内容是否也具有精美框的正确属性以及不同类型的jquery绑定的必要初始化。

fancybox2无法在ajax上进行第二次调用

3 个答案: