使用多個JQuery腳本

我有一個網頁，我需要運行多個JQuery腳本。一個用於燈箱圖像查看器，另一個用於將砌體磚佈局添加到我的圖像中。兩個腳本都很好地獨立工作，但是當它們在一起時，燈箱將不起作用。我究竟做錯了什麼？使用多個JQuery腳本

我這裏有一個問題的演示：砌築：http://shareit.me/jquery.fancybox-1.3.4/scrapbook.html 無磚石：http://shareit.me/jquery.fancybox-1.3.4/scrapbook2.html

點擊太陽鏡看問題。

這是我的源代碼，其中包含兩個腳本。注意，我剝去了一些html：

<!doctype html> 
<html> 

<head> 
<title> Scrapbook </title> 
<link rel="stylesheet" type="text/css" href="styles/scrapbook.css"/> 
<link rel="stylesheet" type="text/css" href="styles/navbar.css"/> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta http-equiv="imagetoolbar" content="no" /> 
<title>FancyBox 1.3.4 | Demonstration</title> 
<script type="text/javascript"  
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script> 
    !window.jQuery && document.write('<script src="jquery-1.4.3.min.js"> 
<\/script>'); 
</script> 
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"> 
</script> 
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"> 
</script> 
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" 
media="screen" /> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     /* 
     * Examples - images 
     */ 

     $("a#example1").fancybox(); 
</script> 
</head> 

<body> 

<div id="page-title"> 
    <p> Colin's Scrapbook </p> 
</div> 
<div id="new-album-button"> 
    <div id="btn" class="create-album"> 
     <p><a href="createalbum.html"> + create album </a></p> 
    </div> 
</div> 

<div id="container"> 
      <div id="brick" class="event"> 
     <div class="event-top"> 
      <img src="http://www.destination360.com/north- 
america/us/florida/images/s/south-florida-beaches.jpg"/> 
     </div> 
     <div class="event-bottom"> 
      <div class="event-bottom-pic"> 
       <img 
src="http://cbsmiami.files.wordpress.com/2010/11/bill_baggs_beach.jpg"/> 
      </div> 
      <div class="event-bottom-pic"> 
       <img src="http://www.best-beaches.com/images/best- 
florida-vacations/florida-best-vacations.jpg"/> 
      </div> 
      <div class="event-bottom-pic"> 
       <img src="http://www.destin-florida- 
mls.com/images/destin12.jpg"/> 
      </div> 
      <div class="event-bottom-pic"> 
       <img src="http://www.rachelmarks.com/wp- 
content/uploads/2009/10/Beach-Florida.jpg"/> 
      </div> 
     </div> 
     <div class="event-title"> 
      <p> Florida 2012 </p> 
     </div> 
    </div> 
    <div id="brick" class="moment"> 
     <a id="example1" href="./example/1_b.jpg"><img alt="example1" 
src="./example/1_b.jpg" /></a> 
    </div> 
</div> 

<script src="jquery/jquery-1.7.1.min.js"></script> 
<script src="jquery/jquery.masonry.min.js"></script> 
<script> 
    $(function(){ 

var $container = $('#container'); 

$container.imagesLoaded(function(){ 
    $container.masonry({ 
    itemSelector : '#brick' 
    }); 
}); 

}); 
</script> 

</body> 

</html>

來源

2012-09-18 user1592953

我應該這樣做的代碼？

相關問題