How do I stop javascript php gallery at last or first image? -
i have simple jquery , javascript image gallery uses php gather images , put them in li tags. gallery works (almost) , go left , right through images, cannot them stop going right @ end , left on first, keep scrolling through nothing. .js code looks 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 .php looks this:
<ul class="gallery-ul"> <?php $files = glob("pics/interior/*.*"); ($i=1; $i<count($files); $i++) { $num = $files[$i]; echo '<li class="gallery-li"><img src="'.$num.'" class="gallery-img"/></li>'; } ?> </ul>
can please tell me i'm doing wrong?
i have on server @ http://north49builders.com/gallery1.php if want see i'm talking about.
thanks!
update jquery
code 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 html
code add this
<div class="leftbtn" style="display: none;">
Comments
Post a Comment