Question

I’ve a problem with visibility when the value is 0 or the highest number in an array in JavaScript

Here’s my code…

    <!-- script fotoviewer -->
<script>

$("#fotoviewerclick").click(function(){
$("#wrapper").fadeIn(1000);
$("#lightbox").fadeIn(1000);
})

$("#lightboxbtnclose").click(function(){
$("#wrapper").fadeOut(400);
$("#lightbox").fadeOut(400);
})

$("#wrapper").click(function(){
$("#wrapper").fadeOut(400);
$("#lightbox").fadeOut(400);
})

var imagenumber = 0;
var imagenumber_count = 1;
var imagenumber_total_count = imagelist.length;
document.getElementById('counter_total').innerHTML = imagelist.length;



function btnleft(){
    var load = imagelist[imagenumber-=1];
    if (imagenumber_count > 1){imagenumber_count -= 1; document.getElementById('counter').innerHTML = imagenumber_count;}
    if (load) // imagenumber in array boundaries
        document.getElementById('lightboxcontent').innerHTML = load;
    else
        imagenumber = 0;
 }
 function btnright(){
    if (imagenumber_count < imagenumber_total_count) {
    imagenumber_count += 1;
    document.getElementById('counter').innerHTML = imagenumber_count;
  }
    var load = imagelist[imagenumber+=1];
    if (load){ // imagenumber in array boundaries
        document.getElementById('lightboxcontent').innerHTML = load;
   }
    else{
        imagenumber = imagelist.length-1;}
 }
</script>

When the first photo is in the viewer I don’t want that the prev. button is displayed and also when I’m on the last picture, that the next button isn’t desplayed

Is there anyone who can help me?

Thanks!!

PS.:sorry about my bad English, I’m from Belgium

Answer 1

The basic logic is

if your imagenumber_count reaches 0 then visibility:hidden for the left button, else visibility:visible

if your imagenumber_count is the same as the total image count then right button visibility:hidden, else visibility:visible