CODEWITHSUNDEEP
javascriptjquerycarouselimage-gallery
jsavage980
jsavage980

Reputation: 125

issue with carousel image gallery

I am making a simple carousel image gallery. Currently I have two images and I would like the gallery to loop back to the first image after the last and I cannot figure out how to get this functionality working plus my previous and next button have stopped working for some reason. My jq/js skills are lacking and would appreciate any help to get this working. Here is my jsfiddle of my code [1]: http://jsfiddle.net/jsavage/kGAxa/39/

$(document).ready(function () {
    if (jQuery("#gallery").length) {
        // declare variables
        var totalImages = jQuery("#gallery > li").length,
            imageWidth = jQuery("#gallery > li:first").outerWidth(true),
            totalWidth = imageWidth * totalImages,
            visibleImages = Math.round(jQuery("#gallery-wrapper").width() / imageWidth),
            visibleWidth = visibleImages * imageWidth,
            stopPosition = (visibleWidth - totalWidth);

        jQuery("#gallery").width(totalWidth);

        jQuery("#gallery-prev").click(function () {
            if (jQuery("#gallery").position().left < 0 && !jQuery("#gallery").is(":animated")) {
                jQuery("#gallery").animate({
                    left: "+=" + imageWidth + "px"
                });
            }
            return false;
        });

        jQuery("#gallery-next").click(function () {
            if (jQuery("#gallery").position().left > stopPosition && !jQuery("#gallery").is(":animated")) {
                jQuery("#gallery").animate({
                    left: "-=" + imageWidth + "px"
                });
            }
            return false;
        });
    }

});

Upvotes: 0

Views: 185

Answers (1)

Stano
Stano

Reputation: 8949

Tested your fiddle, javascript works well, only css is missing the following attributes:

#gallery-wrapper {
    position:relative;
}

#gallery {
    position:absolute;
}

And the code also needs to be executed within

$(window).load();

instead of $(document).ready(); event handler to work correctly.

http://jsfiddle.net/kGAxa/42/

Upvotes: 0

Related Questions