JQuery Problem mit Lightbox

parafi

Mitglied
Guten Tag

Ich habe gerade angefangen mit JQuery mich rumzuschlagen.
Ich habe ganz oben auf meiner Page eine Box, die mittels JQuery sich vergrössert wenn auf den Pfeil nach unten geklickt wird. Sie fährt also dynamisch runter und wieder hoch bei einem erneuten klick.
Das Ganze funktioniert super auf meiner Index.html Seite.
Jedoch auf meiner nächsten HTML Seite (dort habe ich Lightbox2.05 im Einsatz) funktioniert das Ganze nicht mehr.
Hier mein Code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="keywords" content="">
<meta name="description" content="" >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
 
<link rel="stylesheet" href="format.css" type="text/css">
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>


<script>
$(document).ready(function() {
alert("hi");
 var i = 0;
  $("#motion_btn").click(function(){ 
   if(i % 2 == 0) {
    $("#motion_btn").css('background', 'url(images/pfeil_oben.png) no-repeat top center'); 
    $("#motion").animate({ 
     height: "+200px", 
     opacity: 0.3   
    }, 1500 );
    i++;
   }
   else if(i % 2 == 1) {
    $("#motion_btn").css('background', 'url(images/pfeil_unten.png) no-repeat top center');
    $("#motion").animate({ 
     height: "23px", 
     opacity: 0.5   
    }, 1500);
    i++;
   }
 });  
});
</script>
</head>
<body >
<!-- Hier kommen noch diverse Tabellen vor -->
<a href="images/image-1.jpg" rel="lightbox[roadtrip]"><img src="images/image-1.jpg" height="72" width="72"></a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]"><img src="images/image-1.jpg" height="72" width="72"></a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]"><img src="images/image-1.jpg" height="72" width="72"></a>

</body>
</html>

Nun frage ich ja ab, ob das Dokument "ready" ist. Jedoch erhalte ich die Meldung aus dem alert("hi"); nie. D.h. das Dokument ist noch nicht ready. Weshalb?
Hoffe ihr könnt mir helfen!

Besten Dank schon im Voraus.

Freundliche Grüsse
parafi
 

Maniac

Erfahrenes Mitglied
Google mal nach "jQuery-no Conflict"
Da Lightbox die Lib Prototype verwendet und jQuery und Prototype sich ohne weiteres nicht vertragen gitb es den jQuery-no Conflict Mode.