Question

When I include the js for lightbox it prevents my other js from running; which means my jquery nav and slide down effects for

divs stop working. Am I including the files in the correctly? I tried the endconflict() in the top of my script but that didn’t work. Any help is greatly appreciated.
Thx

<link rel="stylesheet" type="text/css" href="jquery-lightbox-0.5/css/jquery.lightbox-0.5.css" media="screen" /> <link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-responsive.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css"> 
***<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />***         
<script type="text/javascript" src="js/jquery.js"></script>
<script src="javascript/jquery-1.7.1.min.js"></script>
<script src="javascript/bootstrap.js"></script>
***<script type="text/javascript" src="../lightbox2.05/js/prototype.js"></script>
<script type="text/javascript" src="../lightbox2.05/js/scriptaculous.js"></script>
<script type="text/javascript" src="../lightbox2.05/js/lightbox.js"></script>***
<script>

<a href="images/Screen Shot 2012-02-27 at 9.51.49 PM.png" rel="lightbox">
<img src="../../images/Screen Shot 2012-02-27 at 9.56.49 PM.png" height="180" width="460" alt="">               
</a>

Answer 1

The problem is that lighbox uses pieces of Scriptaculous and Prototype, which are other javascript libraries like jQuery is. They don’t play nicely with each, so you have to tell jQuery to avoid them.

Rather than the typical document ready setup that you normally put your jQuery code in:

$(document).ready(function() {
  // Stuff to do as soon as the DOM is ready;
});

You will instead wrap your jQuery code in this:

jQuery(document).ready(function($){
  // Stuff to do as soon as the DOM is ready;
});

You can read more about handling javascript library conflicts here: http://docs.jquery.com/Using_jQuery_with_Other_Libraries