【问题标题】:jquery dynamic content & lightbox conflictjquery 动态内容和灯箱冲突
【发布时间】:2012-02-12 11:18:12
【问题描述】:

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

它们都可以自己正常工作,直接在浏览器中打开画廊所在的页面也没问题(here,它只适用于第一张图片,因为我没有将代码放在另一个上还没有),但如果我使用动态内容脚本从导航打开页面,灯箱将不起作用。

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

这是动态页面:

$(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 破解者,通常我设计网站而不是编码它们,所以我希望你能忍受我的经验不足。 :) 任何帮助表示赞赏,因为我一直在寻找几个小时来寻找解决方案。

【问题讨论】:

    标签: jquery dynamic lightbox conflict


    【解决方案1】:

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

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

    更新

    还可以查看API document here,它可能有助于了解该解决方案的外观和功能。

    希望这会有所帮助!

    【讨论】:

    • 嗨,感谢您的快速回答 - 它确实有效,但现在图像不显示。加载轮永远加载,我不知道如何解决这个问题。我将函数放在 dynamicpage.js 内的结束标记之前,我什至尝试了不同的位置。我应该把它放在其他地方还是你有什么其他建议?
    • 首先,看起来 $(document) 是错误的,请参阅更新后的答案,我想你可能想试试$("#gallery li a").slimbox()
    • 它有效!感谢十亿的提示!我首先必须调用 unbind 以某种方式从 DOM 元素中释放旧函数,即使我已经删除了所有内容(这很奇怪)。然后我将新函数放在 $mainContent.hide().load 函数之后,这样它现在就可以解决问题了。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-09-30
    • 2019-07-22
    • 1970-01-01
    • 1970-01-01
    • 2016-12-08
    相关资源
    最近更新 更多