JQuery динамический контент и лайтбокс конфликт - PullRequest
Новая
       23

JQuery динамический контент и лайтбокс конфликт

1 голос
/ 11 февраля 2012

У меня конфликт относительно некоторых скриптов jquery в том же заголовке документа, один из которых - скрипт, динамически вызывающий контент из навигационного меню (динамическая страница), а другой - лайтбокс (slimbox2) для моей галереи изображений.(также есть хэштег для динамической страницы, называемый jquery.ba-hashchange)

Они оба прекрасно работают сами по себе, и нет проблем, чтобы открыть страницу с галереей прямо в браузере ( здесь , он работает только с первым изображением, потому что я еще не поместил код на другие), но если я открою страницу с помощью скрипта динамического содержимого, лайтбокс не будет работать.

Кажется, это как-то связано с контентом, загружаемым из скрипта динамической страницы, поскольку другой скрипт должен работать с этим контентом.

это динамическая страница: 

$(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 и обычно я создаю сайты, а не кодирую их, поэтому я надеюсь, что вы потерпите мою неопытность.:) Любая помощь приветствуется, так как я часами искал решение.

1 Ответ

1 голос
/ 11 февраля 2012

Питер, вы можете позвонить $("#gallery li a").slimbox(); после загрузки динамического контента, чтобы привязать функцию Slimbox к вашим изображениям.

Вы даже можете просмотреть это решение, открыв консоль javascript и выполнив эту команду.

UPDATE

Также ознакомьтесь с документом API здесь , это может помочь пролить некоторый свет на то, как это решение должно выглядеть и что делает.

Надеюсь, это поможет!

...