Question

Is it possible to create a certain number of ‘buttons’ based on the number of images with jQuery?

example:

<ul class="gallery">
    <li><img src="example-one.png" /></li>
    <li><img src="example-two.png" /></li>
    <li><img src="example-three.png" /></li>
</ul>

Is there a way to create three nav buttons without adding any more html? I usually do the programming end of sites and not the javascript – jQuery is still new to me.

I know that:

var imageCount = jQuery('.gallery li').length;

will give me the number of images, but I’m lost on where to go from there.

Edit:

The output that I’m trying to achieve is something like:

<ul class="gallery">
    <li><img src="example-one.png" /></li>
    <li><img src="example-two.png" /></li>
    <li><img src="example-three.png" /></li>
</ul>
// Added with jQuery
<ul class="gallery-nav">
    <li><a href="#">Button One</a></li>
    <li><a href="#">Button Two</a></li>
    <li><a href="#">Button Three</a></li>
</ul>

Whereby the .gallery-nav would be used to navigate through the images (i.e. clicking ‘Button Two’ would display example-two.png)

Answer 1

Where would you like your buttons to go? If you want to do something for each of something of another thing, you can use jQuery’s .each() method like this:

$('.gallery img').each(function() {
    alert("This is image " + $(this).attr('src'));
});

And here’s an example of how to do it: http://jsfiddle.net/3HeFS/