Estoy teniendo algunas dificultades en la construcción de un javascript que obtiene todas las imágenes de un div ID, y añadir un enlace a la imagen grande en cada una de las miniaturas. Aquí está mi código.

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

Gracias de antemano!
Saludos.

  • Estás seguro de que quieres hacer esto en Javascript? Cuando he hecho cosas como esta antes, es porque te falta de acceso para el servidor con el entorno de desarrollo. Después de leer a través de este, parece que podría ser más limpio para ello en el lado del servidor (si es posible).
InformationsquelleAutor Breno | 2011-07-11

3 Comentarios

  1. 2

    De asignar innerHTML en cada bucle sin concatenar el código HTML existente.

    Cambio:

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

    a

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

    Um… en realidad estás tratando de agarrar la propiedad de un objeto a partir de una matriz, que no existe:

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

    Debe cambiarse a:

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

    Editar 2

    Nota que en IE, el image.src valor va a ser la ruta completa de la imagen de modo que usted no sólo puede anteponer ‘grande’ para ellos.

    Editar

    ¡Uy, no veo que se fueron sumando a los elementos. Es de suponer que usted desea que las imágenes que en el interior del enlace. En lugar de innerHTML, puede utilizar métodos de DOM para crear los enlaces:

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

    También hay un documento.la colección de imágenes que es todas las imágenes en el documento, pero es probable que usted sólo desea que aquellos en la div.

    • No estoy seguro de que tengo su respuesta (y tratando de no ser un idiota al respecto…) Él tiene que modificar el DOM (o utilice una escalera de JS evento), ya que él está tratando de añadir un anclaje en la parte superior de las imágenes que ya existen. Realmente, esto debe hacerse en el lado del servidor, pero creo que podemos ignorar que, por ahora.
    • Lo siento, se perdió el agregado de enlaces de la parte de respuesta actualizada. Sí, debe ser un servidor del lado de la cosa, pero a veces la gente tiene que tratar de cosas de lado del cliente antes de que se consigue el punto. 🙂
    • Gracias por su ayuda! He añadido ahora el enlace de cada imagen, pero necesito agregar un id y el evento onclick en cada enlace, así que estoy atascado de nuevo… con respecto a la solución de servidor, eso sería genial, si esto no era un hospedado de la CMS y la falta de acceso a añadir código php. De todos modos, si hay una mejor solución en PHP, debe usted mente a exponer que, para nosotros? Saludos!

Dejar respuesta

Please enter your comment!
Please enter your name here