javascript - issue with carousel image gallery -


i making simple carousel image gallery. have 2 images , gallery loop first image after last , cannot figure out how functionality working plus previous , next button have stopped working reason. jq/js skills lacking , appreciate working. here jsfiddle of 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;         });     }  }); 

tested fiddle, javascript works well, css missing following attributes:

#gallery-wrapper {     position:relative; }  #gallery {     position:absolute; } 

and code needs executed within

$(window).load(); 

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

http://jsfiddle.net/kgaxa/42/


Comments

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

CSS3 Transition to highlight new elements created in JQuery -