Kai E: Script funktioniert nicht mehr (jquery lightbox / popup box)

Hallo Leute,

ich hoffe ihr könnt mir bei meinem Problem helfen,
es würde mich freuen!

Im Head-Bereich meiner Website habe hatte ich zunächst das jquery-Skript für eine Bilder-Galerie drin:

  
 <link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />  
 <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />  
  
  
 <script type="text/javascript" src="js/jquery.js"></script>  
 <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>  
 <script type="text/javascript">$(function() { $('#gallery a').lightBox(); });</script>

Funktionierte auch!

Jetzt habe ich dem Head-Bereich ein weiteres Skript hinzugefügt. Damit soll eine Popup-Box geöffnet werden um Inhalt auf derselben Seite zu öffnen.

Wenn ich das PopupBox-Skript drin habe, funktioniert das für die jquery Gallerie nicht mehr - habt ihr eine Ahnung warum?

Hier der Code vom PopupBox-Skript:

  
 <link rel="stylesheet" type="text/css" href="popupbox/modalPopLite.css" />  
	  
  
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
 <script type="text/javascript" src="popupbox/modalPopLite.min.js"></script>  
  
 <script type="text/javascript">// <![CDATA[  
 $(function () {  
   $('#popup-wrapper').modalPopLite({ openButton: '#clicker', closeButton: '#close-btn' });  
 });  
 // ]]></script>

Zusammen sieht das ganze wie folgt aus:

  
<head>  
 <link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />  
 <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />  
  
 <script type="text/javascript" src="js/jquery.js"></script>  
 <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>  
 <script type="text/javascript">$(function() { $('#gallery a').lightBox(); });</script>  
  
 <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>  
 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>  
  
  
  
  
 <link rel="stylesheet" type="text/css" href="popupbox/modalPopLite.css" />  
	  
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
 <script type="text/javascript" src="popupbox/modalPopLite.min.js"></script>  
  
 <script type="text/javascript">// <![CDATA[  
 $(function () {  
   $('#popup-wrapper').modalPopLite({ openButton: '#clicker', closeButton: '#close-btn' });  
 });  
 // ]]></script>  
  
 <style type="text/css"></style>  
</head>  
  
  
  
<body>  
 <div id="gallery">  
  <a href="#">  
  <img src="#" width="650" border="0">  
  </a>  
 </div>  
  
  
 <div id="clicker">Click here!</a></div>  
 <div id="popup-wrapper" style="background-color: #fff;">  
  Inhalt  
  <a id="close-btn" href="#">Close</a>  
 </div>  
</body>  

  1. Hallo Kai,

    zwei Rückfragen:

    Was meldet die Fehlerkonsole?

    <script type="text/javascript" src="js/jquery.js"></script>

    ...

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

      
    Warum bindest du zwei (verschiedene?) Versionen von jquery ein?  
      
      
    Gruß, Jürgen  
    
    
    1. Hallo Jürgen,

      (ich entschuldige mich schon im voraus, ich bin nämlich nicht sehr vertraut mit Skripten. Ich habe diese lediglich nach vorgegebene Schritten für "Dumme" eingefügt. Ich kann eigentlich nur Designen, HTML und CSS)

      eine Fehlerkonsole habe ich nicht.
      Es ist so, dass ich beim lokalen Test der Seite gemerkt habe, dass die Gallerie nicht mehr funktioniert - dafür aber die PopupBox.

      D.h. für mich, dass ich durchs Einfügen des PopupBox-Codes die Funktion für die Galerie neutralisiert habe - aber warum, wie kann ich es umgehen?

        
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
      

      Ist deswegen drin, weil ich ihn mit der PopupBox eingefügt habe. Nehme ich ihn raus, funktioniert nur die Gallerie.

      Ich sag schonmal Danke,
      Kai

      1. Hallo Kai,

        (fast?) jeder Browser hat eine Fehler- oder Javascriptkonsole, im Firefox öffnest du sie mit "Strg Umschalt J", im IE 9 mit "F12".

        Zu deinem Problem: du lädtst das jquery-Script zweimal, möglicherweise in zwei verschiedenen Versionen. Ich vermute, dass hier Teile des Scripts oder Variablen überschrieben werden. Da ich allerdings von jquery keine Ahnung habe, kann ich dir hier auch nicht mehr weiterhelfen.

        Aber auch für andere Helfer wäre die Meldung aus der Fehlerkonsole oder ein Link zu deiner Testseite wichtig.

        Gruß, Jürgen

        1. Fehler: TypeError: $("#gallery a").lightBox is not a function
          Quelldatei: file:///C:/.../index.html

          Zeile:

          21 -  <script type="text/javascript">$(function() { $('#gallery a').lightBox(); });</script>  
          
          

          Danke Jürgen!

          1. Fehler: TypeError: $("#gallery a").lightBox is not a function
            Quelldatei: file:///C:/.../index.html

            Zeile:

            21 -  <script type="text/javascript">$(function() { $('#gallery a').lightBox(); });</script>

            
            >   
            >   
            > Danke Jürgen!  
              
            Folgendes ist passiert.  
            1\. Du hast jQuery eingebunden und jQuery hat die globale Variable $ erstellt  
            2\. Du hast lightBox eingebunden. Lightbox fügt seine Funktionalitäten jQuerys $ hinzu.  
            3\. Du bindest jQuery erneut ein und $ wird überschrieben. Lightbox' Ergänzungen sind jetzt wieder weg.  
              
            Also die zweite jQuery-Einbindung stumpf löschen und alles sollte wieder funktionieren.  
            
            
            1. Folgendes ist passiert.

              1. Du hast jQuery eingebunden und jQuery hat die globale Variable $ erstellt
              2. Du hast lightBox eingebunden. Lightbox fügt seine Funktionalitäten jQuerys $ hinzu.
              3. Du bindest jQuery erneut ein und $ wird überschrieben. Lightbox' Ergänzungen sind jetzt wieder weg.

              Also die zweite jQuery-Einbindung stumpf löschen und alles sollte wieder funktionieren.

              Wenn ich die zweite jQuery-Einbindung lösche, funktioniert das zweite Skript wieder nicht (die PopupBox)....

              Sorry aber ich bin schon langsam am verzweifeln

              1. Benutzt du vielleicht unterschiedliche jQuery-Versionen?

                1. Hallo 1UnitedPower,

                  Benutzt du vielleicht unterschiedliche jQuery-Versionen?

                  das ist auch meine Vermutung.

                  Gruß, Jürgen