Utilisation de plusieurs scripts JQuery

J'ai une page Web dans laquelle j'ai besoin d'exécuter plusieurs scripts JQuery. L'un est pour une visionneuse d'images de boîte à lumière, et l'autre est d'ajouter la disposition de briques de maçonnerie à mes images. Les deux scripts fonctionnent très bien individuellement, mais quand ils sont ensemble, la boîte à lumière ne fonctionnera pas. Qu'est-ce que je fais mal?Utilisation de plusieurs scripts JQuery

J'ai une démonstration du problème: avec la maçonnerie: http://shareit.me/jquery.fancybox-1.3.4/scrapbook.html sans maçonnerie: http://shareit.me/jquery.fancybox-1.3.4/scrapbook2.html

Cliquez sur les lunettes de soleil pour voir le problème.

Voici ma source pour celle qui a les deux scripts. Avis, j'ai dépouillé quelques 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>

Source

2012-09-18 user1592953

Qu'est-ce que ce code devrait faire?

Questions connexes