Question

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

The div where the image changes is below:

<div id="random"><img id="grouptabs" src="/u/i/1x0.jpg" /> </div>

List of items that change the div, these sit at the absolute bottom of the page

<div class="foliolist"><a href="/u/i/2.png"><img src="/v/r.gif"/></a></div>
<div class="foliolist"><a href="/u/i/4.png"><img src="/v/r.gif"/></a></div>
<div class="foliolist"><a href="/u/i/6.png"><img src="/v/r.gif"/></a></div>

Jquery code that makes it happen

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

List of items appear, first one gets selected by default with the code below

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

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.

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

I don’t know how to approach this without looking silly so any help will be appreciated.

Thank you

Answer 1

Little comment : Your last snippet of code could be replaced by $('#bubbles > #folioholder > .foliolist > a:first').click();

On the actual question :

You’ll have to create your buttons and bind them event to retrieve the currently displayed picture to retrieve the following/previous img.

$('#btnNext').click(function(){
    //get current picture displayed
    var currPicSrc = $('#grouptabs').attr('src');
    var foundPic = false;
    var nextPic = "";        
    $('.foliolist a img').each(function(){
        if (foundPic) {nextPic = $(this).attr('src'); return false; }
        if ($(this).attr('src') == currPicSrc) {
            foundPic = true;
        }
    });
    if (nextPic == "") {
        nextPic = $('.foliolist:first a img').attr('src');
    }
    $('#grouptabs').attr('src', nextPic);
});

$('#btnPrev').click(function(){
    //get current picture displayed
    var currPicSrc = $('#grouptabs').attr('src');
    var foundPic = false;
    var prevPic = "";        
    $('.foliolist a img').each(function(){
        if ($(this).attr('src') == currPicSrc) {
            foundPic = true;
            return false;
        }
        if (!foundPic) {prevPic = $(this).attr('src'); }
    });
    if (prevPic == "") {
        prevPic = $('.foliolist:last a img').attr('src');
    }
    $('#grouptabs').attr('src', prevPic);
});

It’s a way to do it (I’m not managing the case where you click previous on the first pic/click next on the last pic).

Another way would be to add ids to your image and toy with them (especially easy if you’d use name like <img id="whatever1" /><img id="whatever2" /> [...] so you could get the current pic with the number in the id and then loop over that.