jquery動的コンテンツとライトボックスコンフリクト

Question

ナビゲーションメニュー（dynamicpage）からコンテンツを動的に呼び出すスクリプトと、イメージギャラリー用のライトボックス（slimbox2）である同じドキュメントヘッダー内のいくつかのjqueryスクリプトに関する競合があります。 （jquery.ba-hashchangeというダイナミックページのハッシュタグ作業を行うものもあります）

これらはどちらも問題なく動作し、ギャラリーが直接ブラウザにあるページを開いても問題ありません（here、it私はまだ他のものにコードを入れていないので、最初の画像でのみ動作します）が、動的コンテンツスクリプトを使用してナビゲーションからページを開くと、ライトボックスは機能しません。

他のスクリプトがそのコンテンツ内で動作する必要があるため、動的ページのスクリプトから読み込まれるコンテンツと関係があるようです。

これは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> 

それをライトボックスのスクリプトを投稿するにはあまりにも厄介だろうここにはハッシュチェンジのスクリプトがありますが、これが実現することを願っています。 http://www.designhofmann.de/test/ 私はjqueryの亀裂ではありません。そして、通常、私はそれらをコーディングするのではなくウェブサイトをデザインしています。私はあなたが私の未熟さに耐えることを願っています。 :)私は解決策を見つけるために何時間も探してきたので、どんな助力も感謝しています。

Answer 1

Peter、ダイナミックコンテンツが読み込まれた後に$("#gallery li a").slimbox();に電話をかけて、スリムボックス機能を画像にバインドすることができます。

このソリューションをプレビューするには、javascriptコンソールを開いてそのコマンドを実行することもできます。

UPDATE

またAPI document hereをチェックアウト、それはこのソリューションが見えるように必要とやっていることにいくつかの光を当てるに役立つことがあります。

希望すると便利です。