3

如果选择了一个产品页面，我有一个多个产品页面，该产品的 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 版本

4

3 回答 3

0

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

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

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

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

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

于 2013-08-01T12:36:18.253 回答
0

因此，据我了解，在插入 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 绑定的必要初始化。

于 2013-08-05T09:14:41.473 回答
0
  1. 首先，为您的产品和包装器创建一个通用容器包装器。
  2. 将其命名为独特的名称，例如“product-container-{id}”，将 {id} 替换为自定义数字唯一值
  3. 当您通过 ajax 加载新产品时，而不是替换内容检查“#product-container-{requested-id}”是否存在
  4. 如果存在，隐藏每个“product-container-{id}”元素并取消隐藏请求的元素“#product-container-{requested-id}”如果不存在，则创建一个新容器“#product-container-{ requested-id}" 并在该文件夹中启动 jquery fancybox，如下所示： $("#product-container-{requested-id} .fancybox").fancybox();
  5. 现在您应该为会话中已加载的元素提供一个小的 ajax 缓存，而不会破坏功能
于 2013-08-05T08:05:02.133 回答