Pure javascript image gallery with fwd and bck function

Question

Hi I know it is a partly duplicate question but i had no other option as other questions cover it only partly Making a simple javascript Image gallery. Actually I made this js image gallery code but it not working. Can anyone please help explain what's going on.

JAVASCRIPT

var imageGallery = new Array();
imageGallery[0] = '2.png';
imageGallery[1] = '3.png';
imageGallery[2] = '4.png';
imageGallery[3] = '5.png';
imageGallery[4] = '6.png';
var imgCount = 0;
function next() {
    imgCount++ ;
    document.getElementById("gallery").style.background = 'url(' + imageGallery[imgCount] + ')';
}

function previous() {
    imgCount--;
    document.getElementById("gallery").style.background = 'url(' + imageGallery[imgCount] + ')';    
    }   

HTML

<a href onclick="next(); return = false;">Next</a>
<a href onclick="previous(); return = false;">Back</a>
<div id="gallery" style="background: url(1.png); height:420px; width:744px"></div>

TBN: This is not the final code as next and previous buttons keep on executing as long as they are pressed.

Answer 1

okay.. so here's very simple gallery... that does only what your question's code does.. actually i only corrected it.. so click next and back... and get new images.. i did it very quickly.. so many things are missing for it to be called a gallery.. any ways you can fiddle with it here

changed your markup to..

<a href="#" onclick="next(); return false;">Next</a>
<a href="#" onclick="previous(); return false;">Back</a>
<img id="gallery" src="http://i26.tinypic.com/2hwx3c.jpg" style="height:420px; width:744px" >

and your script to...

var imageGallery = [
 "http://i26.tinypic.com/2hwx3c.jpg" ,      
 "http://i43.tinypic.com/2iqxpg1.jpg" ,
  "http://i40.tinypic.com/2agls15.jpg" ,
  "http://i41.tinypic.com/2ym9f01.jpg",
  "http://i32.tinypic.com/14aa4o7.jpg"
  ];

var imgCount = 0;
var totalImgs = imageGallery.length - 1;

function next() {
    imgCount++ ;
   if(imgCount > totalImgs) imgCount = 0

   document.getElementById("gallery").src = imageGallery[imgCount] ;
}

function previous() {
    imgCount--;
  if(imgCount < 0) imgCount = totalImgs ;
       document.getElementById("gallery").src = imageGallery[imgCount] ;    
    } 

Answer 2

have you considered a different approach to your gallery?

rather than doing an image count add a class to each img that's on top of active then each time the img switches update the classes