jQuery Forum

I am trying to create a gallery with prev/next buttons for background images on the body tag.

The images are in an array and called by index.

I can't call the first image and my buttons stop working at img 3

Any help would be highly appreciated.

I also created a fiddle here

2. var Images = ['bg_01, bg_02', 'bg_03', 'bg_04', 'bg_05', 'bg_06', 'bg_07', 'bg_08', 'bg_09', 'bg_10', 'bg_11', 'bg_12'];
3. var ImgLength = Images.length;
4. $("body").css("background-image", "url(../img/" + Images[0] + ".jpg)");
5. $('#panel .left').click(function () {
6.     if (ImgLength > 0) {
7.         ImgLength = ImgLength - 1;
8.     } else {
9.         ImgLength = 0;
10.     }
11.     $("body").css("background-image", "url(../img/" + Images[ImgLength] + ".jpg)");
12.     return false;
13. });
14. 
    
15. $('#panel .right').click(function () {
16.     if (ImgLength < Images.length - 1) {
17.         ImgLength = ImgLength + 1;
18.     } else {
19.         ImgLength = 0;
20.     }
21.     $("body").css("background-image", "url(../img/" + Images[ImgLength] + ".jpg)");
22.     return false;
23. });