jquery动态内容&;灯箱冲突

jquery动态内容&;灯箱冲突,jquery,dynamic,lightbox,conflict,Jquery,Dynamic,Lightbox,Conflict,我对同一文档头中的一些jquery脚本存在冲突,其中一个是从导航菜单(dynamicpage)动态调用内容的脚本,另一个是我的图像库的lightbox(slimbox2)。(还有一个为名为jquery.ba hashchange的dynamicpage做hashtag工作) 它们各自都可以很好地工作,直接在浏览器中打开图库所在的页面也没有问题(因为我还没有将代码放在其他图像上,所以它只适用于第一个图像),但是如果我使用动态内容脚本从导航打开页面,lightbox就无法工作 这似乎与从dynami

我对同一文档头中的一些jquery脚本存在冲突,其中一个是从导航菜单(dynamicpage)动态调用内容的脚本,另一个是我的图像库的lightbox(slimbox2)。(还有一个为名为jquery.ba hashchange的dynamicpage做hashtag工作)

它们各自都可以很好地工作,直接在浏览器中打开图库所在的页面也没有问题(因为我还没有将代码放在其他图像上,所以它只适用于第一个图像),但是如果我使用动态内容脚本从导航打开页面,lightbox就无法工作

这似乎与从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');
});
以下是从我的标题加载的脚本(按此顺序):


在这里发布lightbox脚本和hashchange脚本会太麻烦,但我希望这样就可以了。以下是该网站的链接(仍在建设中):
我不是一个jquery高手,通常我设计网站而不是编码,所以我希望你能容忍我的经验不足。:)非常感谢您的帮助,因为我已经花了数小时寻找解决方案。

彼得,您可以致电
$(“#gallery li a”).slimbox()加载动态内容后,将slimbox功能绑定到图像

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

更新

另外,请查看,它可能有助于了解此解决方案需要的外观和正在执行的操作


希望这有帮助

Peter,你可以调用
$(“#gallery li a”).slimbox()加载动态内容后,将slimbox功能绑定到图像

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

更新

另外,请查看,它可能有助于了解此解决方案需要的外观和正在执行的操作


希望这有帮助

您好,谢谢您的快速回答-它确实有效,但现在图像没有显示。装载轮一直在装载,我不知道如何修复。我将函数放在dynamicpage.js中的结束标记之前,甚至尝试了不同的位置。我应该把它放在别的地方吗?或者你有什么其他建议吗?首先,看起来$(文档)是错误的。请看更新的答案,我想你可能想试试
$(“#gallery li a”)。slimbox()
。它可以工作!非常感谢你的提示!我首先必须调用unbind,以某种方式从DOM元素中释放旧函数,即使我删除了所有内容(这很奇怪)。然后我将新函数放在$mainContent.hide().load函数之后,这样它现在就可以完成这个任务了。嗨,谢谢你的快速回答-它确实有效,但现在图像没有显示出来。装载轮一直在装载,我不知道如何修复。我将函数放在dynamicpage.js中的结束标记之前,甚至尝试了不同的位置。我应该把它放在别的地方吗?或者你有什么其他建议吗?首先,看起来$(文档)是错误的。请看更新的答案,我想你可能想试试
$(“#gallery li a”)。slimbox()
。它可以工作!非常感谢你的提示!我首先必须调用unbind,以某种方式从DOM元素中释放旧函数,即使我删除了所有内容(这很奇怪)。然后我把新函数放在$mainContent.hide().load函数后面,这样它现在就可以完成这个任务了。
<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>