binding click event using images to page
<p>I have a menu on my page which changes the source of a particular div(). The items are divs  are located in  a div called foliolist</p>

<p>The div where the image changes is below:</p>

<pre><code>&lt;div id="random"&gt;&lt;img id="grouptabs" src="/u/i/1x0.jpg" /&gt; &lt;/div&gt;
</code></pre>

<p>List of items that change the div, these sit at the absolute bottom of the page</p>

<pre><code>&lt;div class="foliolist"&gt;&lt;a href="/u/i/2.png"&gt;&lt;img src="/v/r.gif"/&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="foliolist"&gt;&lt;a href="/u/i/4.png"&gt;&lt;img src="/v/r.gif"/&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="foliolist"&gt;&lt;a href="/u/i/6.png"&gt;&lt;img src="/v/r.gif"/&gt;&lt;/a&gt;&lt;/div&gt;
</code></pre>

<p>Jquery code that makes it happen</p>

<pre><code>$('.foliolist a').click(function(e) { 
  e.preventDefault(); 
  $('.foliolist a').css('background-color', 'transparent');  
  $(this).css('background-color', '#FFFFFF'); 
  $('#grouptabs').attr('src', $(this).attr('href')); 
});
</code></pre>

<p>List of items appear, first one gets selected by default with the code below</p>

<pre><code>$('#bubbles &gt; #folioholder &gt; .foliolist &gt; a:first').each(function(e){
  $('.foliolist').css('background-color', 'transparent'); 
  $(this).parent().css('background-color', '#FFFFFF');
  $('#grouptabs').attr('src', $(this).attr('href'));
});
</code></pre>

<p>I want to add new navigation bars to give the page a better usage by adding next and previous buttons images to complement the page. These will be located on the left and right side of the page.</p>

<p>If the left next button is clicked the progress in the grid advances, and same for the previous button but it goes backwards.</p>

<p>I don't know how to approach this without looking silly so any help will be appreciated.</p>

<p>Thank you</p>
