JS: alle <img> mit <a> umschließen

[aJunkie]

Hallo Forum,

ich nutze Joomla und den JCEMediaBox, womit ich Bilder in einer Lightbox anzeigen lassen kann. Das Problem ist, dass ich jedes Bild einzeln bearbeiten muss.
Um das Javascript automatisch machen zu lassen, wollte ich alle Bilder im contentbereich auswählen und mit einem <a> umschließen, damit die Bilder in der Lightbox geöffnet werden.

<div id="main">
<img src="BILD.JPG" width="klein" height="klein" />
</div>

soll automatisch werden zu

<div id="main">
<a class="jcepopup" type="image" href="BILD.JPG" target="_blank"><img src="BILD.JPG" width="klein" height="klein" /></a></div>

Offensichtlich muss ich alle Bilder im Bereich main auswählen: document.getElementById("main") und darin alle Bilder: getElementsByTagName("img") und dann alle Bilder mit <a> und den dazugehörigen Attributen hinzufügen.

Ich komme nicht weiter:

<script type="text/javascript">
var contentbereich = document.getElementById("main");
var selectImg = contentbereich.getElementsByTagName("img");
var newLink = document.createElement("a"); // jetzt noch href, class, type und target einbauen...?!
// und dann? for schleife?
</script>

Wäre sehr dankbar. Vielen Dank!

 

[threadi]

Du müsstest mit

var imgs = document.getElementsByTagName("img");

die Liste der Bilder als Array laden. Dann mit einer for-Schleife durch eben diese Liste gehen und jedes Element darin zuerst in einen Link (appendChild()) und dann diesen Link anstelle des Originalbildes in den DOM einfügen (ebenfalls per appendChild() oder InsertBefore()).

 

[aJunkie]

Dachte ich mir. :-) Vielen Dank. Muss nur noch die Syntax hinkriegen.

 

[aJunkie]

Ich nochmal kurz.
Ich glaube, ich bin auf dem richtigen Weg, aber an der Ausgabe scheitert's.

function IMGsLightbox() {
    var cy_selectedContent = document.getElementById("main");
    var cy_imgs = cy_selectedContent.getElementsByTagName("img");
    
    for ( var cy_img in cy_imgs ) {
    
        var cy_newLink = document.createElement("a");    
            cy_newLink.setAttribute("href", cy_imgs[cy_img].src);
            cy_newLink.setAttribute("class", "jcepopup");
            cy_newLink.setAttribute("type", "image");
cy_newLink.setAttribute("target", "_blank");
        
        
        var cy_newChild = cy_newLink.appendChild(cy_imgs[cy_img]); // dem Link das Foto hinzufügen
        
        //und nu?

            //cy_imgs[cy_img].appendChild(cy_newChild);
            // alert(cy_imgs[cy_img] = '<a href="' + cy_imgs[cy_img].src + '" class="jcepopup" type="image"><img src="' + cy_imgs[cy_img].src + '" /></a>');
    }
}

Ich habe einiges ausprobiert. Entweder das Bild wird gar nicht mehr angezeigt oder am Ende des Dokumentes ohne Link.
Tipps? :)

 

[threadi]

Die Herausforderung ist, dass Du das Bild durch Link+Bild ersetzen willst. Daher müsstest Du Link+Bild hinter oder vor dem Original-Bild einfügen und dann das Original entfernen. Daher müsstest Du das Original auch zunächst klonen.

// Klonen
var newimg = cy_imgs[cy_img].cloneNode();
// Link erzeugen
[..]
// geklontes Bild in Link einfuegen
var cy_newChild = cy_newLink.appendChild(newimg);
// Link+Bild vor dem Original-Bild in DOM einfuegen
cy_imgs[cy_img].insertBefore(cy_newChild);
// Original-Bild entfernen
cy_imgs[cy_img].parentNode.removeChild(cy_imgs[cy_img]);

 

[aJunkie]

Vielen Dank.

Ich muss irgendwas übersehen. Es ändert sich praktisch nichts.

function cy_autoLightbox() {
    var cy_selectedContent = document.getElementById("main");
    var cy_imgs = cy_selectedContent.getElementsByTagName("img");
    
    for ( var cy_img in cy_imgs ) {
        
        // Klonen
        var cy_newImg = cy_imgs[cy_img].cloneNode();
    
        var cy_newLink = document.createElement("a");    
            cy_newLink.setAttribute("href", cy_imgs[cy_img].src);
            cy_newLink.setAttribute("class", "jcepopup");
            cy_newLink.setAttribute("type", "image");
            cy_newLink.setAttribute("target", "_blank");
        
        // geklontes Bild in Link einfuegen
        var cy_newChild = cy_newLink.appendChild(cy_newImg);
        
            // Link+Bild vor dem Original-Bild in DOM einfuegen
            cy_imgs[cy_img].insertBefore(cy_newChild);
            // Original-Bild entfernen
            cy_imgs[cy_img].parentNode.removeChild(cy_imgs[cy_img]);        

    }
}

 

[threadi]

Schreib mal statt

cloneNode();

->

cloneNode(true);

Und insertBefore() habe ich dir auch nicht richtig geschrieben, laut Anleitung hat das auch 2 Parameter:
SELFHTML: JavaScript / Objektreferenz / node

Also:

cy_imgs[cy_img].parentNode.insertBefore(cy_newChild, cy_imgs[cy_img]);

Momentan sollte das bei dir 2 JavaScript-Fehler ergeben die Du in der JavaScript-Konsole sehen solltest.

 

[aJunkie]

Leider funktioniert das nicht. cloneNode(true) hatte ich sogar schon eingesetzt, weil ich nach allen Methoden gegooglet hatte.

function cy_autoLightbox() {
    
    var cy_selectedContent = document.getElementById("main");
    var cy_imgs = cy_selectedContent.getElementsByTagName("img");
    
    for ( var cy_img in cy_imgs ) {
        
        // Klonen
        var cy_newImg = cy_imgs[cy_img].cloneNode(true);
    
        // Link erzeugen
        var cy_newLink = document.createElement("a");    
            cy_newLink.setAttribute("href", cy_imgs[cy_img].src);
            cy_newLink.setAttribute("class", "jcepopup");
            cy_newLink.setAttribute("type", "image");
            cy_newLink.setAttribute("target", "_blank");
        
        
        // geklontes Bild in Link einfuegen
        var cy_newChild = cy_newLink.appendChild(cy_newImg);
        
            // Link+Bild vor dem Original-Bild in DOM einfuegen
            cy_imgs[cy_img].parentNode.insertBefore(cy_newChild, cy_imgs[cy_img]);
            // Original-Bild entfernen
            cy_imgs[cy_img].parentNode.removeChild(cy_imgs[cy_img]);
    }
    
    return true;
}

Um die Uhrzeit habe ich keine Kraft mehr zu debuggen. Gute Nacht X)

Ganz schnell edit:
Falls es hilft; so rufe ich die Funktion auf: <body onLoad="cy_autoLightbox();">