jquery动态内容&灯箱冲突

时间:2012-02-11 18:42:12

标签: jquery dynamic lightbox conflict

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

它们都可以自行工作,打开画廊直接在浏览器中的页面(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破解和normaly我设计网站而不是编码,所以我希望你忍受我的经验不足。 :)感谢任何帮助,因为我一直在寻找解决方案的几个小时。

1 个答案:

答案 0 :(得分:1)

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

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

<强>更新

同时查看API document here,它可能有助于阐明此解决方案需要看起来和正在做什么。

希望这有帮助!