jQuery的动态内容和灯箱冲突

我有一个相同的文档头，其中之一是从导航菜单（动态页面）动态调用内容的脚本和一个是我的图片库的灯箱（slimbox2）。（还有一个人正在为名为jquery.ba-hashchange的动态页面做hashtag工作）jQuery的动态内容和灯箱冲突

它们都可以正常工作，打开页面直接位于浏览器中的页面没有问题（here，它仅适用于第一张图片，因为我还没有将代码放在其他图片上），但是如果我使用动态内容脚本从导航中打开页面，则灯箱不起作用。

它似乎与从动态页面脚本加载的内容有关，因为其他脚本应在该内容中工作。

这是dynamicpage：

$(function() { 

var newHash  = "", 
    $mainContent = $("#main-content"), 
    $pageWrap = $("#page-wrap"), 
    baseHeight = 0, 
    $el; 


$pageWrap.height($pageWrap.height()); 
baseHeight = $pageWrap.height() - $mainContent.height(); 

$("nav, #logo, #start, footer").delegate("a", "click", function() { 
    window.location.hash = $(this).attr("href"); 
    return false; 
}); 

$(window).bind('hashchange', function(){ 

    newHash = window.location.hash.substring(1); 

    if (newHash) { 
     $mainContent 
      .find("#guts") 
      .fadeOut(200, function() { 
       $mainContent.hide().load(newHash + " #guts", function() { 
        $mainContent.fadeIn(200, function() { 
         $pageWrap.animate({ 
          height: baseHeight + $mainContent.height() + "px" 
         }); 
        }); 
        $("nav a").removeClass("current"); 
        $("nav a[href="+newHash+"]").addClass("current"); 

       }); 
      }); 
    }; 

}); 

$(window).trigger('hashchange'); 
});

下面是我的头被加载脚本（按顺序）：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript" src="js/jquery.ba-hashchange.min.js"></script> 
<script type="text/javascript" src="js/dynamicpage.js"></script> 
<script type="text/javascript" src="js/slimbox2.js"></script>

这将是太乱张贴灯箱的脚本和hashchange脚本在这里，但我希望这会做。这里是一个链接到网站（仍在建设中）：http://www.designhofmann.de/test/ 我不是一个jquery破解者，而且我很规范地设计网站而不是编码它们，所以我希望你能忍受我的缺乏经验。 :)任何帮助表示赞赏，因为我一直在寻找几个小时寻找解决方案。

来源

2012-02-11 Peter H.

Peter，您可以在动态内容加载后将$("#gallery li a").slimbox();称为$("#gallery li a").slimbox();，以将slimbox功能绑定到图像上。

您甚至可以通过打开javascript控制台并运行该命令来预览此解决方案。

UPDATE

还检查了API document here，它可能有助于阐明一下这个解决方案需要的样子，并做一些轻。

希望这会有所帮助！

来源

2012-02-11 18:50:13 shanabus

嗨，感谢您的快速回答 - 它确实有效，但现在图像不显示。装载轮不断加载，我不知道如何解决这个问题。我把函数放在dynamicpage.js里的结束标记之前，我甚至尝试了不同的位置。我应该把它放在别的地方还是你有其他建议？ – 2012-02-11 19:59:52

首先，它看起来像$（文档）是错误的看到更新的答案，我想你可能想尝试'$（“＃gallery li a”）。slimbox（）'。 – shanabus 2012-02-12 03:17:55

它的工作原理！感谢十亿提示！我首先必须调用解除绑定，以便以某种方式从DOM元素中释放旧函数，即使我已删除了所有内容（这很奇怪）。然后我把这个新的函数放在$ mainContent.hide（）。load函数后面，这样它就可以做到这一点。 – 2012-02-12 09:59:20

jQuery的动态内容和灯箱冲突

回答

相关问题