").append(c.replace(bP,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bQ.test(this.nodeName)||bK.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bH,"\r\n")}}):{name:b.name,value:c.replace(bH,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.bind(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?cb(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),cb(a,b);return a},ajaxSettings:{url:bX,isLocal:bL.test(bY[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bZ},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:b_(bV),ajaxTransport:b_(bW),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?cd(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=ce(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.fireWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f.Callbacks("once memory"),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bJ.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.add,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bI,"").replace(bN,bY[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bR),d.crossDomain==null&&(r=bT.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bY[1]&&r[2]==bY[2]&&(r[3]||(r[1]==="http:"?80:443))==(bY[3]||(bY[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),ca(bV,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bM.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bO.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bS,"$1_="+x);d.url=y+(y===d.url?(bO.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bZ+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=ca(bW,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){s<2?w(-1,z):f.error(z)}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)cc(g,a[g],c,e);return d.join("&").replace(bF,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var cf=f.now(),cg=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+cf++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(cg.test(b.url)||e&&cg.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(cg,l),b.url===j&&(e&&(k=k.replace(cg,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var ch=a.ActiveXObject?function(){for(var a in cj)cj[a](0,1)}:!1,ci=0,cj;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ck()||cl()}:ck,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,ch&&delete cj[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++ci,ch&&(cj||(cj={},f(a).unload(ch)),cj[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var cm={},cn,co,cp=/^(?:toggle|show|hide)$/,cq=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cr,cs=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],ct;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cw("show",3),a,b,c);for(var g=0,h=this.length;g
=i.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),i.animatedProperties[this.prop]=!0;for(b in i.animatedProperties)i.animatedProperties[b]!==!0&&(g=!1);if(g){i.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){h.style["overflow"+b]=i.overflow[a]}),i.hide&&f(h).hide();if(i.hide||i.show)for(b in i.animatedProperties)f.style(h,b,i.orig[b]),f.removeData(h,"fxshow"+b,!0),f.removeData(h,"toggle"+b,!0);d=i.complete,d&&(i.complete=!1,d.call(h))}return!1}i.duration==Infinity?this.now=e:(c=e-this.startTime,this.state=c/i.duration,this.pos=f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){var a,b=f.timers,c=0;for(;c-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cz.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cz.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cA(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cA(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a?a.style?parseFloat(f.css(a,d,"padding")):this[d]():null},f.fn["outer"+c]=function(a){var b=this[0];return b?b.style?parseFloat(f.css(b,d,a?"margin":"border")):this[d]():null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c],h=e.document.body;return e.document.compatMode==="CSS1Compat"&&g||h&&h["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var i=f.css(e,d),j=parseFloat(i);return f.isNumeric(j)?j:i}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f})(window);
--------------------------------------------------------------------------------
/js/jquery.featureCarousel.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * Feature Carousel, Version 1.3
3 | * http://www.bkosolutions.com
4 | *
5 | * Copyright 2011 Brian Osborne
6 | * Licensed under GPL version 3
7 | * brian@bkosborne.com
8 | *
9 | * http://www.gnu.org/licenses/gpl.txt
10 | */
11 | (function($) {
12 |
13 | $.fn.featureCarousel = function (options) {
14 |
15 | // Adds support for multiple carousels on one page
16 | if (this.length > 1) {
17 | this.each(function() {
18 | $(this).featureCarousel(options);
19 | });
20 | return this;
21 | }
22 |
23 | // override the default options with user defined options
24 | options = $.extend({}, $.fn.featureCarousel.defaults, options || {});
25 |
26 | /* These are universal values that are used throughout the plugin. Do not modify them
27 | * unless you know what you're doing. Most of them feed off the options
28 | * so most customization can be achieved by modifying the options values */
29 | var pluginData = {
30 | currentCenterNum: options.startingFeature,
31 | containerWidth: 0,
32 | containerHeight: 0,
33 | largeFeatureWidth: 0,
34 | largeFeatureHeight: 0,
35 | smallFeatureWidth: 0,
36 | smallFeatureHeight: 0,
37 | totalFeatureCount: $(this).children("div").length,
38 | currentlyMoving: false,
39 | featuresContainer: $(this),
40 | featuresArray: [],
41 | containerIDTag: "#"+$(this).attr("id"),
42 | timeoutVar: null,
43 | rotationsRemaining: 0,
44 | itemsToAnimate: 0,
45 | borderWidth: 0
46 | };
47 |
48 | /**
49 | * Function to preload the images in the carousel if desired.
50 | * This is not recommended if there are a lot of images in the carousel because
51 | * it may take a while. Functionality does not depend on preloading the images
52 | */
53 | var preload = function(callback) {
54 | // user may not want to preload images
55 | if (options.preload == true) {
56 | var $imageElements = pluginData.featuresContainer.find("img");
57 | var loadedImages = 0;
58 | var totalImages = $imageElements.length;
59 |
60 | $imageElements.each(function (index, element) {
61 | // Attempt to load the images
62 | var img = new Image();
63 | $(img).bind('load error', function () {
64 | // Add to number of images loaded and see if they are all done yet
65 | loadedImages++;
66 | if (loadedImages == totalImages) {
67 | // All done, perform callback
68 | callback();
69 | }
70 | });
71 |
72 | img.src = element.src;
73 | });
74 | } else {
75 | // if user doesn't want preloader, then just go right to callback
76 | callback();
77 | }
78 | }
79 |
80 | // Gets the feature container based on the number
81 | var getContainer = function(featureNum) {
82 | return pluginData.featuresArray[featureNum-1];
83 | }
84 |
85 | // get a feature given it's set position (the position that doesn't change)
86 | var getBySetPos = function(position) {
87 | $.each(pluginData.featuresArray, function () {
88 | if ($(this).data().setPosition == position)
89 | return $(this);
90 | });
91 | }
92 |
93 | // get previous feature number
94 | var getPreviousNum = function(num) {
95 | if ((num - 1) == 0) {
96 | return pluginData.totalFeatureCount;
97 | } else {
98 | return num - 1;
99 | }
100 | }
101 |
102 | // get next feature number
103 | var getNextNum = function(num) {
104 | if ((num + 1) > pluginData.totalFeatureCount) {
105 | return 1;
106 | } else {
107 | return num + 1;
108 | }
109 | }
110 |
111 | /**
112 | * Because there are several options the user can set for the width and height
113 | * of the feature images, this function is used to determine which options were set
114 | * and to set the appropriate dimensions used for a small and large feature
115 | */
116 | var setupFeatureDimensions = function() {
117 | // Set the height and width of the entire carousel container
118 | pluginData.containerWidth = pluginData.featuresContainer.width();
119 | pluginData.containerHeight = pluginData.featuresContainer.height();
120 |
121 | // Grab the first image for reference
122 | var $firstFeatureImage = $(pluginData.containerIDTag).find(".carousel-image:first");
123 |
124 | // Large Feature Width
125 | if (options.largeFeatureWidth > 1)
126 | pluginData.largeFeatureWidth = options.largeFeatureWidth;
127 | else if (options.largeFeatureWidth > 0 && options.largeFeatureWidth < 1)
128 | pluginData.largeFeatureWidth = $firstFeatureImage.width() * options.largeFeatureWidth;
129 | else
130 | pluginData.largeFeatureWidth = $firstFeatureImage.outerWidth();
131 | // Large Feature Height
132 | if (options.largeFeatureHeight > 1)
133 | pluginData.largeFeatureHeight = options.largeFeatureHeight;
134 | else if (options.largeFeatureHeight > 0 && options.largeFeatureHeight < 1)
135 | pluginData.largeFeatureHeight = $firstFeatureImage.height() * options.largeFeatureHeight;
136 | else
137 | pluginData.largeFeatureHeight = $firstFeatureImage.outerHeight();
138 | // Small Feature Width
139 | if (options.smallFeatureWidth > 1)
140 | pluginData.smallFeatureWidth = options.smallFeatureWidth;
141 | else if (options.smallFeatureWidth > 0 && options.smallFeatureWidth < 1)
142 | pluginData.smallFeatureWidth = $firstFeatureImage.width() * options.smallFeatureWidth;
143 | else
144 | pluginData.smallFeatureWidth = $firstFeatureImage.outerWidth() / 2;
145 | // Small Feature Height
146 | if (options.smallFeatureHeight > 1)
147 | pluginData.smallFeatureHeight = options.smallFeatureHeight;
148 | else if (options.smallFeatureHeight > 0 && options.smallFeatureHeight < 1)
149 | pluginData.smallFeatureHeight = $firstFeatureImage.height() * options.smallFeatureHeight;
150 | else
151 | pluginData.smallFeatureHeight = $firstFeatureImage.outerHeight() / 2;
152 | }
153 |
154 | /**
155 | * Function to take care of setting up various aspects of the carousel,
156 | * most importantly the default positions for the features
157 | */
158 | var setupCarousel = function() {
159 | // Set the total feature count to the amount the user wanted to cutoff
160 | if (options.displayCutoff > 0 && options.displayCutoff < pluginData.totalFeatureCount) {
161 | pluginData.totalFeatureCount = options.displayCutoff;
162 | }
163 |
164 | // fill in the features array
165 | pluginData.featuresContainer.find(".carousel-feature").each(function (index) {
166 | if (index < pluginData.totalFeatureCount) {
167 | pluginData.featuresArray[index] = $(this);
168 | }
169 | });
170 |
171 | // Determine the total border width around the feature if there is one
172 | if (pluginData.featuresContainer.find(".carousel-feature").first().css("borderLeftWidth") != "medium") {
173 | pluginData.borderWidth = parseInt(pluginData.featuresContainer.find(".carousel-feature").first().css("borderLeftWidth"))*2;
174 | }
175 |
176 | // Place all the features in a center hidden position to start off
177 | pluginData.featuresContainer
178 | // Have to make the container relative positioning
179 | .find(".carousel-feature").each(function () {
180 | // Center all the features in the middle and hide them
181 | $(this).css({
182 | 'left': (pluginData.containerWidth / 2) - (pluginData.smallFeatureWidth / 2) - (pluginData.borderWidth / 2),
183 | 'width': pluginData.smallFeatureWidth,
184 | 'height': pluginData.smallFeatureHeight,
185 | 'top': options.smallFeatureOffset + options.topPadding,
186 | 'opacity': 0
187 | });
188 | })
189 | // Set all the images to small feature size
190 | .find(".carousel-image").css({
191 | 'width': pluginData.smallFeatureWidth
192 | });
193 |
194 | // set position to relative of captions if displaying below image
195 | if (options.captionBelow) {
196 | pluginData.featuresContainer.find('.carousel-caption').css('position','relative');
197 | }
198 |
199 | // figure out number of items that will rotate each time
200 | if (pluginData.totalFeatureCount < 4) {
201 | pluginData.itemsToAnimate = pluginData.totalFeatureCount;
202 | } else {
203 | pluginData.itemsToAnimate = 4;
204 | }
205 |
206 | // Hide story info and set the proper positioning
207 | pluginData.featuresContainer.find(".carousel-caption")
208 | .hide();
209 | }
210 |
211 | /**
212 | * Here all the position data is set for the features.
213 | * This is an important part of the carousel to keep track of where
214 | * each feature within the carousel is
215 | */
216 | var setupFeaturePositions = function() {
217 | // give all features a set number that won't change so they remember their
218 | // original order
219 | $.each(pluginData.featuresArray, function (i) {
220 | $(this).data('setPosition',i+1);
221 | });
222 |
223 | // Go back one - This is done because we call the move function right away, which
224 | // shifts everything to the right. So we set the current center back one, so that
225 | // it displays in the center when that happens
226 | var oneBeforeStarting = getPreviousNum(options.startingFeature);
227 | pluginData.currentCenterNum = oneBeforeStarting;
228 |
229 | // Center feature will be position 1
230 | var $centerFeature = getContainer(oneBeforeStarting);
231 | $centerFeature.data('position',1);
232 |
233 | // Everything before that center feature...
234 | var $prevFeatures = $centerFeature.prevAll();
235 | $prevFeatures.each(function (i) {
236 | $(this).data('position',(pluginData.totalFeatureCount - i));
237 | });
238 |
239 | // And everything after that center feature...
240 | var $nextFeatures = $centerFeature.nextAll();
241 | $nextFeatures.each(function (i) {
242 | if ($(this).data('setPosition') != undefined) {
243 | $(this).data('position',(i + 2));
244 | }
245 | });
246 |
247 | // if the counter style is for including number tags in description...
248 | if (options.counterStyle == 'caption') {
249 | $.each(pluginData.featuresArray, function () {
250 | var pos = getPreviousNum($(this).data('position'));
251 | var $numberTag = $("");
252 | $numberTag.addClass("numberTag");
253 | $numberTag.html("("+ pos + " of " + pluginData.totalFeatureCount + ") ");
254 | $(this).find('.carousel-caption p').prepend($numberTag);
255 | });
256 | }
257 | }
258 |
259 | /**
260 | * This function will set up the two different types of trackers used
261 | */
262 | var setupTrackers = function()
263 | {
264 | if (options.trackerIndividual) {
265 | // construct the tracker list
266 | var $list = $("");
267 | $list.addClass("tracker-individual-container");
268 | for (var i = 0; i < pluginData.totalFeatureCount; i++) {
269 | // item position one plus the index
270 | var counter = i+1;
271 |
272 | // Build the DOM for the tracker list
273 | var $trackerBlip = $(""+counter+"
");
274 | $trackerBlip.addClass("tracker-individual-blip");
275 | $trackerBlip.css("cursor","pointer");
276 | $trackerBlip.attr("id","tracker-"+(i+1));
277 | var $listEntry = $("");
278 | $listEntry.append($trackerBlip);
279 | $listEntry.css("float","left");
280 | $listEntry.css("list-style-type","none");
281 | $list.append($listEntry);
282 | }
283 | // add the blip list and then make sure it's visible
284 | $(pluginData.containerIDTag).append($list);
285 | $list.hide().show();
286 | }
287 |
288 | if (options.trackerSummation) {
289 | // Build the tracker div that will hold the tracking data
290 | var $tracker = $('');
291 | $tracker.addClass('tracker-summation-container');
292 | // Collect info in spans
293 | var $current = $('').addClass('tracker-summation-current').text(options.startingFeature);
294 | var $total = $('').addClass('tracker-summation-total').text(pluginData.totalFeatureCount);
295 | var $middle = $('').addClass('tracker-summation-middle').text(' of ');
296 | // Add it all together
297 | $tracker.append($current).append($middle).append($total);
298 | // Insert into DOM
299 | $(pluginData.containerIDTag).append($tracker);
300 | }
301 | }
302 |
303 | // Update the tracker information with the new centered feature
304 | var updateTracker = function(oldCenter, newCenter) {
305 | if (options.trackerIndividual) {
306 | // get selectors for the two trackers
307 | var $trackerContainer = pluginData.featuresContainer.find(".tracker-individual-container");
308 | var $oldCenter = $trackerContainer.find("#tracker-"+oldCenter);
309 | var $newCenter = $trackerContainer.find("#tracker-"+newCenter);
310 |
311 | // change classes
312 | $oldCenter.removeClass("tracker-individual-blip-selected");
313 | $newCenter.addClass("tracker-individual-blip-selected");
314 | }
315 |
316 | if (options.trackerSummation) {
317 | var $trackerContainer = pluginData.featuresContainer.find('.tracker-summation-container');
318 | $trackerContainer.find('.tracker-summation-current').text(newCenter);
319 | }
320 | }
321 |
322 | /**
323 | * This function will set the autoplay for the carousel to
324 | * automatically rotate it given the time in the options
325 | * pass in TRUE to just clear the timer
326 | */
327 | var setTimer = function(stop) {
328 | // clear the timeout var if it exists
329 | clearTimeout(pluginData.timeoutVar);
330 |
331 | // set interval for moving if autoplay is set
332 | if (!stop && options.autoPlay != 0) {
333 | var autoTime = (Math.abs(options.autoPlay) < options.carouselSpeed) ? options.carouselSpeed : Math.abs(options.autoPlay);
334 | pluginData.timeoutVar = setTimeout(function () {
335 | (options.autoPlay > 0) ? initiateMove(true,1) : initiateMove(false,1);
336 | }, autoTime);
337 | }
338 | }
339 |
340 |
341 | // This is a helper function for the animateFeature function that
342 | // will update the positions of all the features based on the direction
343 | var rotatePositions = function(direction) {
344 | $.each(pluginData.featuresArray, function () {
345 | var newPos;
346 | if (direction == false) {
347 | newPos = getNextNum($(this).data().position);
348 | } else {
349 | newPos = getPreviousNum($(this).data().position);
350 | }
351 | $(this).data('position',newPos);
352 | });
353 | }
354 |
355 | /**
356 | * This function is used to animate the given feature to the given
357 | * location. Valid locations are "left", "right", "center", "hidden"
358 | */
359 | var animateFeature = function($feature, direction)
360 | {
361 | var new_width, new_height, new_top, new_left, new_zindex, new_padding, new_fade;
362 |
363 | // Determine the old and new positions of the feature
364 | var oldPosition = $feature.data('position');
365 | var newPosition;
366 | if (direction == true)
367 | newPosition = getPreviousNum(oldPosition);
368 | else
369 | newPosition = getNextNum(oldPosition);
370 |
371 | // callback for moving out of center pos
372 | if (oldPosition == 1) {
373 | options.leavingCenter($feature);
374 | }
375 |
376 | // Caculate new new css values depending on where the feature will be located
377 | if (newPosition == 1) {
378 | new_width = pluginData.largeFeatureWidth;
379 | new_height = pluginData.largeFeatureHeight;
380 | new_top = options.topPadding;
381 | new_zindex = $feature.css("z-index");
382 | new_left = (pluginData.containerWidth / 2) - (pluginData.largeFeatureWidth / 2) - (pluginData.borderWidth / 2);
383 | new_fade = 1.0;
384 | } else {
385 | new_width = pluginData.smallFeatureWidth;
386 | new_height = pluginData.smallFeatureHeight;
387 | new_top = options.smallFeatureOffset + options.topPadding;
388 | new_zindex = 1;
389 | new_fade = 0.4;
390 | // some info is different for the left, right, and hidden positions
391 | // left
392 | if (newPosition == pluginData.totalFeatureCount) {
393 | new_left = options.sidePadding;
394 | // right
395 | } else if (newPosition == 2) {
396 | new_left = pluginData.containerWidth - pluginData.smallFeatureWidth - options.sidePadding - pluginData.borderWidth;
397 | // hidden
398 | } else {
399 | new_left = (pluginData.containerWidth / 2) - (pluginData.smallFeatureWidth / 2) - (pluginData.borderWidth / 2);
400 | new_fade = 0;
401 | }
402 | }
403 | // This code block takes care of hiding the feature information if the feature is leaving the center
404 | if (oldPosition == 1) {
405 | // Slide up the story information
406 | $feature.find(".carousel-caption")
407 | .hide();
408 | }
409 |
410 | // Animate the feature div to its new location
411 | $feature
412 | .animate(
413 | {
414 | width: new_width,
415 | height: new_height,
416 | top: new_top,
417 | left: new_left,
418 | opacity: new_fade
419 | },
420 | options.carouselSpeed,
421 | options.animationEasing,
422 | function () {
423 | // Take feature info out of hiding if new position is center
424 | if (newPosition == 1) {
425 | // need to set the height to auto to accomodate caption if displayed below image
426 | if (options.captionBelow)
427 | $feature.css('height','auto');
428 | // fade in the feature information
429 | $feature.find(".carousel-caption")
430 | .fadeTo("fast",0.85);
431 | // callback for moved to center
432 | options.movedToCenter($feature);
433 | }
434 | // decrement the animation queue
435 | pluginData.rotationsRemaining = pluginData.rotationsRemaining - 1;
436 | // have to change the z-index after the animation is done
437 | $feature.css("z-index", new_zindex);
438 | // change trackers if using them
439 | if (options.trackerIndividual || options.trackerSummation) {
440 | // just update the tracker once; once the new center feature has arrived in center
441 | if (newPosition == 1) {
442 | // figure out what item was just in the center, and what item is now in the center
443 | var newCenterItemNum = pluginData.featuresContainer.find(".carousel-feature").index($feature) + 1;
444 | var oldCenterItemNum;
445 | if (direction == false)
446 | oldCenterItemNum = getNextNum(newCenterItemNum);
447 | else
448 | oldCenterItemNum = getPreviousNum(newCenterItemNum);
449 | // now update the trackers
450 | updateTracker(oldCenterItemNum, newCenterItemNum);
451 | }
452 | }
453 |
454 | // did all the the animations finish yet?
455 | var divide = pluginData.rotationsRemaining / pluginData.itemsToAnimate;
456 | if (divide % 1 == 0) {
457 | // if so, set moving to false...
458 | pluginData.currentlyMoving = false;
459 | // change positions for all items...
460 | rotatePositions(direction);
461 |
462 | // and move carousel again if queue is not empty
463 | if (pluginData.rotationsRemaining > 0)
464 | move(direction);
465 | }
466 |
467 | // reset timer and auto rotate again
468 | setTimer(false);
469 | }
470 | )
471 | // select the image within the feature
472 | .find('.carousel-image')
473 | // animate its size down
474 | .animate({
475 | width: new_width,
476 | height: new_height
477 | },
478 | options.carouselSpeed,
479 | options.animationEasing)
480 | .end();
481 | }
482 |
483 | /**
484 | * move the carousel to the left or to the right. The features that
485 | * will move into the four positions are calculated and then animated
486 | * rotate to the RIGHT when direction is TRUE and
487 | * rotate to the LEFT when direction is FALSE
488 | */
489 | var move = function(direction)
490 | {
491 | // Set the carousel to currently moving
492 | pluginData.currentlyMoving = true;
493 |
494 | // Obtain the new feature positions based on the direction that the carousel is moving
495 | var $newCenter, $newLeft, $newRight, $newHidden;
496 | if (direction == true) {
497 | // Shift features to the left
498 | $newCenter = getContainer(getNextNum(pluginData.currentCenterNum));
499 | $newLeft = getContainer(pluginData.currentCenterNum);
500 | $newRight = getContainer(getNextNum(getNextNum(pluginData.currentCenterNum)));
501 | $newHidden = getContainer(getPreviousNum(pluginData.currentCenterNum));
502 | pluginData.currentCenterNum = getNextNum(pluginData.currentCenterNum);
503 | } else {
504 | $newCenter = getContainer(getPreviousNum(pluginData.currentCenterNum));
505 | $newLeft = getContainer(getPreviousNum(getPreviousNum(pluginData.currentCenterNum)));
506 | $newRight = getContainer(pluginData.currentCenterNum);
507 | $newHidden = getContainer(getNextNum(pluginData.currentCenterNum));
508 | pluginData.currentCenterNum = getPreviousNum(pluginData.currentCenterNum);
509 | }
510 |
511 | // The z-index must be set before animations take place for certain movements
512 | // this makes the animations look nicer
513 | if (direction) {
514 | $newLeft.css("z-index", 3);
515 | } else {
516 | $newRight.css("z-index", 3);
517 | }
518 | $newCenter.css("z-index", 4);
519 |
520 | // Fire moving to center event
521 | options.movingToCenter($newCenter);
522 |
523 | // Animate the features into their new positions
524 | animateFeature($newLeft, direction);
525 | animateFeature($newCenter, direction);
526 | animateFeature($newRight, direction);
527 | // Only want to animate the "hidden" feature if there are more than three
528 | if (pluginData.totalFeatureCount > 3) {
529 | animateFeature($newHidden, direction);
530 | }
531 | }
532 |
533 | // This is used to relegate carousel movement throughout the plugin
534 | // It will only initiate a move if the carousel isn't currently moving
535 | // It will set the animation queue to the number of rotations given
536 | var initiateMove = function(direction, rotations) {
537 | if (pluginData.currentlyMoving == false) {
538 | var queue = rotations * pluginData.itemsToAnimate;
539 | pluginData.rotationsRemaining = queue;
540 | move(direction);
541 | }
542 | }
543 |
544 | /**
545 | * This will find the shortest distance to travel the carousel from
546 | * one position to another position. It will return the shortest distance
547 | * in number form, and will be positive to go to the right and negative for left
548 | */
549 | var findShortestDistance = function(from, to) {
550 | var goingToLeft = 1, goingToRight = 1, tracker;
551 | tracker = from;
552 | // see how long it takes to go to the left
553 | while ((tracker = getPreviousNum(tracker)) != to) {
554 | goingToLeft++;
555 | }
556 |
557 | tracker = from;
558 | // see how long it takes to to to the right
559 | while ((tracker = getNextNum(tracker)) != to) {
560 | goingToRight++;
561 | }
562 |
563 | // whichever is shorter
564 | return (goingToLeft < goingToRight) ? goingToLeft*-1 : goingToRight;
565 | }
566 |
567 | // Move to the left if left button clicked
568 | $(options.leftButtonTag).on('click',function () {
569 | initiateMove(false,1);
570 | });
571 |
572 | // Move to right if right button clicked
573 | $(options.rightButtonTag).on('click',function () {
574 | initiateMove(true,1);
575 | });
576 |
577 | // These are the click and hover events for the features
578 | pluginData.featuresContainer.find(".carousel-feature")
579 | .click(function () {
580 | var position = $(this).data('position');
581 | if (position == 2) {
582 | initiateMove(true,1);
583 | } else if (position == pluginData.totalFeatureCount) {
584 | initiateMove(false,1);
585 | }
586 | })
587 | .mouseover(function () {
588 | if (pluginData.currentlyMoving == false) {
589 | var position = $(this).data('position');
590 | if (position == 2 || position == pluginData.totalFeatureCount) {
591 | $(this).css("opacity",0.8);
592 | }
593 | }
594 | // pause the rotation?
595 | if (options.pauseOnHover) setTimer(true);
596 | // stop the rotation?
597 | if (options.stopOnHover) options.autoPlay = 0;
598 | })
599 | .mouseout(function () {
600 | if (pluginData.currentlyMoving == false) {
601 | var position = $(this).data('position');
602 | if (position == 2 || position == pluginData.totalFeatureCount) {
603 | $(this).css("opacity",0.4);
604 | }
605 | }
606 | // resume the rotation
607 | if (options.pauseOnHover) {
608 | setTimer(false);
609 | }
610 | });
611 |
612 | // Add event listener to all clicks within the features container
613 | // This is done to disable any links that aren't within the center feature
614 | $("a", pluginData.containerIDTag).on("click", function (event) {
615 | // travel up to the container
616 | var $parents = $(this).parentsUntil(pluginData.containerIDTag);
617 | // now check each of the feature divs within it
618 | $parents.each(function () {
619 | var position = $(this).data('position');
620 | // if there are more than just feature divs within the container, they will
621 | // not have a position and it may come back as undefined. Throw these out
622 | if (position != undefined) {
623 | // if any of the links on a feature OTHER THAN the center feature were clicked,
624 | // initiate a carousel move but then throw the link action away
625 | if (position != 1) {
626 | if (position == pluginData.totalFeatureCount) {
627 | initiateMove(false,1);
628 | } else if (position == 2) {
629 | initiateMove(true,1);
630 | }
631 | event.preventDefault();
632 | return false;
633 | // if the position WAS the center (i.e. 1), fire callback
634 | } else {
635 | options.clickedCenter($(this));
636 | }
637 | }
638 | });
639 | });
640 |
641 | // Did someone click one of the individual trackers?
642 | $(".tracker-individual-blip", pluginData.containerIDTag).on("click",function () {
643 | // grab the position # that was clicked
644 | var goTo = $(this).attr("id").substring(8);
645 | // find out where that feature # actually is in the carousel right now
646 | var whereIsIt = pluginData.featuresContainer.find(".carousel-feature").eq(goTo-1).data('position');
647 | // which feature # is currently in the center
648 | var currentlyAt = pluginData.currentCenterNum;
649 | // if the tracker was clicked for the current center feature, do nothing
650 | if (goTo != currentlyAt) {
651 | // find the shortest distance to move the carousel
652 | var shortest = findShortestDistance(1, whereIsIt);
653 | // initiate a move in that direction with given number of rotations
654 | if (shortest < 0) {
655 | initiateMove(false,(shortest*-1));
656 | } else {
657 | initiateMove(true,shortest);
658 | }
659 | }
660 |
661 | });
662 |
663 | /****************
664 | PUBLIC FUNCTIONS
665 | ****************/
666 | this.initialize = function () {
667 | // Call the preloader and pass in our callback, which is just a slew of function calls
668 | // that should only be executed after the images have been loaded
669 | preload(function () {
670 | setupFeatureDimensions();
671 | setupCarousel();
672 | setupFeaturePositions();
673 | setupTrackers();
674 | initiateMove(true,1);
675 | });
676 |
677 | return this;
678 | };
679 |
680 | this.next = function() {
681 | initiateMove(true, 1);
682 | }
683 | this.prev = function () {
684 | initiateMove(false, 1);
685 | }
686 | this.pause = function () {
687 | setTimer(true);
688 | }
689 | this.start = function () {
690 | setTimer(false);
691 | }
692 |
693 | // Initialize the plugin
694 | return this.initialize();
695 | };
696 |
697 | $.fn.featureCarousel.defaults = {
698 | // If zero, take original width and height of image
699 | // If between 0 and 1, multiply by original width and height (acts as a percentage)
700 | // If greater than one, use as a forced width/height for all of the images
701 | largeFeatureWidth : 0,
702 | largeFeatureHeight: 0,
703 | smallFeatureWidth: .5,
704 | smallFeatureHeight: .5,
705 | // how much to pad the top of the carousel
706 | topPadding: 20,
707 | // spacing between the sides of the container
708 | sidePadding: 50,
709 | // the additional offset to pad the side features from the top of the carousel
710 | smallFeatureOffset: 50,
711 | // indicates which feature to start the carousel at
712 | startingFeature: 1,
713 | // speed in milliseconds it takes to rotate the carousel
714 | carouselSpeed: 1000,
715 | // time in milliseconds to set interval to autorotate the carousel
716 | // set to zero to disable it, negative to go left
717 | autoPlay: 4000,
718 | // with autoplay enabled, set this option to true to have the carousel pause rotating
719 | // when a user hovers over any feature
720 | pauseOnHover: true,
721 | // with autoplay enabled, set this option to completely stop the autorotate functionality
722 | // when a user hovers over any feature
723 | stopOnHover: false,
724 | // numbered blips can appear and be used to track the currently centered feature, as well as
725 | // allow the user to click a number to move to that feature. Set to false to not process these at all
726 | // and true to process and display them
727 | trackerIndividual: true,
728 | // a summation of the features can also be used to display an "x Of y" style of tracking
729 | // this can be combined with the above option as well
730 | trackerSummation: true,
731 | // true to preload all images in the carousel before displaying anything. If this is set to false,
732 | // you will probably need to set a fixed width/height to prevent strangeness
733 | preload: true,
734 | // Will only display this many features in the carousel
735 | // set to zero to disable
736 | displayCutoff: 0,
737 | // an easing can be specified for the animation of the carousel
738 | animationEasing: 'swing',
739 | // selector for the left arrow of the carousel
740 | leftButtonTag: '#carousel-left',
741 | // selector for the right arrow of the carousel
742 | rightButtonTag: '#carousel-right',
743 | // display captions below the image instead of on top
744 | captionBelow: false,
745 | // callback function for when a feature has animated to the center
746 | movedToCenter: $.noop,
747 | // callback function for when feature left center
748 | leavingCenter: $.noop,
749 | // callback function for when center feature was clicked
750 | clickedCenter: $.noop,
751 | // callback function for when a feature has start moving to center
752 | movingToCenter: $.noop
753 | };
754 |
755 | })(jQuery);
756 |
--------------------------------------------------------------------------------
/js/jquery.featureCarousel.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * Feature Carousel, Version 1.3
3 | * http://www.bkosolutions.com
4 | *
5 | * Copyright 2011 Brian Osborne
6 | * Licensed under GPL version 3
7 | * brian@bkosborne.com
8 | *
9 | * http://www.gnu.org/licenses/gpl.txt
10 | */
11 | (function(a){a.fn.featureCarousel=function(f){if(this.length>1){this.each(function(){a(this).featureCarousel(f)});return this}f=a.extend({},a.fn.featureCarousel.defaults,f||{});var q={currentCenterNum:f.startingFeature,containerWidth:0,containerHeight:0,largeFeatureWidth:0,largeFeatureHeight:0,smallFeatureWidth:0,smallFeatureHeight:0,totalFeatureCount:a(this).children("div").length,currentlyMoving:false,featuresContainer:a(this),featuresArray:[],containerIDTag:"#"+a(this).attr("id"),timeoutVar:null,rotationsRemaining:0,itemsToAnimate:0,borderWidth:0};var j=function(w){if(f.preload==true){var u=q.featuresContainer.find("img");var t=0;var v=u.length;u.each(function(y,z){var x=new Image();a(x).bind("load error",function(){t++;if(t==v){w()}});x.src=z.src})}else{w()}};var m=function(t){return q.featuresArray[t-1]};var n=function(t){a.each(q.featuresArray,function(){if(a(this).data().setPosition==t){return a(this)}})};var c=function(t){if((t-1)==0){return q.totalFeatureCount}else{return t-1}};var i=function(t){if((t+1)>q.totalFeatureCount){return 1}else{return t+1}};var e=function(){q.containerWidth=q.featuresContainer.width();q.containerHeight=q.featuresContainer.height();var t=a(q.containerIDTag).find(".carousel-image:first");if(f.largeFeatureWidth>1){q.largeFeatureWidth=f.largeFeatureWidth}else{if(f.largeFeatureWidth>0&&f.largeFeatureWidth<1){q.largeFeatureWidth=t.width()*f.largeFeatureWidth}else{q.largeFeatureWidth=t.outerWidth()}}if(f.largeFeatureHeight>1){q.largeFeatureHeight=f.largeFeatureHeight}else{if(f.largeFeatureHeight>0&&f.largeFeatureHeight<1){q.largeFeatureHeight=t.height()*f.largeFeatureHeight}else{q.largeFeatureHeight=t.outerHeight()}}if(f.smallFeatureWidth>1){q.smallFeatureWidth=f.smallFeatureWidth}else{if(f.smallFeatureWidth>0&&f.smallFeatureWidth<1){q.smallFeatureWidth=t.width()*f.smallFeatureWidth}else{q.smallFeatureWidth=t.outerWidth()/2}}if(f.smallFeatureHeight>1){q.smallFeatureHeight=f.smallFeatureHeight}else{if(f.smallFeatureHeight>0&&f.smallFeatureHeight<1){q.smallFeatureHeight=t.height()*f.smallFeatureHeight}else{q.smallFeatureHeight=t.outerHeight()/2}}};var b=function(){if(f.displayCutoff>0&&f.displayCutoff");x.addClass("numberTag");x.html("("+y+" of "+q.totalFeatureCount+") ");a(this).find(".carousel-caption p").prepend(x)})}};var h=function(){if(f.trackerIndividual){var z=a("");z.addClass("tracker-individual-container");for(var y=0;y"+t+"
79 | 
80 | 
43 | 
51 | 
59 | 
67 | 
70 |