How Do I Stop Javascript Php Gallery At Last Or First Image?

I have a simple jquery and javascript image gallery that uses php to gather images and put them in li tags. The gallery works (almost) and will go left and right through the images

Solution 1:

Update Jquery code to this.

var currentImage = 1;
var numImages = 0;

$(document).ready( function(){

    $('.rightbtn').click(function(){
            moveLeft();
    });

    $('.leftbtn').click(function(){
            moveRight();
    });

    $('.gallery-li').each(function(){
            numImages++;
    });
});

    functionmoveLeft()
    {
        if ( (currentImage+1)  == numImages )
        {
            $('.rightbtn').css('display' , 'none');
            $('.leftbtn').css('display' , 'block');
        }else{
            $('.rightbtn').css('display' , 'block');
            $('.leftbtn').css('display' , 'block');
        }
        if ( currentImage < numImages )
        {
            $('.gallery-ul').animate( { 'marginLeft' : '-=600px' } , 500, 'swing' );
            currentImage++;
        }


    }

    functionmoveRight()
    {

        if ( (currentImage - 1)  == 1 )
        {
            $('.leftbtn').css('display' , 'none');
            $('.rightbtn').css('display' , 'block');
        }else{
            $('.leftbtn').css('display' , 'block');
            $('.rightbtn').css('display' , 'block');
        }

        if ( currentImage <= numImages )
        {
            $('.gallery-ul').animate( { 'marginLeft' : '+=600px' } , 500, 'swing' );
            currentImage--;
        }

    }

And in your html code add this

<div class="leftbtn" style="display: none;">