Lightbox in Ajax // Die Lösung

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Lightbox in Ajax // Die Lösung

    Ich habe eine Homepage in der via link ein content in einem <div id="inhalt"> geladen wird.

    Quellcode

    1. <li><a href="#" onclick="ajax_loadContent('inhalt','news.php');return false">News</a></li>

    In der Index Seite (Mutter) habe ich ein lightbox.js....

    Soweit so gut, alles tiptop.
    Nun möchte ich aber im content den Zugriff auf diese lightbox.js haben.
    Das funktioniert nicht.
    Was muss ich im eventhandler ändern, damit ich Zugriff auf dieses Script habe?

    Quellcode

    1. var enableCache = true;
    2. var jsCache = new Array();
    4. var dynamicContent_ajaxObjects = new Array();
    6. function ajax_showContent(divId,ajaxIndex,url)
    7. {
    8. var targetObj = document.getElementById(divId);
    9. targetObj.innerHTML = dynamicContent_ajaxObjects[ajaxIndex].response;
    10. if(enableCache){
    11. jsCache[url] = dynamicContent_ajaxObjects[ajaxIndex].response;
    12. }
    13. dynamicContent_ajaxObjects[ajaxIndex] = false;
    15. ajax_parseJs(targetObj)
    16. }
    18. function ajax_loadContent(divId,url)
    19. {
    20. if(enableCache && jsCache[url]){
    21. document.getElementById(divId).innerHTML = jsCache[url];
    22. return;
    23. }
    25. var ajaxIndex = dynamicContent_ajaxObjects.length;
    26. document.getElementById(divId).innerHTML = '<div id="loader"><img src="../../images/content_loader.gif" width="32" height="32" alt="content is loading!"/></div>';
    27. dynamicContent_ajaxObjects[ajaxIndex] = new sack();
    28. dynamicContent_ajaxObjects[ajaxIndex].requestFile = url; // Specifying which file to get
    29. dynamicContent_ajaxObjects[ajaxIndex].onCompletion = function(){ ajax_showContent(divId,ajaxIndex,url); }; // Specify function that will be executed after file has been found
    30. dynamicContent_ajaxObjects[ajaxIndex].runAJAX(); // Execute AJAX function
    33. }
    36. function ajax_parseJs(inputObj)
    37. {
    38. var jsTags = inputObj.getElementsByTagName('script');
    39. for(var no=0;no<jsTags.length;no++){
    40. eval(jsTags[no].innerHTML);
    41. }
    42. }
    Alles anzeigen

  • "Michel" schrieb:

    ...möchte ich aber im content den Zugriff auf diese lightbox.js haben.


    bedeutet das, dass Mutter und Content zwei unterschiedliche Seiten sind?
    In welchem Quelltext ist denn die lightbox.js bzw. der gepostete JavaScript Code eingebunden?

    Und was genau funktioniert eigentlich nicht? Gibt dein Browser Fehlermeldungen aus?
    Beim Firefox kann man unter Extras > Fehlermeldungen oft aufschlussreiche Infos einsehen

  • Nachtrag

    Es sind zwei verschiedene Seiten.
    Die Index Seite in dem der Content (news.php) geladen wird und
    die lightbox.js eingebunden ist.
    Die Lihtbox funzt auf dieser Seite (Aber nicht im Content)

    Die news.php in dem ich das lightbox.js aufrufen möchte.
    Sie besteht aus codefragmente:
    Also z.B.
    <h1>Title</h1>
    <p>Text blabla und da möchte ich die <a href="picture.jpg" rel="lightbox">Lightbox</a> aufrufen.</p>

    Was passiert ist, dass das Bild im Browser gezeigt wird.
    Die Lightbox Funktion ereignet sich nicht, da der Content nicht auf das Script greifen kann....

  • achso, verstehe

    Deine Hauptseite beherbergt die lightbox.js und lädt per Ajax den inhalt von der news.php.
    In der news.php willst du nun einen Lightbox Aufruf machen...

    JavaScript Funktionen kannst du problemlos auch aus der news.php aufrufen
    Das Problem ist, wie du wohl erkannt hast, dass Lightbox keine JavaScript Links zur Verfügung stellt, sondern mit EventHandlern arbeitet und beim Aufruf der Seite (also noch bevor news.php geladen wird, die Observables lädt)

    Jetzt müssten wir auf dem gleichen Stand sein...

    Das Problem müssen wir nun lösen indem wir
    a) den "EventGrabber", der die Lightbox Links sammelt erneut aufrufen
    oder b) indem wir uns die javascript methode die für das popup verantwortlich ist heraussuchen

    Den Weg (a) halte ich für nicht so gut.. Also habe ich mal in der lightbox.js ausgemacht, was der "eventgrabber" so macht.

    Der Grabber fügt folgenden Listener hinzu

    Quellcode

    1. link.onclick = function () {myLightbox.start(this); return false;}


    Das könntest du also auch direkt nach dem AJAX aufruf starten
    Z.B. so:

    Quellcode

    1. function ajax_showContent(divId,ajaxIndex,url)
    2. {
    3. var targetObj = document.getElementById(divId);
    4. targetObj.innerHTML = dynamicContent_ajaxObjects[ajaxIndex].response;
    6. var anchors = targetObj.getElementsByTagName('a');
    7. for (var i=0; i<anchors.length; i++) {
    8. var anchor = anchors[i];
    9. var relAttribute = String(anchor.getAttribute('rel'));
    10. if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
    11. anchor.onclick = function () {myLightbox.start(this); return false;}
    12. }
    13. }
    15. if(enableCache){
    16. jsCache[url] = dynamicContent_ajaxObjects[ajaxIndex].response;
    17. }
    18. dynamicContent_ajaxObjects[ajaxIndex] = false;
    20. ajax_parseJs(targetObj)
    21. }
    Alles anzeigen



    An dieser Stelle möchte ich aber mal bezweifeln, ob der Post den Titel "Anfänger Frage" tragen darf.

    Außerdem ein großes Lob an die Lightbox Entwickler!! Sehr schöner, aufgeräumter, gut dokumentierter Code!

  • Joop!

    Zuerst mal vielen Dank DoNut (Hast du eine Musikwunschliste?).
    Ich muss präzisieren, ICH bin der Anfänger...
    Es hat wunderbar geklappt.

    Aber jetzt kommt schon die zweite Frage?
    Es sieht dann so aus, dass ich für jeden externen Javascript-Aufruf später meinen
    Ajaxhandler abändern muss oder?
    Oder was meinst Du mit Javascript - Links?
    Konkret spreche ich über ein späteres Formular (Formularabfrage), dass ich im Content einbinden möchte.

  • Ach, kein Problem, der Code sieht schlimmer aus als er ist. So ähnlich steht er schon in der lightbox.js

    "Normale" JavaScript Funktionen die in der index implementiert sind und aus der news.php mit onclick verlinkt werden kannst du problemlos ausführen.

    Und externen HTML Code lädst du doch nur über die Ajax Funktion nach - und in diese hast du ja nun den eventhandler integriert - also keine Probleme.