CODEWITHSUNDEEP
jquerybuttonbackgroundgallery
fresatura
fresatura

Reputation: 3

simple gallery next prev button background images

I am trying to create a very simple gallery with background images on the body tag and previous /next buttons. Therefor I created an array containing the images and calling the actual index. Unfotrunately I can not call the first image bg_01.Jpg to start with and my prev/next buttons stop at the third image? I also created a fiddle here: Any help would be appreciated.

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;
});

Upvotes: 0

Views: 312

Answers (1)

kidwon
kidwon

Reputation: 4524

Your array has a mistake:

['bg_01, bg_02',...

you've missed to close 'bg_01' and open 'bg_02' strings

so your array's first element is 'bg_01, bg_02'

Upvotes: 2

Related Questions