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.
Comments
Post a Comment