¿Cómo aplicar "automáticamente" el atributo Lightbox a las etiquetas de anclaje en una página web?

Estoy trabajando con un script Lightbox para un sitio web que estoy creando para mi trabajo y planeo incluir más de 100 imágenes. ¿Existe una solución mejor cuando se trabaja con tantas imágenes?

¿Hay alguna manera de generar los enlaces html en lugar de escribirlos individualmente ya que tengo tantos?

<a href="gallery/abcc/abcc01.jpg" rel="lightbox[abcc]"><img class="thumb" src="gallery/abcc/thumb.jpg" alt="ABCC Gallery" title="ABCC Gallery"/></a>
<a href="gallery/abcc/abcc02.jpg" rel="lightbox[abcc]"></a>
<a href="gallery/abcc/abcc03.jpg" rel="lightbox[abcc]"></a>
<a href="gallery/abcc/abcc04.jpg" rel="lightbox[abcc]"></a>
<!-- generate each link automatically? -->
<a href="gallery/abcc/abcc99.jpg" rel="lightbox[abcc]"></a>

preguntado el 27 de julio de 12 a las 06:07

1 Respuestas

Referencia: Demostración de jsFiddle Lightbox v2.5.1

Puesto que el Lightbox usos de la secuencia de comandos jQuery marco, puede iterar todos los nombres de clase que tienen thumb, y sobre eso artículo principal, el ancla a enlace, agregue lo necesario rel="lightbox" marcado que se requiere.

HTML:

<a href="http://lokeshdhakar.com/projects/lightbox2/images/examples/image-3.jpg">
    <img class="thumb" src="http://lokeshdhakar.com/projects/lightbox2/images/examples/thumb-3.jpg" alt="gallery" title="Photo 1" />
</a>


<a href="http://lokeshdhakar.com/projects/lightbox2/images/examples/image-4.jpg">
    <img class="thumb" src="http://lokeshdhakar.com/projects/lightbox2/images/examples/thumb-4.jpg" alt="gallery" title="Photo 2" />
</a>


<a href="http://lokeshdhakar.com/projects/lightbox2/images/examples/image-5.jpg">
    <img class="thumb" src="http://lokeshdhakar.com/projects/lightbox2/images/examples/thumb-5.jpg" alt="gallery" title="Photo 3" />
</a>

jQuery:

$(document).ready(function() {

    // Scan the webpage for all class names of 'thumb' that is seen.
    $('.thumb').each(function(){

        // For each class name of 'thumb' found, go to the parent item of that thumb and apply the rel attribute.    
        $(this).parent().attr('rel','lightbox[myGallery]');

    });

});

Dado que el jQuery anterior utilizado se basa en su Diseño de página web HTML, es posible que deba ajustarse a lo que realmente hay en esa página. Él .each(); El método también se puede repetir para otros nombres de clase.

Respondido 27 Jul 12, 07:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.