Search jQuery

jQuery Forum

in Using jQuery • 8 years ago

Hello,

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

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'];
var ImgLength = Images.length;
$("body").css("background-image", "url(../img/" + Images[0] + ".jpg)");
$('#panel .left').click(function () {
if (ImgLength > 0) {
ImgLength = ImgLength - 1;
} else {
ImgLength = 0;
}
$("body").css("background-image", "url(../img/" + Images[ImgLength] + ".jpg)");
return false;
});
$('#panel .right').click(function () {
if (ImgLength < Images.length - 1) {
ImgLength = ImgLength + 1;
} else {
ImgLength = 0;
}
$("body").css("background-image", "url(../img/" + Images[ImgLength] + ".jpg)");
return false;
});