Lightbox funktioniert nicht mehr bei mit Javascript verschobenen Galerien

  • Lightbox funktioniert nicht mehr bei mit Javascript verschobenen Galerien

    Hallo zusammen,

    ich verzweifle gerade an einer Lightbox-Galerie in Wordpress.


    Problem ist, dass ich mittels Javascript Inhalte eines Containers in einen anderen Container kopiere. Das Ganze mit document.getElementById("xxx").innerHTML. Der kopierte Inhalt enthält eine Wordpress-Galerie. Nach dem Kopieren funktioniert die Lightbox der neu entstandenen Galerie nicht mehr. Alle anderen Galerien, als auch die ursprüngliche Galerie, da funktioniert die Lightbox fehlerfrei.


    Ich hab irgendwo gelesen, dass Lightbox nach dem Laden der Seite das HTML durchgeht und für jedes verlinkten Bild irgendetwas setzt. Ich müsste nun diesen "Durchlauf" nach dem Kopieren einfach nochmal ausführen.


    Ich bräuchte also einfach nur einen Codeschnipsel den ich in meine Funktion einfüge, gleich hinter dem Kopieren. Ich habe es mit dem „Responsive Lightbox“ Plugin und dem „FancyBox“ Plugin probiert.

    Ich habe jedoch keine Ahnung von Ajax und JQerys. In den Plugin-files lese ich nur Bahnhof. Ich sehe auch gar nicht was die Plugins machen, und was die wo hinsetzen. Im HTML-Code fällt mir gar nichts auf. :/


    Ich weiß nicht wo ich ansetzen soll. Bin für jede Hilfe dankbar.

  • Hallo Vincent,

    gern.

    Also der Javascript-Code zum Kopieren ist recht simpel.

    Quellcode

    1. function moveGallery() {
    2. /* Content kopieren */
    3. var content = document.getElementById("content").innerHTML;
    4. document.getElementById("holder").innerHTML = content;
    5. }



    Die Galerie selbst liegt in einem <div id="content"> mit weiteren Elementen. Der gesamte Inhalt dieses div's wird in ein anderes div kopiert. Die Gallery selbst ist die Wordpress Standard-Gallery. Hier mal das HTML verkürzt.

    Quellcode

    1. <div id="content">
    2. ...
    3. <div id="gallery-2" class="gallery galleryid-203 gallery-columns-4 gallery-size-full">
    4. <dl class="gallery-item">
    5. <dt class="gallery-icon landscape">
    6. <a rel="fancybox" class="fancybox" href="..."><img src="..." class="attachment-full size-full" alt="" srcset="..." sizes="..." height="..." width="..."></a>
    7. </dt>
    8. ...
    9. <br style="clear: both">
    10. </dl>
    11. </div>
    12. </div>
    13. ...
    14. <div id="holder">
    15. </div>
    Alles anzeigen

    Da die Galerie im #content bereits beim Seitenaufbau geladen wird, hat diese auch alle class-Bezeichnungen von Fancybox. Aber irgendwas scheint bei der Kopie zu fehlen.

    Ich hab jetzt gerade noch das hier gefunden, ein Instruction für die Fancybox
    fancyapps.com/fancybox/


    Quellcode

    1. Attach fancyBox when the document is loaded.
    2. <script type="text/javascript">
    3. $(document).ready(function() {
    4. $(".fancybox").fancybox();
    5. });
    6. </script>
    Das müsste ja dann die selbe Funktion sein, die ich aufrufen muss, wenn ich an der Seite mit Javascript etwas verändert habe. Wenn ich jedoch die Funktion in meine obige Funktion reinsetze, oder nur das $(".fancybox").fancybox(); dann bekomme ich im Browser nur ein "TypeError: $(...).fancybox is not a function".



    Kann man jQuery-Befehle direkt in Javascript reinsetzen? Oder liegt der Fehler nur daran, dass er die Funktion nicht finden konnte?