gallery with background images on body and previous next buttons
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;
- });