Index: jcarousel/lib/jquery.jcarousel.jsmin.js =================================================================== --- jcarousel/lib/jquery.jcarousel.jsmin.js (revision 5477) +++ jcarousel/lib/jquery.jcarousel.jsmin.js (working copy) @@ -1,10 +1,10 @@ -/* +/*! * jCarousel - Riding carousels with jQuery * http://sorgalla.com/jcarousel/ * * Copyright (c) 2006 Jan Sorgalla (http://sorgalla.com) - * Dual licensed under the MIT (MIT-LICENSE.txt) - * and GPL (GPL-LICENSE.txt) licenses. + * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) + * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * * Built on top of the jQuery library * http://jquery.com @@ -13,85 +13,4 @@ * http://billwscott.com/carousel/ */ -(function($){$.fn.jcarousel=function(o){return this.each(function(){new $jc(this,o);});};var defaults={vertical:false,start:1,offset:1,size:null,scroll:3,visible:null,animation:'normal',easing:'swing',auto:0,wrap:null,initCallback:null,reloadCallback:null,itemLoadCallback:null,itemFirstInCallback:null,itemFirstOutCallback:null,itemLastInCallback:null,itemLastOutCallback:null,itemVisibleInCallback:null,itemVisibleOutCallback:null,buttonNextHTML:'
',buttonPrevHTML:'
',buttonNextEvent:'click',buttonPrevEvent:'click',buttonNextCallback:null,buttonPrevCallback:null};$.jcarousel=function(e,o){this.options=$.extend({},defaults,o||{});this.locked=false;this.container=null;this.clip=null;this.list=null;this.buttonNext=null;this.buttonPrev=null;this.wh=!this.options.vertical?'width':'height';this.lt=!this.options.vertical?'left':'top';var skin='',split=e.className.split(' ');for(var i=0;i');this.container=this.container.parent();}else if(!this.container.hasClass('jcarousel-container')) -this.container=this.list.wrap('
').parent();}else{this.container=$(e);this.list=$(e).find('>ul,>ol,div>ul,div>ol');} -if(skin!=''&&this.container.parent()[0].className.indexOf('jcarousel-skin')==-1) -this.container.wrap('
');this.clip=this.list.parent();if(!this.clip.length||!this.clip.hasClass('jcarousel-clip')) -this.clip=this.list.wrap('
').parent();this.buttonPrev=$('.jcarousel-prev',this.container);if(this.buttonPrev.size()==0&&this.options.buttonPrevHTML!=null) -this.buttonPrev=this.clip.before(this.options.buttonPrevHTML).prev();this.buttonPrev.addClass(this.className('jcarousel-prev'));this.buttonNext=$('.jcarousel-next',this.container);if(this.buttonNext.size()==0&&this.options.buttonNextHTML!=null) -this.buttonNext=this.clip.before(this.options.buttonNextHTML).prev();this.buttonNext.addClass(this.className('jcarousel-next'));this.clip.addClass(this.className('jcarousel-clip'));this.list.addClass(this.className('jcarousel-list'));this.container.addClass(this.className('jcarousel-container'));var di=this.options.visible!=null?Math.ceil(this.clipping()/this.options.visible):null;var li=this.list.children('li');var self=this;if(li.size()>0){var wh=0,i=this.options.offset;li.each(function(){self.format(this,i++);wh+=self.dimension(this,di);});this.list.css(this.wh,wh+'px');if(!o||o.size===undefined) -this.options.size=li.size();} -this.container.css('display','block');this.buttonNext.css('display','block');this.buttonPrev.css('display','block');this.funcNext=function(){self.next();};this.funcPrev=function(){self.prev();};this.funcResize=function(){self.reload();};if(this.options.initCallback!=null) -this.options.initCallback(this,'init');if($.browser.safari){this.buttons(false,false);$(window).bind('load',function(){self.setup();});}else -this.setup();};var $jc=$.jcarousel;$jc.fn=$jc.prototype={jcarousel:'0.2.3'};$jc.fn.extend=$jc.extend=$.extend;$jc.fn.extend({setup:function(){this.first=null;this.last=null;this.prevFirst=null;this.prevLast=null;this.animating=false;this.timer=null;this.tail=null;this.inTail=false;if(this.locked) -return;this.list.css(this.lt,this.pos(this.options.offset)+'px');var p=this.pos(this.options.start);this.prevFirst=this.prevLast=null;this.animate(p,false);$(window).unbind('resize',this.funcResize).bind('resize',this.funcResize);},reset:function(){this.list.empty();this.list.css(this.lt,'0px');this.list.css(this.wh,'10px');if(this.options.initCallback!=null) -this.options.initCallback(this,'reset');this.setup();},reload:function(){if(this.tail!=null&&this.inTail) -this.list.css(this.lt,$jc.intval(this.list.css(this.lt))+this.tail);this.tail=null;this.inTail=false;if(this.options.reloadCallback!=null) -this.options.reloadCallback(this);if(this.options.visible!=null){var self=this;var di=Math.ceil(this.clipping()/this.options.visible),wh=0,lt=0;$('li',this.list).each(function(i){wh+=self.dimension(this,di);if(i+1this.options.size) -i2=this.options.size;for(var j=i;j<=i2;j++){var e=this.get(j);if(!e.length||e.hasClass('jcarousel-item-placeholder')) -return false;} -return true;},get:function(i){return $('.jcarousel-item-'+i,this.list);},add:function(i,s){var e=this.get(i),old=0,add=0;if(e.length==0){var c,e=this.create(i),j=$jc.intval(i);while(c=this.get(--j)){if(j<=0||c.length){j<=0?this.list.prepend(e):c.after(e);break;}}}else -old=this.dimension(e);e.removeClass(this.className('jcarousel-item-placeholder'));typeof s=='string'?e.html(s):e.empty().append(s);var di=this.options.visible!=null?Math.ceil(this.clipping()/this.options.visible):null;var wh=this.dimension(e,di)-old;if(i>0&&i=this.first&&i<=this.last)) -return;var d=this.dimension(e);if(ithis.options.size?this.options.size:i);var back=this.first>i;var pos=$jc.intval(this.list.css(this.lt));var f=this.options.wrap!='circular'&&this.first<=1?1:this.first;var c=back?this.get(f):this.get(this.last);var j=back?f:f-1;var e=null,l=0,p=false,d=0;while(back?--j>=i:++j=1&&(this.options.size==null||j<=this.options.size)))) -pos=back?pos+d:pos-d;} -var clipping=this.clipping();var cache=[];var visible=0,j=i,v=0;var c=this.get(i-1);while(++visible){e=this.get(j);p=!e.length;if(e.length==0){e=this.create(j).addClass(this.className('jcarousel-item-placeholder'));c.length==0?this.list.prepend(e):c[back?'before':'after'](e);} -c=e;var d=this.dimension(e);if(d==0){alert('jCarousel: No width/height set for items. This will cause an infinite loop. Aborting...');return 0;} -if(this.options.wrap!='circular'&&this.options.size!==null&&j>this.options.size) -cache.push(e);else if(p) -l+=d;v+=d;if(v>=clipping) -break;j++;} -for(var x=0;x0){this.list.css(this.wh,this.dimension(this.list)+l+'px');if(back){pos-=l;this.list.css(this.lt,$jc.intval(this.list.css(this.lt))-l+'px');}} -var last=i+visible-1;if(this.options.wrap!='circular'&&this.options.size&&last>this.options.size) -last=this.options.size;if(j>last){visible=0,j=last,v=0;while(++visible){var e=this.get(j--);if(!e.length) -break;v+=this.dimension(e);if(v>=clipping) -break;}} -var first=last-visible+1;if(this.options.wrap!='circular'&&first<1) -first=1;if(this.inTail&&back){pos+=this.tail;this.inTail=false;} -this.tail=null;if(this.options.wrap!='circular'&&last==this.options.size&&(last-visible+1)>=1){var m=$jc.margin(this.get(last),!this.options.vertical?'marginRight':'marginBottom');if((v-m)>clipping) -this.tail=v-clipping-m;} -while(i-->first) -pos+=this.dimension(this.get(i));this.prevFirst=this.first;this.prevLast=this.last;this.first=first;this.last=last;return pos;},animate:function(p,a){if(this.locked||this.animating) -return;this.animating=true;var self=this;var scrolled=function(){self.animating=false;if(p==0) -self.list.css(self.lt,0);if(self.options.wrap=='both'||self.options.wrap=='last'||self.options.size==null||self.last=this.options.size) -n=this.tail!=null&&!this.inTail;} -if(p==undefined||p==null){var p=!this.locked&&this.options.size!==0&&((this.options.wrap&&this.options.wrap!='last')||this.first>1);if(!this.locked&&(!this.options.wrap||this.options.wrap=='last')&&this.options.size!=null&&this.first==1) -p=this.tail!=null&&this.inTail;} -var self=this;this.buttonNext[n?'bind':'unbind'](this.options.buttonNextEvent,this.funcNext)[n?'removeClass':'addClass'](this.className('jcarousel-next-disabled')).attr('disabled',n?false:true);this.buttonPrev[p?'bind':'unbind'](this.options.buttonPrevEvent,this.funcPrev)[p?'removeClass':'addClass'](this.className('jcarousel-prev-disabled')).attr('disabled',p?false:true);if(this.buttonNext.length>0&&(this.buttonNext[0].jcarouselstate==undefined||this.buttonNext[0].jcarouselstate!=n)&&this.options.buttonNextCallback!=null){this.buttonNext.each(function(){self.options.buttonNextCallback(self,this,n);});this.buttonNext[0].jcarouselstate=n;} -if(this.buttonPrev.length>0&&(this.buttonPrev[0].jcarouselstate==undefined||this.buttonPrev[0].jcarouselstate!=p)&&this.options.buttonPrevCallback!=null){this.buttonPrev.each(function(){self.options.buttonPrevCallback(self,this,p);});this.buttonPrev[0].jcarouselstate=p;}},notify:function(evt){var state=this.prevFirst==null?'init':(this.prevFirst=i3&&i<=i4)) -this.get(i).each(function(){callback(self,this,i,state,evt);});}},create:function(i){return this.format('
  • ',i);},format:function(e,i){var $e=$(e).addClass(this.className('jcarousel-item')).addClass(this.className('jcarousel-item-'+i));$e.attr('jcarouselindex',i);return $e;},className:function(c){return c+' '+c+(!this.options.vertical?'-horizontal':'-vertical');},dimension:function(e,d){var el=e.jquery!=undefined?e[0]:e;var old=!this.options.vertical?el.offsetWidth+$jc.margin(el,'marginLeft')+$jc.margin(el,'marginRight'):el.offsetHeight+$jc.margin(el,'marginTop')+$jc.margin(el,'marginBottom');if(d==undefined||old==d) -return old;var w=!this.options.vertical?d-$jc.margin(el,'marginLeft')-$jc.margin(el,'marginRight'):d-$jc.margin(el,'marginTop')-$jc.margin(el,'marginBottom');$(el).css(this.wh,w+'px');return this.dimension(el);},clipping:function(){return!this.options.vertical?this.clip[0].offsetWidth-$jc.intval(this.clip.css('borderLeftWidth'))-$jc.intval(this.clip.css('borderRightWidth')):this.clip[0].offsetHeight-$jc.intval(this.clip.css('borderTopWidth'))-$jc.intval(this.clip.css('borderBottomWidth'));},index:function(i,s){if(s==undefined) -s=this.options.size;return Math.round((((i-1)/s)-Math.floor((i-1)/s))*s)+1;}});$jc.extend({defaults:function(d){return $.extend(defaults,d||{});},margin:function(e,p){if(!e) -return 0;var el=e.jquery!=undefined?e[0]:e;if(p=='marginRight'&&$.browser.safari){var old={'display':'block','float':'none','width':'auto'},oWidth,oWidth2;$.swap(el,old,function(){oWidth=el.offsetWidth;});old['marginRight']=0;$.swap(el,old,function(){oWidth2=el.offsetWidth;});return oWidth2-oWidth;} -return $jc.intval($.css(el,p));},intval:function(v){v=parseInt(v);return isNaN(v)?0:v;}});})(jQuery); +(function(i){i.fn.jcarousel=function(a){if(typeof a=="string"){var c=i(this).data("jcarousel"),b=Array.prototype.slice.call(arguments,1);return c[a].apply(c,b)}else return this.each(function(){i(this).data("jcarousel",new h(this,a))})};var p={vertical:false,rtl:false,start:1,offset:1,size:null,scroll:3,visible:null,animation:"normal",easing:"swing",auto:0,wrap:null,initCallback:null,reloadCallback:null,itemLoadCallback:null,itemFirstInCallback:null,itemFirstOutCallback:null,itemLastInCallback:null, itemLastOutCallback:null,itemVisibleInCallback:null,itemVisibleOutCallback:null,buttonNextHTML:"
    ",buttonPrevHTML:"
    ",buttonNextEvent:"click",buttonPrevEvent:"click",buttonNextCallback:null,buttonPrevCallback:null,itemFallbackDimension:null},q=false;i(window).bind("load.jcarousel",function(){q=true});i.jcarousel=function(a,c){this.options=i.extend({},p,c||{});this.locked=false;this.buttonPrev=this.buttonNext=this.list=this.clip=this.container=null;if(!c||c.rtl===undefined)this.options.rtl= (i(a).attr("dir")||i("html").attr("dir")||"").toLowerCase()=="rtl";this.wh=!this.options.vertical?"width":"height";this.lt=!this.options.vertical?this.options.rtl?"right":"left":"top";for(var b="",d=a.className.split(" "),e=0;e");this.container=this.container.parent()}else if(!this.container.hasClass("jcarousel-container"))this.container=this.list.wrap("
    ").parent()}else{this.container=i(a);this.list=this.container.find("ul,ol").eq(0)}b!=""&&this.container.parent()[0].className.indexOf("jcarousel-skin")==-1&&this.container.wrap('
    ');this.clip=this.list.parent();if(!this.clip.length||!this.clip.hasClass("jcarousel-clip"))this.clip=this.list.wrap("
    ").parent(); this.buttonNext=i(".jcarousel-next",this.container);if(this.buttonNext.size()==0&&this.options.buttonNextHTML!=null)this.buttonNext=this.clip.after(this.options.buttonNextHTML).next();this.buttonNext.addClass(this.className("jcarousel-next"));this.buttonPrev=i(".jcarousel-prev",this.container);if(this.buttonPrev.size()==0&&this.options.buttonPrevHTML!=null)this.buttonPrev=this.clip.after(this.options.buttonPrevHTML).next();this.buttonPrev.addClass(this.className("jcarousel-prev"));this.clip.addClass(this.className("jcarousel-clip")).css({overflow:"hidden", position:"relative"});this.list.addClass(this.className("jcarousel-list")).css({overflow:"hidden",position:"relative",top:0,margin:0,padding:0}).css(this.options.rtl?"right":"left",0);this.container.addClass(this.className("jcarousel-container")).css({position:"relative"});!this.options.vertical&&this.options.rtl&&this.container.addClass("jcarousel-direction-rtl").attr("dir","rtl");var f=this.options.visible!=null?Math.ceil(this.clipping()/this.options.visible):null;b=this.list.children("li");var g= this;if(b.size()>0){var j=0;e=this.options.offset;b.each(function(){g.format(this,e++);j+=g.dimension(this,f)});this.list.css(this.wh,j+100+"px");if(!c||c.size===undefined)this.options.size=b.size()}this.container.css("display","block");this.buttonNext.css("display","block");this.buttonPrev.css("display","block");this.funcNext=function(){g.next()};this.funcPrev=function(){g.prev()};this.funcResize=function(){g.reload()};this.options.initCallback!=null&&this.options.initCallback(this,"init");if(!q&& i.browser.safari){this.buttons(false,false);i(window).bind("load.jcarousel",function(){g.setup()})}else this.setup()};var h=i.jcarousel;h.fn=h.prototype={jcarousel:"0.2.5"};h.fn.extend=h.extend=i.extend;h.fn.extend({setup:function(){this.prevLast=this.prevFirst=this.last=this.first=null;this.animating=false;this.tail=this.timer=null;this.inTail=false;if(!this.locked){this.list.css(this.lt,this.pos(this.options.offset)+"px");var a=this.pos(this.options.start);this.prevFirst=this.prevLast=null;this.animate(a, false);i(window).unbind("resize.jcarousel",this.funcResize).bind("resize.jcarousel",this.funcResize)}},reset:function(){this.list.empty();this.list.css(this.lt,"0px");this.list.css(this.wh,"10px");this.options.initCallback!=null&&this.options.initCallback(this,"reset");this.setup()},reload:function(){this.tail!=null&&this.inTail&&this.list.css(this.lt,h.intval(this.list.css(this.lt))+this.tail);this.tail=null;this.inTail=false;this.options.reloadCallback!=null&&this.options.reloadCallback(this);if(this.options.visible!= null){var a=this,c=Math.ceil(this.clipping()/this.options.visible),b=0,d=0;this.list.children("li").each(function(e){b+=a.dimension(this,c);if(e+1this.options.size)c=this.options.size;for(var b=a;b<=c;b++){var d=this.get(b);if(!d.length||d.hasClass("jcarousel-item-placeholder"))return false}return true},get:function(a){return i(".jcarousel-item-"+a,this.list)},add:function(a,c){var b=this.get(a),d=0,e=i(c);if(b.length==0){var f;b=this.create(a);for(var g=h.intval(a);f=this.get(--g);)if(g<=0||f.length){g<=0?this.list.prepend(b):f.after(b);break}}else d=this.dimension(b);if(e.get(0).nodeName.toUpperCase()=="LI"){b.replaceWith(e); b=e}else b.empty().append(c);this.format(b.removeClass(this.className("jcarousel-item-placeholder")),a);e=this.options.visible!=null?Math.ceil(this.clipping()/this.options.visible):null;d=this.dimension(b,e)-d;a>0&&a=this.first&&a<=this.last)){var b=this.dimension(c);athis.options.size?this.options.size:a;for(var b=this.first>a,d=this.options.wrap!="circular"&&this.first<=1?1:this.first,e=b?this.get(d):this.get(this.last),f=b?d:d-1,g=null,j=0,l=false,k=0;b?--f>=a:++fthis.options.size)){e=this.get(this.index(f)); if(e.length)g=this.add(f,e.clone(true))}}e=g;k=this.dimension(g);if(l)j+=k;if(this.first!=null&&(this.options.wrap=="circular"||f>=1&&(this.options.size==null||f<=this.options.size)))c=b?c+k:c-k}d=this.clipping();var o=[],n=0;f=a;var m=0;for(e=this.get(a-1);++n;){g=this.get(f);l=!g.length;if(g.length==0){g=this.create(f).addClass(this.className("jcarousel-item-placeholder"));e.length==0?this.list.prepend(g):e[b?"before":"after"](g);if(this.first!=null&&this.options.wrap=="circular"&&this.options.size!== null&&(f<=0||f>this.options.size)){e=this.get(this.index(f));if(e.length)g=this.add(f,e.clone(true))}}e=g;k=this.dimension(g);if(k==0)throw Error("jCarousel: No width/height set for items. This will cause an infinite loop. Aborting...");if(this.options.wrap!="circular"&&this.options.size!==null&&f>this.options.size)o.push(g);else if(l)j+=k;m+=k;if(m>=d)break;f++}for(g=0;g0){this.list.css(this.wh,this.dimension(this.list)+j+"px");if(b){c-=j;this.list.css(this.lt,h.intval(this.list.css(this.lt))- j+"px")}}j=a+n-1;if(this.options.wrap!="circular"&&this.options.size&&j>this.options.size)j=this.options.size;if(f>j){n=0;f=j;for(m=0;++n;){g=this.get(f--);if(!g.length)break;m+=this.dimension(g);if(m>=d)break}}f=j-n+1;if(this.options.wrap!="circular"&&f<1)f=1;if(this.inTail&&b){c+=this.tail;this.inTail=false}this.tail=null;if(this.options.wrap!="circular"&&j==this.options.size&&j-n+1>=1){b=h.margin(this.get(j),!this.options.vertical?"marginRight":"marginBottom");if(m-b>d)this.tail=m-d-b}for(;a-- > f;)c+=this.dimension(this.get(a));this.prevFirst=this.first;this.prevLast=this.last;this.first=f;this.last=j;return c},animate:function(a,c){if(!(this.locked||this.animating)){this.animating=true;var b=this,d=function(){b.animating=false;a==0&&b.list.css(b.lt,0);if(b.options.wrap=="circular"||b.options.wrap=="both"||b.options.wrap=="last"||b.options.size==null||b.last=b.first&&e<=b.last)&&(e<1||e>b.options.size))b.remove(e)};this.notify("onBeforeAnimation");if(!this.options.animation||c==false){this.list.css(this.lt,a+"px");d()}else this.list.animate(!this.options.vertical?this.options.rtl?{right:a}:{left:a}:{top:a},this.options.animation,this.options.easing,d)}},startAuto:function(a){if(a!=undefined)this.options.auto=a;if(this.options.auto==0)return this.stopAuto();if(this.timer==null){var c=this;this.timer=setTimeout(function(){c.next()}, this.options.auto*1E3)}},stopAuto:function(){if(this.timer!=null){clearTimeout(this.timer);this.timer=null}},buttons:function(a,c){if(a==undefined||a==null){a=!this.locked&&this.options.size!==0&&(this.options.wrap&&this.options.wrap!="first"||this.options.size==null||this.last=this.options.size)a=this.tail!=null&&!this.inTail}if(c==undefined||c==null){c=!this.locked&&this.options.size!== 0&&(this.options.wrap&&this.options.wrap!="last"||this.first>1);if(!this.locked&&(!this.options.wrap||this.options.wrap=="last")&&this.options.size!=null&&this.first==1)c=this.tail!=null&&this.inTail}var b=this;this.buttonNext[a?"bind":"unbind"](this.options.buttonNextEvent+".jcarousel",this.funcNext)[a?"removeClass":"addClass"](this.className("jcarousel-next-disabled")).attr("disabled",a?false:true);this.buttonPrev[c?"bind":"unbind"](this.options.buttonPrevEvent+".jcarousel",this.funcPrev)[c?"removeClass": "addClass"](this.className("jcarousel-prev-disabled")).attr("disabled",c?false:true);this.options.buttonNextCallback!=null&&this.buttonNext.data("jcarouselstate")!=a&&this.buttonNext.each(function(){b.options.buttonNextCallback(b,this,a)}).data("jcarouselstate",a);this.options.buttonPrevCallback!=null&&this.buttonPrev.data("jcarouselstate")!=c&&this.buttonPrev.each(function(){b.options.buttonPrevCallback(b,this,c)}).data("jcarouselstate",c)},notify:function(a){var c=this.prevFirst==null?"init":this.prevFirst< this.first?"next":"prev";this.callback("itemLoadCallback",a,c);if(this.prevFirst!==this.first){this.callback("itemFirstInCallback",a,c,this.first);this.callback("itemFirstOutCallback",a,c,this.prevFirst)}if(this.prevLast!==this.last){this.callback("itemLastInCallback",a,c,this.last);this.callback("itemLastOutCallback",a,c,this.prevLast)}this.callback("itemVisibleInCallback",a,c,this.first,this.last,this.prevFirst,this.prevLast);this.callback("itemVisibleOutCallback",a,c,this.prevFirst,this.prevLast, this.first,this.last)},callback:function(a,c,b,d,e,f,g){if(!(this.options[a]==undefined||typeof this.options[a]!="object"&&c!="onAfterAnimation")){var j=typeof this.options[a]=="object"?this.options[a][c]:this.options[a];if(i.isFunction(j)){var l=this;if(d===undefined)j(l,b,c);else if(e===undefined)this.get(d).each(function(){j(l,this,d,b,c)});else for(var k=d;k<=e;k++)k!==null&&!(k>=f&&k<=g)&&this.get(k).each(function(){j(l,this,k,b,c)})}}},create:function(a){return this.format("
  • ",a)},format:function(a, c){a=i(a);for(var b=a.get(0).className.split(" "),d=0;d *
    - *
    - *
    *
    *
      *
    • First item
      • *
    • Second item
      • *
    *
    + *
    + *
    *
    * * - * @name jcarousel - * @type jQuery - * @param Hash o A set of key/value pairs to set as configuration properties. - * @cat Plugins/jCarousel + * @method jcarousel + * @return jQuery + * @param o {Hash|String} A set of key/value pairs to set as configuration properties or a method name to call on a formerly created instance. */ $.fn.jcarousel = function(o) { - return this.each(function() { - new $jc(this, o); - }); + if (typeof o == 'string') { + var instance = $(this).data('jcarousel'), args = Array.prototype.slice.call(arguments, 1); + return instance[o].apply(instance, args); + } else + return this.each(function() { + $(this).data('jcarousel', new $jc(this, o)); + }); }; // Default configuration properties. var defaults = { vertical: false, + rtl: false, start: 1, offset: 1, size: null, @@ -71,16 +75,19 @@ buttonNextEvent: 'click', buttonPrevEvent: 'click', buttonNextCallback: null, - buttonPrevCallback: null - }; + buttonPrevCallback: null, + itemFallbackDimension: null + }, windowLoaded = false; + $(window).bind('load.jcarousel', function() { windowLoaded = true; }) + /** * The jCarousel object. * * @constructor - * @name $.jcarousel - * @param Object e The element to create the carousel for. - * @param Hash o A set of key/value pairs to set as configuration properties. + * @class jcarousel + * @param e {HTMLElement} The element to create the carousel for. + * @param o {Object} A set of key/value pairs to set as configuration properties. * @cat Plugins/jCarousel */ $.jcarousel = function(e, o) { @@ -94,8 +101,12 @@ this.buttonNext = null; this.buttonPrev = null; + // Only set if not explicitly passed as option + if (!o || o.rtl === undefined) + this.options.rtl = ($(e).attr('dir') || $('html').attr('dir') || '').toLowerCase() == 'rtl'; + this.wh = !this.options.vertical ? 'width' : 'height'; - this.lt = !this.options.vertical ? 'left' : 'top'; + this.lt = !this.options.vertical ? (this.options.rtl ? 'right' : 'left') : 'top'; // Extract skin class var skin = '', split = e.className.split(' '); @@ -103,12 +114,12 @@ for (var i = 0; i < split.length; i++) { if (split[i].indexOf('jcarousel-skin') != -1) { $(e).removeClass(split[i]); - var skin = split[i]; + skin = split[i]; break; } } - if (e.nodeName == 'UL' || e.nodeName == 'OL') { + if (e.nodeName.toUpperCase() == 'UL' || e.nodeName.toUpperCase() == 'OL') { this.list = $(e); this.container = this.list.parent(); @@ -121,35 +132,48 @@ this.container = this.list.wrap('
    ').parent(); } else { this.container = $(e); - this.list = $(e).find('>ul,>ol,div>ul,div>ol'); + this.list = this.container.find('ul,ol').eq(0); } if (skin != '' && this.container.parent()[0].className.indexOf('jcarousel-skin') == -1) - this.container.wrap('
    '); + this.container.wrap('
    '); this.clip = this.list.parent(); if (!this.clip.length || !this.clip.hasClass('jcarousel-clip')) this.clip = this.list.wrap('
    ').parent(); + this.buttonNext = $('.jcarousel-next', this.container); + + if (this.buttonNext.size() == 0 && this.options.buttonNextHTML != null) + this.buttonNext = this.clip.after(this.options.buttonNextHTML).next(); + + this.buttonNext.addClass(this.className('jcarousel-next')); + this.buttonPrev = $('.jcarousel-prev', this.container); if (this.buttonPrev.size() == 0 && this.options.buttonPrevHTML != null) - this.buttonPrev = this.clip.before(this.options.buttonPrevHTML).prev(); + this.buttonPrev = this.clip.after(this.options.buttonPrevHTML).next(); this.buttonPrev.addClass(this.className('jcarousel-prev')); - this.buttonNext = $('.jcarousel-next', this.container); + this.clip.addClass(this.className('jcarousel-clip')).css({ + overflow: 'hidden', + position: 'relative' + }); + this.list.addClass(this.className('jcarousel-list')).css({ + overflow: 'hidden', + position: 'relative', + top: 0, + margin: 0, + padding: 0 + }).css((this.options.rtl ? 'right' : 'left'), 0); + this.container.addClass(this.className('jcarousel-container')).css({ + position: 'relative' + }); + if (!this.options.vertical && this.options.rtl) + this.container.addClass('jcarousel-direction-rtl').attr('dir', 'rtl'); - if (this.buttonNext.size() == 0 && this.options.buttonNextHTML != null) - this.buttonNext = this.clip.before(this.options.buttonNextHTML).prev(); - - this.buttonNext.addClass(this.className('jcarousel-next')); - - this.clip.addClass(this.className('jcarousel-clip')); - this.list.addClass(this.className('jcarousel-list')); - this.container.addClass(this.className('jcarousel-container')); - var di = this.options.visible != null ? Math.ceil(this.clipping() / this.options.visible) : null; var li = this.list.children('li'); @@ -162,7 +186,7 @@ wh += self.dimension(this, di); }); - this.list.css(this.wh, wh + 'px'); + this.list.css(this.wh, (wh + 100) + 'px'); // Only set if not explicitly passed as option if (!o || o.size === undefined) @@ -181,9 +205,9 @@ if (this.options.initCallback != null) this.options.initCallback(this, 'init'); - if ($.browser.safari) { + if (!windowLoaded && $.browser.safari) { this.buttons(false, false); - $(window).bind('load', function() { self.setup(); }); + $(window).bind('load.jcarousel', function() { self.setup(); }); } else this.setup(); }; @@ -192,7 +216,7 @@ var $jc = $.jcarousel; $jc.fn = $jc.prototype = { - jcarousel: '0.2.3' + jcarousel: '0.2.5' }; $jc.fn.extend = $jc.extend = $.extend; @@ -201,9 +225,8 @@ /** * Setups the carousel. * - * @name setup - * @type undefined - * @cat Plugins/jCarousel + * @method setup + * @return undefined */ setup: function() { this.first = null; @@ -223,15 +246,14 @@ this.prevFirst = this.prevLast = null; this.animate(p, false); - $(window).unbind('resize', this.funcResize).bind('resize', this.funcResize); + $(window).unbind('resize.jcarousel', this.funcResize).bind('resize.jcarousel', this.funcResize); }, /** * Clears the list and resets the carousel. * - * @name reset - * @type undefined - * @cat Plugins/jCarousel + * @method reset + * @return undefined */ reset: function() { this.list.empty(); @@ -248,9 +270,8 @@ /** * Reloads the carousel and adjusts positions. * - * @name reload - * @type undefined - * @cat Plugins/jCarousel + * @method reload + * @return undefined */ reload: function() { if (this.tail != null && this.inTail) @@ -265,7 +286,7 @@ if (this.options.visible != null) { var self = this; var di = Math.ceil(this.clipping() / this.options.visible), wh = 0, lt = 0; - $('li', this.list).each(function(i) { + this.list.children('li').each(function(i) { wh += self.dimension(this, di); if (i + 1 < self.first) lt = wh; @@ -281,9 +302,8 @@ /** * Locks the carousel. * - * @name lock - * @type undefined - * @cat Plugins/jCarousel + * @method lock + * @return undefined */ lock: function() { this.locked = true; @@ -293,9 +313,8 @@ /** * Unlocks the carousel. * - * @name unlock - * @type undefined - * @cat Plugins/jCarousel + * @method unlock + * @return undefined */ unlock: function() { this.locked = false; @@ -305,10 +324,9 @@ /** * Sets the size of the carousel. * - * @name size - * @type undefined - * @param Number s The size of the carousel. - * @cat Plugins/jCarousel + * @method size + * @return undefined + * @param s {Number} The size of the carousel. */ size: function(s) { if (s != undefined) { @@ -323,18 +341,17 @@ /** * Checks whether a list element exists for the given index (or index range). * - * @name get - * @type bool - * @param Number i The index of the (first) element. - * @param Number i2 The index of the last element. - * @cat Plugins/jCarousel + * @method get + * @return bool + * @param i {Number} The index of the (first) element. + * @param i2 {Number} The index of the last element. */ has: function(i, i2) { if (i2 == undefined || !i2) i2 = i; if (this.options.size !== null && i2 > this.options.size) - i2 = this.options.size; + i2 = this.options.size; for (var j = i; j <= i2; j++) { var e = this.get(j); @@ -348,10 +365,9 @@ /** * Returns a jQuery object with list element for the given index. * - * @name get - * @type jQuery - * @param Number i The index of the element. - * @cat Plugins/jCarousel + * @method get + * @return jQuery + * @param i {Number} The index of the element. */ get: function(i) { return $('.jcarousel-item-' + i, this.list); @@ -362,14 +378,13 @@ * If the element already exists, it updates the inner html. * Returns the created element as jQuery object. * - * @name add - * @type jQuery - * @param Number i The index of the element. - * @param String s The innerHTML of the element. - * @cat Plugins/jCarousel + * @method add + * @return jQuery + * @param i {Number} The index of the element. + * @param s {String} The innerHTML of the element. */ add: function(i, s) { - var e = this.get(i), old = 0, add = 0; + var e = this.get(i), old = 0, n = $(s); if (e.length == 0) { var c, e = this.create(i), j = $jc.intval(i); @@ -382,9 +397,14 @@ } else old = this.dimension(e); - e.removeClass(this.className('jcarousel-item-placeholder')); - typeof s == 'string' ? e.html(s) : e.empty().append(s); + if (n.get(0).nodeName.toUpperCase() == 'LI') { + e.replaceWith(n); + e = n; + } else + e.empty().append(s); + this.format(e.removeClass(this.className('jcarousel-item-placeholder')), i); + var di = this.options.visible != null ? Math.ceil(this.clipping() / this.options.visible) : null; var wh = this.dimension(e, di) - old; @@ -399,10 +419,9 @@ /** * Removes an element for the given index from the list. * - * @name remove - * @type undefined - * @param Number i The index of the element. - * @cat Plugins/jCarousel + * @method remove + * @return undefined + * @param i {Number} The index of the element. */ remove: function(i) { var e = this.get(i); @@ -424,9 +443,8 @@ /** * Moves the carousel forwards. * - * @name next - * @type undefined - * @cat Plugins/jCarousel + * @method next + * @return undefined */ next: function() { this.stopAuto(); @@ -440,9 +458,8 @@ /** * Moves the carousel backwards. * - * @name prev - * @type undefined - * @cat Plugins/jCarousel + * @method prev + * @return undefined */ prev: function() { this.stopAuto(); @@ -456,10 +473,9 @@ /** * Scrolls the tail of the carousel. * - * @name scrollTail - * @type undefined - * @param Bool b Whether scroll the tail back or forward. - * @cat Plugins/jCarousel + * @method scrollTail + * @return undefined + * @param b {Boolean} Whether scroll the tail back or forward. */ scrollTail: function(b) { if (this.locked || this.animating || !this.tail) @@ -480,11 +496,10 @@ /** * Scrolls the carousel to a certain position. * - * @name scroll - * @type undefined - * @param Number i The index of the element to scoll to. - * @param Bool a Flag indicating whether to perform animation. - * @cat Plugins/jCarousel + * @method scroll + * @return undefined + * @param i {Number} The index of the element to scoll to. + * @param a {Boolean} Flag indicating whether to perform animation. */ scroll: function(i, a) { if (this.locked || this.animating) @@ -496,27 +511,27 @@ /** * Prepares the carousel and return the position for a certian index. * - * @name pos - * @type Number - * @param Number i The index of the element to scoll to. - * @cat Plugins/jCarousel + * @method pos + * @return {Number} + * @param i {Number} The index of the element to scoll to. */ pos: function(i) { + var pos = $jc.intval(this.list.css(this.lt)); + if (this.locked || this.animating) - return; + return pos; if (this.options.wrap != 'circular') i = i < 1 ? 1 : (this.options.size && i > this.options.size ? this.options.size : i); var back = this.first > i; - var pos = $jc.intval(this.list.css(this.lt)); // Create placeholders, new list width/height // and new list position var f = this.options.wrap != 'circular' && this.first <= 1 ? 1 : this.first; var c = back ? this.get(f) : this.get(this.last); var j = back ? f : f - 1; - var e = null, l = 0, p = false, d = 0; + var e = null, l = 0, p = false, d = 0, g; while (back ? --j >= i : ++j < i) { e = this.get(j); @@ -524,6 +539,12 @@ if (e.length == 0) { e = this.create(j).addClass(this.className('jcarousel-item-placeholder')); c[back ? 'before' : 'after' ](e); + + if (this.first != null && this.options.wrap == 'circular' && this.options.size !== null && (j <= 0 || j > this.options.size)) { + g = this.get(this.index(j)); + if (g.length) + e = this.add(j, g.clone(true)); + } } c = e; @@ -549,13 +570,18 @@ e = this.create(j).addClass(this.className('jcarousel-item-placeholder')); // This should only happen on a next scroll c.length == 0 ? this.list.prepend(e) : c[back ? 'before' : 'after' ](e); + + if (this.first != null && this.options.wrap == 'circular' && this.options.size !== null && (j <= 0 || j > this.options.size)) { + g = this.get(this.index(j)); + if (g.length) + e = this.add(j, g.clone(true)); + } } c = e; var d = this.dimension(e); if (d == 0) { - alert('jCarousel: No width/height set for items. This will cause an infinite loop. Aborting...'); - return 0; + throw new Error('jCarousel: No width/height set for items. This will cause an infinite loop. Aborting...'); } if (this.options.wrap != 'circular' && this.options.size !== null && j > this.options.size) @@ -634,11 +660,10 @@ /** * Animates the carousel to a certain position. * - * @name animate - * @type undefined - * @param mixed p Position to scroll to. - * @param Bool a Flag indicating whether to perform animation. - * @cat Plugins/jCarousel + * @method animate + * @return undefined + * @param p {Number} Position to scroll to. + * @param a {Boolean} Flag indicating whether to perform animation. */ animate: function(p, a) { if (this.locked || this.animating) @@ -653,11 +678,18 @@ if (p == 0) self.list.css(self.lt, 0); - if (self.options.wrap == 'both' || self.options.wrap == 'last' || self.options.size == null || self.last < self.options.size) + if (self.options.wrap == 'circular' || self.options.wrap == 'both' || self.options.wrap == 'last' || self.options.size == null || self.last < self.options.size) self.startAuto(); self.buttons(); self.notify('onAfterAnimation'); + + // This function removes items which are appended automatically for circulation. + // This prevents the list from growing infinitely. + if (self.options.wrap == 'circular' && self.options.size !== null) + for (var i = self.prevFirst; i <= self.prevLast; i++) + if (i !== null && !(i >= self.first && i <= self.last) && (i < 1 || i > self.options.size)) + self.remove(i); }; this.notify('onBeforeAnimation'); @@ -667,7 +699,7 @@ this.list.css(this.lt, p + 'px'); scrolled(); } else { - var o = !this.options.vertical ? {'left': p} : {'top': p}; + var o = !this.options.vertical ? (this.options.rtl ? {'right': p} : {'left': p}) : {'top': p}; this.list.animate(o, this.options.animation, this.options.easing, scrolled); } }, @@ -675,10 +707,9 @@ /** * Starts autoscrolling. * - * @name auto - * @type undefined - * @param Number s Seconds to periodically autoscroll the content. - * @cat Plugins/jCarousel + * @method auto + * @return undefined + * @param s {Number} Seconds to periodically autoscroll the content. */ startAuto: function(s) { if (s != undefined) @@ -697,9 +728,8 @@ /** * Stops autoscrolling. * - * @name stopAuto - * @type undefined - * @cat Plugins/jCarousel + * @method stopAuto + * @return undefined */ stopAuto: function() { if (this.timer == null) @@ -712,9 +742,8 @@ /** * Sets the states of the prev/next buttons. * - * @name buttons - * @type undefined - * @cat Plugins/jCarousel + * @method buttons + * @return undefined */ buttons: function(n, p) { if (n == undefined || n == null) { @@ -731,20 +760,25 @@ var self = this; - this.buttonNext[n ? 'bind' : 'unbind'](this.options.buttonNextEvent, this.funcNext)[n ? 'removeClass' : 'addClass'](this.className('jcarousel-next-disabled')).attr('disabled', n ? false : true); - this.buttonPrev[p ? 'bind' : 'unbind'](this.options.buttonPrevEvent, this.funcPrev)[p ? 'removeClass' : 'addClass'](this.className('jcarousel-prev-disabled')).attr('disabled', p ? false : true); + this.buttonNext[n ? 'bind' : 'unbind'](this.options.buttonNextEvent + '.jcarousel', this.funcNext)[n ? 'removeClass' : 'addClass'](this.className('jcarousel-next-disabled')).attr('disabled', n ? false : true); + this.buttonPrev[p ? 'bind' : 'unbind'](this.options.buttonPrevEvent + '.jcarousel', this.funcPrev)[p ? 'removeClass' : 'addClass'](this.className('jcarousel-prev-disabled')).attr('disabled', p ? false : true); - if (this.buttonNext.length > 0 && (this.buttonNext[0].jcarouselstate == undefined || this.buttonNext[0].jcarouselstate != n) && this.options.buttonNextCallback != null) { - this.buttonNext.each(function() { self.options.buttonNextCallback(self, this, n); }); - this.buttonNext[0].jcarouselstate = n; + if (this.options.buttonNextCallback != null && this.buttonNext.data('jcarouselstate') != n) { + this.buttonNext.each(function() { self.options.buttonNextCallback(self, this, n); }).data('jcarouselstate', n); } - if (this.buttonPrev.length > 0 && (this.buttonPrev[0].jcarouselstate == undefined || this.buttonPrev[0].jcarouselstate != p) && this.options.buttonPrevCallback != null) { - this.buttonPrev.each(function() { self.options.buttonPrevCallback(self, this, p); }); - this.buttonPrev[0].jcarouselstate = p; + if (this.options.buttonPrevCallback != null && (this.buttonPrev.data('jcarouselstate') != p)) { + this.buttonPrev.each(function() { self.options.buttonPrevCallback(self, this, p); }).data('jcarouselstate', p); } }, + /** + * Notify callback of a specified event. + * + * @method notify + * @return undefined + * @param evt {String} The event name + */ notify: function(evt) { var state = this.prevFirst == null ? 'init' : (this.prevFirst < this.first ? 'next' : 'prev'); @@ -792,9 +826,17 @@ }, format: function(e, i) { - var $e = $(e).addClass(this.className('jcarousel-item')).addClass(this.className('jcarousel-item-' + i)); - $e.attr('jcarouselindex', i); - return $e; + var e = $(e), split = e.get(0).className.split(' '); + for (var j = 0; j < split.length; j++) { + if (split[j].indexOf('jcarousel-') != -1) { + e.removeClass(split[j]); + } + } + e.addClass(this.className('jcarousel-item')).addClass(this.className('jcarousel-item-' + i)).css({ + 'float': (this.options.rtl ? 'right' : 'left'), + 'list-style': 'none' + }).attr('jcarouselindex', i); + return e; }, className: function(c) { @@ -805,8 +847,8 @@ var el = e.jquery != undefined ? e[0] : e; var old = !this.options.vertical ? - el.offsetWidth + $jc.margin(el, 'marginLeft') + $jc.margin(el, 'marginRight') : - el.offsetHeight + $jc.margin(el, 'marginTop') + $jc.margin(el, 'marginBottom'); + (el.offsetWidth || $jc.intval(this.options.itemFallbackDimension)) + $jc.margin(el, 'marginLeft') + $jc.margin(el, 'marginRight') : + (el.offsetHeight || $jc.intval(this.options.itemFallbackDimension)) + $jc.margin(el, 'marginTop') + $jc.margin(el, 'marginBottom'); if (d == undefined || old == d) return old; @@ -838,11 +880,9 @@ /** * Gets/Sets the global default configuration properties. * - * @name defaults - * @descr Gets/Sets the global default configuration properties. - * @type Hash - * @param Hash d A set of key/value pairs to set as configuration properties. - * @cat Plugins/jCarousel + * @method defaults + * @return {Object} + * @param d {Object} A set of key/value pairs to set as configuration properties. */ defaults: function(d) { return $.extend(defaults, d || {}); Index: jcarousel/skins/ie7/skin.css =================================================================== --- jcarousel/skins/ie7/skin.css (revision 5477) +++ jcarousel/skins/ie7/skin.css (working copy) @@ -4,6 +4,10 @@ border: 1px solid #808080; } +.jcarousel-skin-ie7 .jcarousel-direction-rtl { + direction: rtl; +} + .jcarousel-skin-ie7 .jcarousel-container-horizontal { width: 245px; padding: 20px 40px; @@ -36,9 +40,15 @@ } .jcarousel-skin-ie7 .jcarousel-item-horizontal { + margin-left: 0; margin-right: 7px; } +.jcarousel-skin-ie7 .jcarousel-direction-rtl .jcarousel-item-horizontal { + margin-left: 7px; + margin-right: 0; +} + .jcarousel-skin-ie7 .jcarousel-item-vertical { margin-bottom: 7px; } @@ -59,6 +69,12 @@ background: transparent url(next-horizontal.gif) no-repeat 0 0; } +.jcarousel-skin-ie7 .jcarousel-direction-rtl .jcarousel-next-horizontal { + left: 5px; + right: auto; + background-image: url(prev-horizontal.gif); +} + .jcarousel-skin-ie7 .jcarousel-next-horizontal:hover { background-position: -32px 0; } @@ -84,6 +100,12 @@ background: transparent url(prev-horizontal.gif) no-repeat 0 0; } +.jcarousel-skin-ie7 .jcarousel-direction-rtl .jcarousel-prev-horizontal { + left: auto; + right: 5px; + background-image: url(next-horizontal.gif); +} + .jcarousel-skin-ie7 .jcarousel-prev-horizontal:hover { background-position: -32px 0; } Index: jcarousel/skins/tango/skin.css =================================================================== --- jcarousel/skins/tango/skin.css (revision 5477) +++ jcarousel/skins/tango/skin.css (working copy) @@ -4,6 +4,10 @@ border: 1px solid #346F97; } +.jcarousel-skin-tango .jcarousel-direction-rtl { + direction: rtl; +} + .jcarousel-skin-tango .jcarousel-container-horizontal { width: 245px; padding: 20px 40px; @@ -31,9 +35,15 @@ } .jcarousel-skin-tango .jcarousel-item-horizontal { + margin-left: 0; margin-right: 10px; } +.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal { + margin-left: 10px; + margin-right: 0; +} + .jcarousel-skin-tango .jcarousel-item-vertical { margin-bottom: 10px; } @@ -56,6 +66,12 @@ background: transparent url(next-horizontal.png) no-repeat 0 0; } +.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal { + left: 5px; + right: auto; + background-image: url(prev-horizontal.png); +} + .jcarousel-skin-tango .jcarousel-next-horizontal:hover { background-position: -32px 0; } @@ -81,6 +97,12 @@ background: transparent url(prev-horizontal.png) no-repeat 0 0; } +.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal { + left: auto; + right: 5px; + background-image: url(next-horizontal.png); +} + .jcarousel-skin-tango .jcarousel-prev-horizontal:hover { background-position: -32px 0; } Index: jcarousel/changelog.html =================================================================== --- jcarousel/changelog.html (revision 5477) +++ jcarousel/changelog.html (working copy) @@ -10,6 +10,20 @@

    jCarousel

    Riding carousels with jQuery

    Changelog

    +

    Version 0.2.5 - 2010-08-13

    +
      +
    • Added RTL (Right-To-Left) support.
      • +
    • Added automatic deletion of cloned elements for circular carousels.
      • +
    • Added new option itemFallbackDimension (#7).
      • +
    • Added new section "Defining the number of visible items" to documentation.
      • +
    +

    Version 0.2.4 - 2010-04-19

    +
      +
    • Updated jQuery to version 1.4.2.
      • +
    • jCarousel instance can now be retrieved by $(selector).data('jcarousel').
      • +
    • Support for static circular carousels out of the box.
      • +
    • Removed not longer needed core stylsheet jquery.jcarousel.css. Styles are now set by javascript or skin stylesheets.
      • +

    Version 0.2.3 - 2008-04-07

    • Updated jQuery to version 1.2.3.
      • @@ -18,19 +32,19 @@

    Version 0.2.2 - 2007-11-07

    Version 0.2.1 - 2007-10-12

      -
    • Readded the option start for a custom start position. The +
    • Readded the option start for a custom start position. The old option start is renamed to offset.
    • New example for dynamic content loading via Ajax from a PHP script.
    • Fixed a bug with variable item widths/heights.
    - +

    Version 0.2.0-beta - 2007-05-07

    • Complete rewrite of the plugin. See this post for further informations.
      • @@ -51,16 +65,16 @@

    Version 0.1.3 - 2006-12-02

      -
    • New configuration option itemStart. Sets the index of the +
    • New configuration option itemStart. Sets the index of the item to start with.

    Version 0.1.2 - 2006-11-28

      -
    • New configuration option wrapPrev. Behaves like wrap - but scrolls to the end when clicking the prev-button at the start of the - carousel. (Note: This may produce unexpected results with dynamic loaded +
    • New configuration option wrapPrev. Behaves like wrap + but scrolls to the end when clicking the prev-button at the start of the + carousel. (Note: This may produce unexpected results with dynamic loaded content. You must ensure to load the complete carousel on initialisation).
      • -
    • Moved call of the button handlers at the end of the buttons() method. +
    • Moved call of the button handlers at the end of the buttons() method. This lets the callbacks change the behaviours assigned by jCarousel.

    Version 0.1.1 - 2006-10-25

    @@ -88,7 +102,7 @@

    Version 0.1.0-gamma - 2006-09-07

      -
    • Added auto-wrapping of the required html markup around lists (ul +
    • Added auto-wrapping of the required html markup around lists (ul and ol) if jQuery().jcarousel() is assigned directly to them.
    • Added support for new callback functions itemFirstInHandler, itemFirstOutHandler, itemLastInHandler, itemLastOutHandler, itemVisibleInHandler, itemVisibleOutHandler.
    • General sourcecode rewriting.
      • Index: jcarousel/index.html =================================================================== --- jcarousel/index.html (revision 5477) +++ jcarousel/index.html (working copy) @@ -11,8 +11,10 @@

      jCarousel

      Riding carousels with jQuery

      Author: Jan Sorgalla
      - Version: 0.2.3 (Changelog)
      + Version: 0.2.5 (Changelog)
      Download: jcarousel.tar.gz or jcarousel.zip
      + Source Code: http://github.com/jsor/jcarousel
      + Bugtracker: http://github.com/jsor/jcarousel/issues
      Licence: Dual licensed under the MIT and GPL licenses.

      @@ -23,8 +25,9 @@
    • Examples
    • Getting started
    • Dynamic content loading
      • +
    • Accessing the jCarousel instance
      • +
    • Defining the number of visible items
    • Configuration
      • -
    • Compatibility
    • Credits
      • @@ -45,7 +48,8 @@
    • Static Examples
      • Simple carousel
        • -
      • Vertical carousel
        • +
      • Vertical carousel
        • +
      • Circular carousel
      • Carousel with autoscrolling
      • Carousel illustrating the callback functions
        • @@ -70,7 +74,6 @@
      • Special Examples
          -
        • Circular carousel
        • Using jCarousel as a Textscroller
        • Flexible carousel
          • @@ -84,13 +87,11 @@

          Getting started

          To use the jCarousel component, include the jQuery - library, the jCarousel source file, the jCarousel core stylesheet file and - a jCarousel skin stylesheet file inside the <head> tag + library, the jCarousel source file and a jCarousel skin stylesheet file inside the <head> tag of your HTML document:

          -<script type="text/javascript" src="/path/to/jquery-1.2.1.pack.js"></script>
-<script type="text/javascript" src="/path/to/lib/jquery.jcarousel.pack.js"></script>
-<link rel="stylesheet" type="text/css" href="/path/to/lib/jquery.jcarousel.css" />
+<script type="text/javascript" src="/path/to/jquery-1.4.2.min.js"></script>
+<script type="text/javascript" src="/path/to/lib/jquery.jcarousel.min.js"></script>
 <link rel="stylesheet" type="text/css" href="/path/to/skin/skin.css" />

          The download package contains some example skin packages. Feel free to build your own skins based on it.

          @@ -121,14 +122,14 @@ 
           <div class="jcarousel-skin-name">
   <div class="jcarousel-container">
-    <div disabled="disabled" class="jcarousel-prev jcarousel-prev-disabled"></div>
-    <div class="jcarousel-next"></div>
     <div class="jcarousel-clip">
       <ul class="jcarousel-list">
         <li class="jcarousel-item-1">First item</li>
         <li class="jcarousel-item-2">Second item</li>
       </ul>
     </div>
+    <div disabled="disabled" class="jcarousel-prev jcarousel-prev-disabled"></div>
+    <div class="jcarousel-next"></div>
   </div>
 </div>
          @@ -140,11 +141,9 @@
          • The skin class "jcarousel-skin-name" has been moved from the <ul> to the top <div> element.
            • -
          • The first nested <div> under <div class="jcarousel-container"> - illustrates a disabled button, the second an enabled one. The disabled - button has - the - attribute +
          • The last 2 nested <div>'s under <div class="jcarousel-container"> + are the next/prev buttons of the carousel. The first one illustrates a disabled button, the second an enabled one. The disabled + button has the attribute disabled (which actually makes no sense for <div> elements, but you can also use <button> elements or whatever you want) as well as the additional class jcarousel-prev-disabled @@ -188,11 +187,37 @@

            jCarousel contains a convenience method add() that can be passed the index of the item to create and the innerHTML string of the item to be - created. If the item already exists, it just updates the innerHTML. You can + created. If the item already exists, it just updates the innerHTML. You can access the index of the first and last visible element by the public variables carousel.first and carousel.last. -

            +

            + + +

            Accessing the jCarousel instance

            +

            The instance of the carousel will be stored with the data() method of jQuery under the key jcarousel for a simple access.

            +

            If you have created a carousel like:

            + 
            +jQuery(document).ready(function() {
+    jQuery('#mycarousel').jcarousel();
+});
            +

            You can access the instance with:

            + 
            +var carousel = jQuery('#mycarousel').data('jcarousel');
            +

            You can also access methods of the instance directly, for example the add() method: + 

            +var index = 1;
+var html = 'My content of item no. 1';
+jQuery('#mycarousel').jcarousel('add', index, html);
            + + +

            Defining the number of visible items

            + +

            Sometimes people are confused how to define the number of visible items because there is no option for this as they expect (Yes, there is an option visible, we discuss this later).

            +

            You simply define the number of visible items by defining the width (or height) with the class .jcarousel-clip (or the more distinct .jcarousel-clip-horizontal and .jcarousel-clip-vertical classes) in your skin stylesheet.

            +

            This offers a lot of flexibility, because you can define the width in pixel for a fixed carousel or in percent for a flexible carousel (This example shows a carousel with a clip width in percent, resize the browser to see it in effect).

            +

            So, why there is an option visible? If you set the option visible, jCarousel sets the width of the visible items to always make this number of items visible. Open this example and resize your browser window to see it in effect.

            + -

            Configuration

            +

            Configuration

            jCarousel accepts a list of options to control the appearance and behaviour of the carousel. Here is the list of options you may set:

            @@ -211,6 +236,12 @@ Changes the carousel from a left/right style to a up/down style carousel. + + + + + + @@ -273,12 +304,9 @@ + back to the start/end. Options are "first", "last", + "both" or "circular" as string. If set to null, + wrapping is turned off (default). @@ -452,22 +480,15 @@ + + + + + +
            rtlboolfalseSpecifies wether the carousel appears in RTL (Right-To-Left) mode.
            start integer 1string null Specifies whether to wrap at the first/last item (or both) and jump - back to the start/end. Options are "first", "last" - or "both" as string. If set to null, - wrapping is turned off (default). You can also pass "circular" - as option to enable support for circular carousels. See the example - Circular carousel on how - to implement it.
            initCallback"click" Specifies the event which triggers the prev scroll.
            itemFallbackDimensionintegernullIf, for some reason, jCarousel can not detect the width of an item, you can set a fallback dimension (width or height, depending on the orientation) here to ensure correct calculations.
            - -

            Compatibility

            -

            jCarousel has been tested and works on the following browsers:

            -
              -
            • Internet Explorer 6 (PC)
              • -
            • Internet Explorer 7 (PC)
              • -
            • FireFox 1.5.0.6 (PC/Mac/Linux)
              • -
            • Opera 9.01 (PC/Mac)
              • -
            • Safari 2.0.4 (Mac)
              • -
            • Safari 3.1.0 (PC)
              • -
            • Konqueror 3.4.0 (Linux)
              • -
            -

            Credits

            Thanks to John Resig for his fantastic jQuery Index: jcarousel/README =================================================================== --- jcarousel/README (revision 0) +++ jcarousel/README (revision 0) @@ -0,0 +1,7 @@ +jCarousel - Riding carousels with jQuery + +jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. +The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled +back and forth (with or without animation). + +See index.html for documentation and examples. Index: jcarousel/examples/static_auto.html =================================================================== --- jcarousel/examples/static_auto.html (revision 5477) +++ jcarousel/examples/static_auto.html (working copy) @@ -7,16 +7,12 @@ - + - + - - Index: jcarousel/examples/static_vertical.html =================================================================== --- jcarousel/examples/static_vertical.html (revision 5477) +++ jcarousel/examples/static_vertical.html (working copy) @@ -7,16 +7,12 @@ - + - + - - Index: jcarousel/examples/static_callbacks.html =================================================================== --- jcarousel/examples/static_callbacks.html (revision 5477) +++ jcarousel/examples/static_callbacks.html (working copy) @@ -7,16 +7,12 @@ - + - + - - Index: jcarousel/examples/dynamic_ajax.html =================================================================== --- jcarousel/examples/dynamic_ajax.html (revision 5477) +++ jcarousel/examples/dynamic_ajax.html (working copy) @@ -8,19 +8,14 @@ - + - + - - - Index: jcarousel/examples/special_flexible.html =================================================================== --- jcarousel/examples/special_flexible.html (revision 5477) +++ jcarousel/examples/special_flexible.html (working copy) @@ -7,16 +7,12 @@ - + - + - - Index: jcarousel/examples/special_textscroller.html =================================================================== --- jcarousel/examples/special_textscroller.html (revision 5477) +++ jcarousel/examples/special_textscroller.html (working copy) @@ -7,15 +7,11 @@ - + - - - + - + - + - - - Index: jcarousel/examples/static_simple.html =================================================================== --- jcarousel/examples/static_simple.html (revision 5477) +++ jcarousel/examples/static_simple.html (working copy) @@ -7,16 +7,12 @@ - + - + - - Index: jcarousel/examples/dynamic_flickr_feed.html =================================================================== --- jcarousel/examples/dynamic_flickr_feed.html (revision 5477) +++ jcarousel/examples/dynamic_flickr_feed.html (working copy) @@ -8,19 +8,14 @@ - + - + - - - @@ -57,7 +52,7 @@ } #mycarousel .jcarousel-item-placeholder { - background: transparent url(../images/loading.gif) 50% 50% no-repeat; + background: transparent url(images/loading.gif) 50% 50% no-repeat; } #mycarousel .jcarousel-next { Index: jcarousel/examples/static_multiple.html =================================================================== --- jcarousel/examples/static_multiple.html (revision 5477) +++ jcarousel/examples/static_multiple.html (working copy) @@ -7,16 +7,12 @@ - + - + - - Index: jcarousel/examples/images/arrow-up.gif =================================================================== Cannot display: file marked as a binary type. svn:mime-type = application/octet-stream Property changes on: jcarousel/examples/images/arrow-up.gif ___________________________________________________________________ Added: svn:mime-type + application/octet-stream Index: jcarousel/examples/images/loading.gif =================================================================== Cannot display: file marked as a binary type. svn:mime-type = application/octet-stream Property changes on: jcarousel/examples/images/loading.gif ___________________________________________________________________ Added: svn:mime-type + application/octet-stream Index: jcarousel/examples/images/arrow-down.gif =================================================================== Cannot display: file marked as a binary type. svn:mime-type = application/octet-stream Property changes on: jcarousel/examples/images/arrow-down.gif ___________________________________________________________________ Added: svn:mime-type + application/octet-stream Index: jcarousel/examples/images/loading-small.gif =================================================================== Cannot display: file marked as a binary type. svn:mime-type = application/octet-stream Property changes on: jcarousel/examples/images/loading-small.gif ___________________________________________________________________ Added: svn:mime-type + application/octet-stream Index: jcarousel/examples/images/loading-thickbox.gif =================================================================== Cannot display: file marked as a binary type. svn:mime-type = application/octet-stream Property changes on: jcarousel/examples/images/loading-thickbox.gif ___________________________________________________________________ Added: svn:mime-type + application/octet-stream Index: jcarousel/examples/static_start.html =================================================================== --- jcarousel/examples/static_start.html (revision 5477) +++ jcarousel/examples/static_start.html (working copy) @@ -7,16 +7,12 @@ - + - + - - Index: jcarousel/examples/special_easing.html =================================================================== --- jcarousel/examples/special_easing.html (revision 5477) +++ jcarousel/examples/special_easing.html (working copy) @@ -7,16 +7,12 @@ - + - + - - Index: jcarousel/examples/dynamic_flickr_api.html =================================================================== --- jcarousel/examples/dynamic_flickr_api.html (revision 5477) +++ jcarousel/examples/dynamic_flickr_api.html (working copy) @@ -8,19 +8,14 @@ - + - + - - - @@ -28,7 +23,7 @@ Index: jcarousel/examples/thickbox/thickbox.css =================================================================== --- jcarousel/examples/thickbox/thickbox.css (revision 0) +++ jcarousel/examples/thickbox/thickbox.css (revision 0) @@ -0,0 +1,159 @@ +/* ----------------------------------------------------------------------------------------------------------------*/ +/* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/ +/* ----------------------------------------------------------------------------------------------------------------*/ +*{padding: 0; margin: 0;} + +/* ----------------------------------------------------------------------------------------------------------------*/ +/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/ +/* ----------------------------------------------------------------------------------------------------------------*/ +#TB_window { + font: 12px Arial, Helvetica, sans-serif; + color: #333333; +} + +#TB_secondLine { + font: 10px Arial, Helvetica, sans-serif; + color:#666666; +} + +#TB_window a:link {color: #666666;} +#TB_window a:visited {color: #666666;} +#TB_window a:hover {color: #000;} +#TB_window a:active {color: #666666;} +#TB_window a:focus{color: #666666;} + +/* ----------------------------------------------------------------------------------------------------------------*/ +/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/ +/* ----------------------------------------------------------------------------------------------------------------*/ +#TB_overlay { + position: fixed; + z-index:100; + top: 0px; + left: 0px; + background-color:#000; + filter:alpha(opacity=75); + -moz-opacity: 0.75; + opacity: 0.75; + height:100%; + width:100%; +} + +* html #TB_overlay { /* ie6 hack */ + position: absolute; + height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); +} + +#TB_window { + position: fixed; + background: #ffffff; + z-index: 102; + color:#000000; + display:none; + border: 4px solid #525252; + text-align:left; + top:50%; + left:50%; +} + +* html #TB_window { /* ie6 hack */ +position: absolute; +margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px'); +} + +#TB_window img#TB_Image { + display:block; + margin: 15px 0 0 15px; + border-right: 1px solid #ccc; + border-bottom: 1px solid #ccc; + border-top: 1px solid #666; + border-left: 1px solid #666; +} + +#TB_caption{ + height:25px; + padding:7px 30px 10px 25px; + float:left; +} + +#TB_closeWindow{ + height:25px; + padding:11px 25px 10px 0; + float:right; +} + +#TB_closeAjaxWindow{ + padding:7px 10px 5px 0; + margin-bottom:1px; + text-align:right; + float:right; +} + +#TB_ajaxWindowTitle{ + float:left; + padding:7px 0 5px 10px; + margin-bottom:1px; +} + +#TB_title{ + background-color:#e8e8e8; + height:27px; +} + +#TB_ajaxContent{ + clear:both; + padding:2px 15px 15px 15px; + overflow:auto; + text-align:left; + line-height:1.4em; +} + +#TB_ajaxContent.TB_modal{ + padding:15px; +} + +#TB_ajaxContent p{ + padding:5px 0px 5px 0px; +} + +#TB_load{ + position: fixed; + display:none; + height:13px; + width:208px; + z-index:103; + top: 50%; + left: 50%; + margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */ +} + +* html #TB_load { /* ie6 hack */ +position: absolute; +margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px'); +} + +#TB_HideSelect{ + z-index:99; + position:fixed; + top: 0; + left: 0; + background-color:#fff; + border:none; + filter:alpha(opacity=0); + -moz-opacity: 0; + opacity: 0; + height:100%; + width:100%; +} + +* html #TB_HideSelect { /* ie6 hack */ + position: absolute; + height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); +} + +#TB_iframeContent{ + clear:both; + border:none; + margin-bottom:-1px; + margin-top:1px; + _margin-bottom:1px; +} Index: jcarousel/examples/thickbox/thickbox.js =================================================================== --- jcarousel/examples/thickbox/thickbox.js (revision 0) +++ jcarousel/examples/thickbox/thickbox.js (revision 0) @@ -0,0 +1,296 @@ +/* + * Thickbox 3 - One Box To Rule Them All. + * By Cody Lindley (http://www.codylindley.com) + * Copyright (c) 2007 cody lindley + * Licensed under the MIT License: http://www.opensource.org/licenses/mit-license.php +*/ + +var tb_pathToImage = "images/loadingAnimation.gif"; + +/*!!!!!!!!!!!!!!!!! edit below this line at your own risk !!!!!!!!!!!!!!!!!!!!!!!*/ + +//on page load call tb_init +$(document).ready(function(){ + tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply thickbox + imgLoader = new Image();// preload image + imgLoader.src = tb_pathToImage; +}); + +//add thickbox to href & area elements that have a class of .thickbox +function tb_init(domChunk){ + $(domChunk).click(function(){ + var t = this.title || this.name || null; + var a = this.href || this.alt; + var g = this.rel || false; + tb_show(t,a,g); + this.blur(); + return false; + }); +} + +function tb_show(caption, url, imageGroup) {//function called when the user clicks on a thickbox link + + try { + if (typeof document.body.style.maxHeight === "undefined") {//if IE 6 + $("body","html").css({height: "100%", width: "100%"}); + $("html").css("overflow","hidden"); + if (document.getElementById("TB_HideSelect") === null) {//iframe to hide select elements in ie6 + $("body").append("

            "); + $("#TB_overlay").click(tb_remove); + } + }else{//all others + if(document.getElementById("TB_overlay") === null){ + $("body").append("
            "); + $("#TB_overlay").click(tb_remove); + } + } + + if(caption===null){caption="";} + $("body").append("
            ");//add loader to the page + $('#TB_load').show();//show loader + + var baseURL; + if(url.indexOf("?")!==-1){ //ff there is a query string involved + baseURL = url.substr(0, url.indexOf("?")); + }else{ + baseURL = url; + } + + var urlString = /\.jpg|\.jpeg|\.png|\.gif|\.bmp/g; + var urlType = baseURL.toLowerCase().match(urlString); + + if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp'){//code to show images + + TB_PrevCaption = ""; + TB_PrevURL = ""; + TB_PrevHTML = ""; + TB_NextCaption = ""; + TB_NextURL = ""; + TB_NextHTML = ""; + TB_imageCount = ""; + TB_FoundURL = false; + if(imageGroup){ + TB_TempArray = $("a[@rel="+imageGroup+"]").get(); + for (TB_Counter = 0; ((TB_Counter < TB_TempArray.length) && (TB_NextHTML === "")); TB_Counter++) { + var urlTypeTemp = TB_TempArray[TB_Counter].href.toLowerCase().match(urlString); + if (!(TB_TempArray[TB_Counter].href == url)) { + if (TB_FoundURL) { + TB_NextCaption = TB_TempArray[TB_Counter].title; + TB_NextURL = TB_TempArray[TB_Counter].href; + TB_NextHTML = "  Next >"; + } else { + TB_PrevCaption = TB_TempArray[TB_Counter].title; + TB_PrevURL = TB_TempArray[TB_Counter].href; + TB_PrevHTML = "  < Prev"; + } + } else { + TB_FoundURL = true; + TB_imageCount = "Image " + (TB_Counter + 1) +" of "+ (TB_TempArray.length); + } + } + } + + imgPreloader = new Image(); + imgPreloader.onload = function(){ + imgPreloader.onload = null; + + // Resizing large images - orginal by Christian Montoya edited by me. + var pagesize = tb_getPageSize(); + var x = pagesize[0] - 150; + var y = pagesize[1] - 150; + var imageWidth = imgPreloader.width; + var imageHeight = imgPreloader.height; + if (imageWidth > x) { + imageHeight = imageHeight * (x / imageWidth); + imageWidth = x; + if (imageHeight > y) { + imageWidth = imageWidth * (y / imageHeight); + imageHeight = y; + } + } else if (imageHeight > y) { + imageWidth = imageWidth * (y / imageHeight); + imageHeight = y; + if (imageWidth > x) { + imageHeight = imageHeight * (x / imageWidth); + imageWidth = x; + } + } + // End Resizing + + TB_WIDTH = imageWidth + 30; + TB_HEIGHT = imageHeight + 60; + $("#TB_window").append(""+caption+"" + "
            "+caption+"
            " + TB_imageCount + TB_PrevHTML + TB_NextHTML + "
            close or Esc Key
            "); + + $("#TB_closeWindowButton").click(tb_remove); + + if (!(TB_PrevHTML === "")) { + function goPrev(){ + if($(document).unbind("click",goPrev)){$(document).unbind("click",goPrev);} + $("#TB_window").remove(); + $("body").append("
            "); + tb_show(TB_PrevCaption, TB_PrevURL, imageGroup); + return false; + } + $("#TB_prev").click(goPrev); + } + + if (!(TB_NextHTML === "")) { + function goNext(){ + $("#TB_window").remove(); + $("body").append("
            "); + tb_show(TB_NextCaption, TB_NextURL, imageGroup); + return false; + } + $("#TB_next").click(goNext); + + } + + document.onkeydown = function(e){ + if (e == null) { // ie + keycode = event.keyCode; + } else { // mozilla + keycode = e.which; + } + if(keycode == 27){ // close + tb_remove(); + } else if(keycode == 190){ // display previous image + if(!(TB_NextHTML == "")){ + document.onkeydown = ""; + goNext(); + } + } else if(keycode == 188){ // display next image + if(!(TB_PrevHTML == "")){ + document.onkeydown = ""; + goPrev(); + } + } + }; + + tb_position(); + $("#TB_load").remove(); + $("#TB_ImageOff").click(tb_remove); + $("#TB_window").css({display:"block"}); //for safari using css instead of show + }; + + imgPreloader.src = url; + }else{//code to show html pages + + var queryString = url.replace(/^[^\?]+\??/,''); + var params = tb_parseQuery( queryString ); + + TB_WIDTH = (params['width']*1) + 30 || 630; //defaults to 630 if no paramaters were added to URL + TB_HEIGHT = (params['height']*1) + 40 || 440; //defaults to 440 if no paramaters were added to URL + ajaxContentW = TB_WIDTH - 30; + ajaxContentH = TB_HEIGHT - 45; + + if(url.indexOf('TB_iframe') != -1){ + urlNoQuery = url.split('TB_'); + $("#TB_window").append("
            "+caption+"
            close or Esc Key
            "); + }else{ + if($("#TB_window").css("display") != "block"){ + if(params['modal'] != "true"){ + $("#TB_window").append("
            "+caption+"
            close or Esc Key
            "); + }else{ + $("#TB_overlay").unbind(); + $("#TB_window").append("
            "); + } + }else{ + $("#TB_ajaxContent")[0].style.width = ajaxContentW +"px"; + $("#TB_ajaxContent")[0].style.height = ajaxContentH +"px"; + $("#TB_ajaxContent")[0].scrollTop = 0; + $("#TB_ajaxWindowTitle").html(caption); + } + } + + $("#TB_closeWindowButton").click(tb_remove); + + if(url.indexOf('TB_inline') != -1){ + $("#TB_ajaxContent").html($('#' + params['inlineId']).html()); + tb_position(); + $("#TB_load").remove(); + $("#TB_window").css({display:"block"}); + }else if(url.indexOf('TB_iframe') != -1){ + tb_position(); + if(frames['TB_iframeContent'] === undefined){//be nice to safari + $("#TB_load").remove(); + $("#TB_window").css({display:"block"}); + $(document).keyup( function(e){ var key = e.keyCode; if(key == 27){tb_remove();}}); + } + }else{ + $("#TB_ajaxContent").load(url += "&random=" + (new Date().getTime()),function(){//to do a post change this load method + tb_position(); + $("#TB_load").remove(); + tb_init("#TB_ajaxContent a.thickbox"); + $("#TB_window").css({display:"block"}); + }); + } + + } + + if(!params['modal']){ + document.onkeyup = function(e){ + if (e == null) { // ie + keycode = event.keyCode; + } else { // mozilla + keycode = e.which; + } + if(keycode == 27){ // close + tb_remove(); + } + }; + } + + } catch(e) { + //nothing here + } +} + +//helper functions below +function tb_showIframe(){ + $("#TB_load").remove(); + $("#TB_window").css({display:"block"}); +} + +function tb_remove() { + $("#TB_imageOff").unbind("click"); + $("#TB_overlay").unbind("click"); + $("#TB_closeWindowButton").unbind("click"); + $("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').remove();}); + $("#TB_load").remove(); + if (typeof document.body.style.maxHeight == "undefined") {//if IE 6 + $("body","html").css({height: "auto", width: "auto"}); + $("html").css("overflow",""); + } + document.onkeydown = ""; + return false; +} + +function tb_position() { +$("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'}); + if ( !(jQuery.browser.msie && typeof XMLHttpRequest == 'function')) { // take away IE6 + $("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'}); + } +} + +function tb_parseQuery ( query ) { + var Params = {}; + if ( ! query ) {return Params;}// return empty object + var Pairs = query.split(/[;&]/); + for ( var i = 0; i < Pairs.length; i++ ) { + var KeyVal = Pairs[i].split('='); + if ( ! KeyVal || KeyVal.length != 2 ) {continue;} + var key = unescape( KeyVal[0] ); + var val = unescape( KeyVal[1] ); + val = val.replace(/\+/g, ' '); + Params[key] = val; + } + return Params; +} + +function tb_getPageSize(){ + var de = document.documentElement; + var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth; + var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight; + arrayPageSize = [w,h]; + return arrayPageSize; +} Index: jcarousel/examples/dynamic_javascript.html =================================================================== --- jcarousel/examples/dynamic_javascript.html (revision 5477) +++ jcarousel/examples/dynamic_javascript.html (working copy) @@ -8,19 +8,14 @@ - + - + - - - Index: jcarousel/examples/static_controls.html =================================================================== --- jcarousel/examples/static_controls.html (revision 5477) +++ jcarousel/examples/static_controls.html (working copy) @@ -7,16 +7,12 @@ - + - + - - Index: jcarousel/examples/special_thickbox.html =================================================================== --- jcarousel/examples/special_thickbox.html (revision 5477) +++ jcarousel/examples/special_thickbox.html (working copy) @@ -7,23 +7,19 @@ - + - + - + - - - + @@ -32,7 +28,7 @@ + + + + + + + + + +
            +

            jCarousel

            +

            Riding carousels with jQuery

            + +

            Circular carousel

            +

            + This example shows a simple circular carousel. +

            + +
              +
              • +
              • +
              • +
              • +
              • +
              • +
              • +
              • +
              • +
              • +
            + +
            + +