Generate Buttons with jQuery
<p>Is it possible to create a certain number of 'buttons' based on the number of images with jQuery?</p>

<p>example:</p>

<pre><code>&lt;ul class="gallery"&gt;
    &lt;li&gt;&lt;img src="example-one.png" /&gt;&lt;/li&gt;
    &lt;li&gt;&lt;img src="example-two.png" /&gt;&lt;/li&gt;
    &lt;li&gt;&lt;img src="example-three.png" /&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>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.</p>

<p>I know that:</p>

<pre><code>var imageCount = jQuery('.gallery li').length;
</code></pre>

<p>will give me the number of images, but I'm lost on where to go from there.</p>

<p><strong>Edit:</strong></p>

<p>The output that I'm trying to achieve is something like:</p>

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

<p>Whereby the .gallery-nav would be used to navigate through the images (i.e. clicking 'Button Two' would display example-two.png)</p>
