CODEWITHSUNDEEP
jqueryhtmljquery-pluginslightbox
jwbreedlove
jwbreedlove

Reputation: 617

How to "automatically" apply the Lightbox attribute to anchor tags on a webpage?

I am working with a Lightbox script for a website I am making for my work and I am planning on including around 100+ images. Is there a better solution when working with so many images?

Is there a way to generate the html links rather than type them individually since i have so many?

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

Upvotes: 1

Views: 1397

Answers (1)

arttronics
arttronics

Reputation: 9955

Reference: jsFiddle Lightbox v2.5.1 Demo

Since the Lightbox script uses jQuery framework, you can iterate all the class names that have thumb, and on that parent item, the anchor a link, add the necessary rel="lightbox" markup that's required.

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]');

    });

});

Since the above jQuery used is based on your HTML webpage layout, it may need to be adjusted to what's actually on that page. The .each(); method can be repeated for other class names too.

Upvotes: 1

Related Questions