Получить все изображения из Div ID и добавить ссылки - PullRequest
Новая
       3

Получить все изображения из Div ID и добавить ссылки

1 голос
/ 12 июля 2011

У меня возникли некоторые трудности при создании javascript, который получает все изображения из идентификатора div и добавляет ссылку на большое изображение на каждом из эскизов.Вот мой код. 

 <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>

Заранее спасибо!Привет.

Ответы [ 3 ]

2 голосов
/ 12 июля 2011

Гм ... вы на самом деле пытаетесь получить свойство объекта из массива, которого не существует: 

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

Следует изменить на: 

var images = getDivId.getElementsByTagName("img");
2 голосов
/ 12 июля 2011

Вы присваиваете innerHTML в каждом цикле без объединения существующего HTML.

Изменение: 

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

на 

getDivId.innerHTML += "<a id='g2Image' href='big/" + images[i].src + "'>" + images[i].src + "</a>";
0 голосов
/ 12 июля 2011

Редактировать 2

Обратите внимание, что в IE значение image.src будет полным путем к изображению, поэтому вы не можете просто добавить к ним 'big /'.

Редактировать

Упс, не видел, что вы добавляете элементы A. Предположительно, вы хотите, чтобы изображения были внутри ссылки. Вместо innerHTML вы можете использовать методы DOM для создания ссылок: 

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;
}

Существует также коллекция document.images , которая содержит все изображения в документе, но, скорее всего, вам нужны только те, которые находятся в div.

...