Holen Sie sich alle Bilder aus einem div-ID und das hinzufügen von links

Ich bin mit einigen Schwierigkeiten Gebäude ein javascript, das bekommt alle Bilder, die von einem div-ID, und fügen Sie einen link zu dem großen Bild auf jede der miniaturen. Hier ist mein code.

 <html>
 <head>
 <script>
        function addGallery(){
            var getDivId = document.getElementById("imgContainer");
            var images = getDivId.getElementsByTagName("img").innerHTML;
            for(var i=0; i<images.length; i++) {
                getDivId.innerHtml = "<a id='g2Image' href='big/" + images[i].src + "'>" + images[i].src + "</a>";
            }
        }    
    </script>
 </head>
 <body onload='addGallery()'>
 <div id="imgContainer">
 <img src="/images/galleries/img1.jpg" alt="" width="125" height="100" />
 <img src="/images/galleries/img1.jpg" alt="" width="125" height="100" />
 <img src="/images/galleries/img1.jpg" alt="" width="125" height="100" />
 <img src="/images/galleries/img1.jpg" alt="" width="125" height="100" />
 <img src="/images/galleries/img1.jpg" alt="" width="125" height="100" />
 </div>
 </body>
 </html>

Vielen Dank im Voraus!
Grüße.

Sind Sie sicher, dass Sie dies tun wollen in Javascript? Wenn ich Dinge getan, wie dies vor, weil ich keinen Zugang zu den server-side-Entwicklungsumgebung. Nach der Lektüre dieser, wie es scheint, könnte es sauberer sein, dies zu tun auf der server-Seite (wenn möglich.)

InformationsquelleAutor Breno | 2011-07-11

  1. 2

    Zuweisung innerHTML in jeder Schleife ohne die Verkettung des bestehenden HTML.

    Ändern:

    getDivId.innerHTML = "<a id='g2Image' href='big/" + images[i].src + "'>" + images[i].src + "</a>";

    zu

    getDivId.innerHTML += "<a id='g2Image' href='big/" + images[i].src + "'>" + images[i].src + "</a>";

    InformationsquelleAutor Chandu

  2. 2

    Ähm... du bist tatsächlich versucht zu schnappen Sie sich eine Objekt-Eigenschaft aus einem array, das nicht existiert:

    var images = getDivId.getElementsByTagName("img").innerHTML;

    Sollte geändert werden zu:

    var images = getDivId.getElementsByTagName("img");

    InformationsquelleAutor John Green

  3. 0

    Edit 2

    Hinweis als im IE, der image.src Wert den vollständigen Pfad des Bildes, so können Sie nicht nur prepend 'big/'.

    Bearbeiten

    Oops, habe nicht gesehen, dass Sie waren das hinzufügen Eines elements. Vermutlich wollen Sie, dass die Bilder im link. Anstelle von innerHTML, können Sie mit DOM-Methoden zur Gestaltung der links:

    function addGallery(){

    var getDivId = document.getElementById("imgContainer");
    var path = '/images/galleries/';
    var images = toArray(getDivId.getElementsByTagName("img"));

    var oA = document.createElement('a');
    var a, image, parent;

    for(var i=0, iLen=images.length; i<iLen; i++) {
        image = images[i];
        a = oA.cloneNode(false);
        a.href = image.src.replace(path, '/big' + path);
        image.parentNode.appendChild(a);
        a.appendChild(image);
    }
}

function toArray(a) {
  var result = [];
  var i = a.length;
  while (i--) {
    result[i] = a[i];
  }
  return result;
}

    Gibt es auch eine Dokument.Bilder Sammlung, dass alle Bilder im Dokument, aber wahrscheinlich wollen Sie nur diejenigen, die in den div.

    Ich bin nicht sicher, ob ich Ihre Antwort (und versucht nicht gemein sein)... Er hat zum ändern des DOM (oder verwenden Sie ein straight-JS-event), da er versucht, fügen Sie einen Anker auf der Oberseite der Bilder, die bereits vorhanden sind. Wirklich, sollte dies auf server-Seite, aber ich denke, wir können ignorieren, dass für jetzt.
    Sorry, verpasste die zusätzlichen links, die Teil—Antwort, aktualisiert. Ja, sollte ein server-Seite-Sache, aber manchmal sind die Leute müssen versuchen, das Zeug client-Seite, bevor Sie den Punkt zu kommen. 🙂
    Danke für Eure Hilfe! Hinzugefügt habe ich jetzt den link zu jedem Bild, aber ich muss hinzufügen, eine id und onclick-Ereignis auf jeden link, so bin ich wieder stecken... Über die server-side-Lösung, das wäre toll, wenn dies nicht ein hosted CMS und kein Zugriff zum hinzufügen von php-code. Sowieso, wenn es eine bessere Lösung in PHP, sollte Sie etwas dagegen zu setzen, der für uns? Grüße!

    InformationsquelleAutor RobG

Schreibe einen Kommentar