title: How can I add pagination to my site's gallery?
body: <p>I'm trying to integrate CSS pagination into a thumbnail gallery I have set up on my site. So far, I haven't found any tutorials pointing to how to customize pagination into a existing script.</p>
  
  <p>From what I see out there, there are a lots of great CSS pagination solutions. Here's <a href="http://www.webm.ag/2010/01/07/a-collection-of-css-pagination-styles/" rel="nofollow">a page</a> with lots of pagination stylings (no plugins, integration seems to be very general so any will do). I've downloaded a few in hope that a tutorial directs me to what I want but have had no luck so far.</p>
  
  <p>My code is taken from <a href="http://cssglobe.com/articles/link_tech/02.html" rel="nofollow">Pure CSS image gallery</a>. I had a look at integrating <a href="http://www.twospy.com/galleriffic/" rel="nofollow">Gallerific</a> but found the instructions difficult, and so I'm looking for a pure CSS solution.</p>
  
  <p>At first I wanted to used multiple div's for the same gallery, much like Gallerific, only to find JavaScript (or some kind of jQuery solution) would be needed to connect the links necessary for the gallery to work like that.</p>
  
  <p>Currently, the gallery is contained within one div (the way it has to be in order to work). I'm looking at adding pagination just on the thumbs e.g. <code>"...&lt;a href="#prev01"&gt;&lt;img src="images/img/thmbs/01.jpg" alt="" class="thumb" /&gt;
  ..."</code> </p>
  
  <p>And here for purpose of the post is my code so far:</p>
  
  <pre><code>&lt;div id="gallerycenter"&gt;
  
          &lt;ul id="gallery"&gt;
  
              &lt;li&gt;
                  &lt;a href="#prev01"&gt;&lt;img src="images/img/thmbs/01.jpg" alt="" class="thumb" /&gt;
                  &lt;span&gt;&lt;img src="images/img/01.jpg" id="prev01" class="showcase" alt="" /&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#prev02"&gt;&lt;img src="images/img/thmbs/02.jpg" alt="" class="thumb" /&gt;
                  &lt;span&gt;&lt;img src="images/img/02.jpg" id="prev02" class="showcase" alt="" /&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#prev03"&gt;&lt;img src="images/img/thmbs/03.jpg" alt="" class="thumb" /&gt;
                  &lt;span&gt;&lt;img src="images/img/03.jpg" id="prev03" class="showcase" alt="" /&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#prev04"&gt;&lt;img src="images/img/thmbs/04.jpg" alt="" class="thumb" /&gt;
                  &lt;span&gt;&lt;img src="images/img/04.jpg" id="prev04" class="showcase" alt="" /&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#prev05"&gt;&lt;img src="images/img/thmbs/05.jpg" alt="" class="thumb" /&gt;
                  &lt;span&gt;&lt;img src="images/img/05.jpg" id="prev05" class="showcase" alt="" /&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
  
          &lt;/ul&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>The only thing I have thought of but haven't tried is changing the ".thumb" to ".pagination" in order to start the "pagination" in a class form but still, that doesn't give me enough to go on</p>
  
  <p>Can anyone help me piece together the possibilities or confirm that I'm crazy and I'm asking way too much of CSS?</p>