Elsi: JS-Accordion blockiert JQuery-Lightbox und andersrum!

Hallo,

ihr seid jetzt meine letzte Hoffnung. Ich sitze seit gestern Abend an folgendem Problem:

Ich habe ein Accordion-Menü und woltle nun noch eine Lightbox einbinden.

  
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>  
<script type="text/javascript" src="js/accordian-src.js"></script>  
<script type="text/javascript" src="js/jquery.colorbox.js"></script>  

<script type="text/javascript">  
	  
        var lastID;  
	var sendSuccess = false;  
	  
        $(document).ready(function() {  
				//Examples of how to assign the ColorBox event to elements  
				$("a[rel='lightbox']").colorbox({transition:"none", width:"75%", height:"75%"});  
				});

Theoretisch alles richtig, jedoch befürchte ich, dass die Dateien sich gegenseitig irgendwie verwirren. Denn die Lightbox funktioniert absolut null.

Ist es möglich, dass man es irgendwie unterbindet, dass die einzelnen JS-Dateien sich blockieren bzw. Konflikte hervor rufen?

Den gesamten Quellcode könnt ihr euch hier anschauen:

Website

Und die Lightbox stammt von hier:

Lightbox

LG
Elsi

  1. Theoretisch alles richtig,

    Eigentlich nicht.

    jedoch befürchte ich, dass die Dateien sich gegenseitig irgendwie verwirren. Denn die Lightbox funktioniert absolut null.

    Verwirren ist gut - dein Accordion überschreibt schlichtweg jQuery Welches ebenfalls innerhalb einer $-Funktion läuft.

    Ist es möglich, dass man es irgendwie unterbindet, dass die einzelnen JS-Dateien sich blockieren bzw. Konflikte hervor rufen?

    jQuery kann das.

    1. Hallo,

      ihr seid jetzt meine letzte Hoffnung. Ich sitze seit gestern Abend an folgendem Problem:

      Ich habe ein Accordion-Menü und woltle nun noch eine Lightbox einbinden.

        
      <script type="text/javascript" src="js/jquery-1.3.2.js"></script>  
      <script type="text/javascript" src="js/accordian-src.js"></script>  
      <script type="text/javascript" src="js/jquery.colorbox.js"></script>  
      
      
      <script type="text/javascript">  
      	  
              var lastID;  
      	var sendSuccess = false;  
      	  
              $(document).ready(function() {  
      				//Examples of how to assign the ColorBox event to elements  
      				$("a[rel='lightbox']").colorbox({transition:"none", width:"75%", height:"75%"});  
      				});
      

      Theoretisch alles richtig, jedoch befürchte ich, dass die Dateien sich gegenseitig irgendwie verwirren. Denn die Lightbox funktioniert absolut null.

      Ist es möglich, dass man es irgendwie unterbindet, dass die einzelnen JS-Dateien sich blockieren bzw. Konflikte hervor rufen?

      Den gesamten Quellcode könnt ihr euch hier anschauen:

      Website

      Und die Lightbox stammt von hier:

      Lightbox

      LG
      Elsi

    2. Erstmal Danke für die schnelle Antwort.

      Hab mir die Sache durchgelesen und verstehe sie im Grunde auch.

      Jedoch bin ich mir nicht sicher wie ich in meinem Fall da vorgehe, da ich ja 3 js-Dateien habe.

      Könntest du mir das Script von der Seite deines Links evtl. so anpassen, dass ich weiß wo ich was notieren muss?

      Muss ich in meinen js-Dateien auch etwas ändern?

      LG
      elsi

      1. Jedoch bin ich mir nicht sicher wie ich in meinem Fall da vorgehe, da ich ja 3 js-Dateien habe.

        jQuery, ein script welches jQuery-konform ist und eines welches dieselbe $-Funktion wie jQuery nutzt.

        Wie wärs, wenn du einfach mal die no-conflict-geschichte von jQuery testest? Ist ja nicht so, dass du eine Live-Seite hättest wo du durch ausprobieren etwas zerstören könntest.

        Muss ich in meinen js-Dateien auch etwas ändern?

        Nein.

        1. So ich hab's mal eingesetzt und bisschen rumgetestet.
          Nur ist nun mein gesamter Inhalt weg. Seh nur noch meine Background-Datei.

          Der Spaß schaut jetzt so aus:

          <script type="text/javascript" src="js/jquery-1.3.2.js"></script>  
          <script type="text/javascript" src="js/accordian-src.js"></script>  
          <script type="text/javascript" src="js/jquery.colorbox.js"></script>  
            
          <script type="text/javascript">  
          	//wird benötigt um sich die letzte Seite zu merken  
          	var lastID;  
          	var sendSuccess = false;  
            
            
          jQuery.noConflict();  
            
               // Use jQuery via jQuery(...)  
               jQuery(document).ready(function(){  
                 jQuery("div").hide();  
               });  
            
               // Use Accordion with $(...), etc.  
               $('someid').hide();  
            
            
                  $(document).ready(function() {  
          				//Examples of how to assign the ColorBox event to elements  
          				$("a[rel='lightbox']").colorbox({transition:"none", width:"75%", height:"75%"});  
          				});
          
          1. <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
            hier bindest du jQuery ein

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

            Beachte die Reihenfolge (siehe Doku).

            jQuery.noConflict();

            hier schickst du jQuery in den No-Conflict-Mode und sprichst von diesem Punkt an jQuery mit "jQuery" ansatt "$" an.

            // Use jQuery via jQuery(...)
                 jQuery(document).ready(function(){
                   jQuery("div").hide();
                 });

            Hier blendest du sämtliche div-Elemente aus.

            // Use Accordion with $(...), etc.
                 $('someid').hide();

            hier machst du "irgendwas" mit prototype - du hast nur den Kommentar verändert - was natürlich nichts bringt.

            $(document).ready(function() {
            //Examples of how to assign the ColorBox event to elements
            $("a[rel='lightbox']").colorbox({transition:"none", width:"75%", height:"75%"});
            });

              
            Und hier benutzt du nun doch wieder jQuery mit der $-Funktion anstatt jQuery  
              
            Lesen!  
              
            Wenn du das nämlich gemacht hättest, wäre dir zumindest ansatzweise ein gemeinsamkeit zwischen vorher  
              
            `$(document).ready(function() {});`{:.language-javascript}  
              
            und nachher  
            ~~~javascript
              
            jQuery.noConflict();  
            jQuery(document).ready(function(){});
            

            aufgefallen.

            1. Hallo,

              entschuldige bitte, dass ich dich so viele Nerven koste. Bin JS-Anfänger und bin mir einfach über das ein oder andere nicht ganz klar, was natürlich Leuten die sich oft damit beschäftigen nicht passiert.

              Hab unten nun nochmal meinen veränderten Code gepostet. Bin mir nicht sicher, ob ich dich da überall richtig verstanden habe.
              Hab jQuery.noConflict nun direkt mit eingefügt wenn ich jquery einbinde.
              Dann kommt mein Accordion, was eigenständig ist und dann meine Lightbox, die ja aber mit Jquery "kommuniziert".

              Speziell bei der Sache mit dem Accordion und "someid" hab ich absolut keine Ahnung was ich da konkret anstellen soll.

              Fakt ist, dass mein Menü funktioniert. Die Lightbox jedoch nicht. Bild wird nach wie vor in einer neuen Seite geöffnet.

              Ich hoffe du hast noch einen kleinen Nerv übrig, um mir zu helfen.

              LG,
              Elsi

                
              <script type="text/javascript" src="js/jquery-1.3.2.js">  
              jQuery.noConflict();  
                   jQuery(document).ready(function(){  
                     jQuery("div").hide();  
                   });  
              </script>  
                
              <script type="text/javascript" src="js/accordian-src.js"></script>  
              <script type="text/javascript" src="js/jquery.colorbox.js"></script>  
              <script type="text/javascript">  
                
              	//wird benötigt um sich die letzte Seite zu merken  
              	var lastID;  
              	var sendSuccess = false;  
                
                
                   // Use Accordion with $(...), etc.  
                   $('someid').hide();  
                
                
                      jQuery(document).ready(function() {  
              				//Examples of how to assign the ColorBox event to elements  
              				jQuery("a[rel='lightbox']").colorbox({transition:"none", width:"75%", height:"75%"});  
              				});
              
              1. Bin JS-Anfänger und bin mir einfach über das ein oder andere nicht ganz klar, was natürlich Leuten die sich oft damit beschäftigen nicht passiert.

                Ich erwarte aber zumindest, dass man sich mit den grundlagen auseinandersetzt und zumindest den Versuch unternimmt etwas selbst zu machen bzw zu verstehen. einfach nur ein Beispiel 1:1 kopieren, besonders wenn es sich auf das prototype-Framework bezieht kann nicht funktionieren.

                Hab unten nun nochmal meinen veränderten Code gepostet. Bin mir nicht sicher, ob ich dich da überall richtig verstanden habe.

                Nein, da stimmt etwas gewaltig nicht.

                Hab jQuery.noConflict nun direkt mit eingefügt wenn ich jquery einbinde.

                Das wird nicht funktionieren - da entweder das Script hinter "scr" geladen wird oder der Elementinhalt.

                Dann kommt mein Accordion, was eigenständig ist und dann meine Lightbox, die ja aber mit Jquery "kommuniziert".

                Dein Accordion stellt die "andere" Library dar - wie im Beispiel prototype.js

                Including jQuery before Other Libraries ist hierbei interessant.

                Speziell bei der Sache mit dem Accordion und "someid" hab ich absolut keine Ahnung was ich da konkret anstellen soll.

                Die someid-Sache ist ein Codebeispiel mit prototype und besitzt für dich keine Relevanz.

                Fakt ist, dass mein Menü funktioniert. Die Lightbox jedoch nicht. Bild wird nach wie vor in einer neuen Seite geöffnet.

                Ja - die Fehlerkonsole leuchtet auch wie ein Weihnachtsbaum.

                [code lang=javascript]
                <script type="text/javascript" src="js/jquery-1.3.2.js">
                jQuery.noConflict();
                     jQuery(document).ready(function(){
                       jQuery("div").hide();
                     });
                </script>

                2 script Elemente.

                das ("div").hide(); ist immer noch Unsinn - es ist der jQuery-Beispielcode - du willst das Accordion ausführen.

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

                Doku lesen - reihenfolge (bzw wo das Script mit $ ausgeführt wird ist wichtig - sieh dir die Quelltexte und suche funktionen die mit $ beginnen, alle die nicht zu jQuery gehören, sind als potentielle "Feinde" zu betrachten und die Reihenfolge muss beachtet werden).

                Tendentiell ist es ggf. schlauer wenn du dich durchgängig auf ein Framework konzentrierst und entweder alles mit jQuery umsetzt oder nichts - Accordions für jQuery gibts wie Sand am Meer.

                Empfehlenswert ist z.B. jQuery UI (bzw. das Accordion-Widget). Das ist auf jeden Fall solide Programmiert.

                1. Ha, ich hab's! ;)

                  Eine Frage trotzdem noch:

                  Es läuft jetzt zwar alles. Also Lightbox funktioniert, wenn man auf den Link meiner Hauptseite klingt. Jedoch nicht korrekt, wie du evtl. sehen wirst.
                  Hast du eine Vermutung woran das liegen könnte? Die zugehörigen Bilddateien sind korrekt verlinkt.

                  Trotzdem erstmal vielen vielen Dank. Auch Danke, dass du nicht einfach nur die Lösung des Rätsels gepostet hast und somit mir die eigentliche Arbeit abgenommen hast, sondern mir immer 'nen Wink mit dem Zaunspfahl geschickt hast. Bis der gesessen hat, hat zwar lang gedauert und das tut mir zwar leid, aber: ich bin dankbar ohne Ende! :)

                  LG
                  Elsi

                  1. Die zugehörigen Bilddateien sind korrekt verlinkt.

                    Sind sie nicht.
                    http://de.selfhtml.org/html/verweise/projektintern.htm#dateien

                    Die Grafiken sind im CSS-File relativ verlinkt - die Pfade von dortaus betrachtet stimmen aber nicht.

                    Trotzdem erstmal vielen vielen Dank. Auch Danke, dass du nicht einfach nur die Lösung des Rätsels gepostet hast und somit mir die eigentliche Arbeit abgenommen hast,

                    Für das eigentliche Abnehmen der Arbeit verlange ich Geld :) deine Webseite sieht aber nicht so aus als würdest du Geld dafür bezahlen wollen, dass jemand anderer sie macht.

                    Bis der gesessen hat, hat zwar lang gedauert und das tut mir zwar leid, aber [...]

                    1. Ist das ein kompliment, dass die Seite ganz annehmbar aussieht oder das ganze Gegenteil? ;)

                      Das mit  den Links hab ich jetzt auch bemerkt und hab mir zwischenzeitlich auch noch eine andere Lightbox zugelegt. Funktioniert jetzt alles bestens. Jetzt muss nur noch das CSS angepasst werden und ich kann meinen Tag als "ging doch!" abhaken!

                      Nochmal ein großes Danke. Ich hoffe man trifft sich nicht noch weitere hundert mal! ;)

                      LG und noch 'ne angenehme Woche!
                      Elsi

                      1. Ist das ein kompliment, dass die Seite ganz annehmbar aussieht oder das ganze Gegenteil? ;)

                        Das war nicht wertend - also weder positiv noch negativ.

                        Da steht etwas von "Studentin" und das impliziert: "kein Geld, mache alles selbst" :)

                        Das mit  den Links hab ich jetzt auch bemerkt und hab mir zwischenzeitlich auch noch eine andere Lightbox zugelegt.

                        Wenn du bei jQuery bleiben willst, ist die thickbox durchaus brauchbar.

  2. Hallo,

    da das Forum hier jetzt schon so oft geholfen hat in den vergangen Tagen, möchte ich auch heute euch bitten mir zu helfen. Das Internet bringt mich mal wieder nicht weiter und so langsam frage ich mich, ob es eine Lösung gibt, die auch mal bei mir funktioniert.

    Das Problem:

    Ich binde eine Lightbox in meine Website ein. Diese funktioniert jedoch nur auf der Startseite. Lade ich dann meine portfolio.php in meinen content-div wird das dortige Bild trotz rel-Verweis auf die Lightbox normal im Browser geöffnet und nicht in der Lightbox.

    Wenn ichalles richtig verstanden habe, liegt das daran, dass beim Laden des Lightbox.js meine Bilder im Portfolio noch nicht bekannt sind.

    Wie mache ich die Lightbox auch für meine Unterseiten verfügbar?
    GetScript habe ich bereits versucht, bin mir jedoch mehr als unsicher, ob ich dies an der richtigen Stelle eingefügt habe.

    portfolio.php

    <table width="100%">  
    <tr>  
      
    <td col width="25%">  
    </td>  
      
    <td col width="75%">  
      
    <p class="portfolio">  
    BLA  
    </p>  
      
    <div class="gallery">  
    <a href="img/about_header.jpg" rel="lightbox"><img src="img/about_header.jpg"></a>  
    </div>  
      
    </td>  
      
      
    </tr>  
    </table>  
    
    

    Bin für jeden guten Rat dankbar!

    LG
    elsi

    1. Wenn du die Seite aufgrufst, wir das Lightbox-JavaScript ausgeführt und hängt an sämtliche Dinge die seinem Selektor entsprechen ein entsprechendes Event.

      Wenn du nun den Inhalt der Seite austauscht, fügst du neue Dinge ein, die vorher noch nicht da waren und auch noch kein entsprechendes Event erhalten haben.

      Ergo: keine Lightbox.

      Das ist eines der Probleme beim dynamischen Austauschen von Inhalten mittels JavaScript.

      Ein simpler Workaround: führe die Funktion, die die Eventhandler für die Lightbox hinzufügt nach jedem Seitenwechsel (oder austausch des Inhalts) erneut aus.

      Besser:
      Verzichte auf JavaScript für dieses Feature - ohne JavaScript geht da nämlich sonst garnix.

      1. Hallo suit,

        Danke erstmal, dass du wieder versuchst zu helfen. Hatten ja gestern dann doch noch Erfolg.

        Ein simpler Workaround: führe die Funktion, die die Eventhandler für die Lightbox hinzufügt nach jedem Seitenwechsel (oder austausch des Inhalts) erneut aus.

        -> Was und vorallem wo genau muss ich da denn wie einbinden, dass es klappt?

        Besser:
        Verzichte auf JavaScript für dieses Feature - ohne JavaScript geht da nämlich sonst garnix.

        -> Dann fällt ja die Lightbox weg?! Möchte auch nicht unbedingt auf JS verzichten, da mir die Verwendung davon schließlich auch hilft es Stück für Stück zu verstehen.

        LG
        elsi

        1. Was und vorallem wo genau muss ich da denn wie einbinden, dass es klappt?

          jQuery("a[rel='lightbox']").colorbox();

          Das sorgt dafürl dass alle a-Element mit einem rel-Attribut dessen wert 'lightbox' ist mit der Funktion/Methode colorbox() ausgestattet werden.

          Diese gilt es beim Wechseln von Inhalten erneut aufzurufen - allerdings dürfen dabei die links, die bereits ein entsprechendes Event haben nicht noch ein zweites bekommen.

          Dann fällt ja die Lightbox weg?!

          Jein - du sollst nicht auf JavaScript gänzlich verzichten, du sollst nur essentielle Features erst ohne JavaScript umsetzen und dann mit JavaScript "dekorieren".

          Das tut die von dir verwendete Lightbox auch - wenn kein JavaScript vorhanden ist, wird der Link im href-Attribut des a-Elements verfolgt. Dasselbe muss bei den Links im Menü ebenfalls passieren.

          Aktuell ist die Seite jedenfalls ohne JavaScript nicht bedienbar.

          1. Ich dank dir. Werd die Sache heute Abend mal testen und mir den Rest auch mal anschauen. Bericht folgt dann spätestens morgen.

            Frage:

            jQuery("a[rel='lightbox']").colorbox();

            Das muss dann in meine portfolio.php samt script-Kopf. Richtig verstanden?

            LG
            elsi

            1. Das muss dann in meine portfolio.php samt script-Kopf. Richtig verstanden?

              Wenn du weiterhin mit JavaScript wechselst nicht - wenn du portfolio.php als separates HTML-Dokument betrachtest, muss dies natürlich vollständig sein.

              Dazu eignen sich unter PHP Funktionen wie etwa include(), require() oder readfile()