How do I stop javascript php gallery at last or first image?

Question

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, but I cannot get them to stop going right at the end and left on the first, they just keep scrolling through nothing. My .js code looks like this:

var currentImage = 1;
var numImages = 0;

$(document).ready( function(){

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

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

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

});

function moveLeft()
{
    if ( currentImage < numImages )
    {
    $('.gallery-ul').animate( { 'marginLeft' : '-=600px' } , 500, 'swing' );
    $currentImage++;
    }
    if ( currentImage > numImages )
    {
    $('.rightbtn').css('display' , 'none');
    }
}

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

And my .php looks like this:

        <ul class="gallery-ul">
        <?php
        $files = glob("pics/interior/*.*");
        for ($i=1; $i<count($files); $i++)
    {
    $num = $files[$i];
    echo '<li class="gallery-li"><img src="'.$num.'" class="gallery-img"/></li>';
    }
        ?>
        </ul>

Can someone PLEASE tell me what I'm doing wrong?

I have this already on server at http://north49builders.com/gallery1.php if you want to see what I'm talking about.

Thanks!

Answer 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++;
    });
});

    function moveLeft()
    {
        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++;
        }


    }

    function moveRight()
    {

        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;">