jquery dynamic content & lightbox conflict

Question

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

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

Это похоже на содержимое, загружаемое из сценария dynamicpage, так как другой скрипт должен работать внутри этого содержимого.

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

Answer 1

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

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

UPDATE

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

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