Carousel Demo
93 |
94 | 
95 | 
96 | 
97 | 
98 | 
99 | 
100 | 
101 | 
102 | 
103 |
104 | Prev | Next
105 |
106 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 | 107 | 108 |
109 |
131 | Reload New Options 132 |
133 | Set Options (view available options)
110 |You can set new options for the carousel here. Once you are satisified with the appearance of the carousel, just copy and paste the options into your own implementation.
111 |131 | Reload New Options 132 |
134 |
139 |
140 |
141 |
142 |
143 |
--------------------------------------------------------------------------------
/js/jquery.waterwheelCarousel.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * Waterwheel Carousel
3 | * Version 2.3.0
4 | * http://www.bkosborne.com
5 | *
6 | * Copyright 2011-2013 Brian Osborne
7 | * Dual licensed under GPLv3 or MIT
8 | * Copies of the licenses have been distributed
9 | * with this plugin.
10 | *
11 | * Plugin written by Brian Osborne
12 | * for use with the jQuery JavaScript Framework
13 | * http://www.jquery.com
14 | */
15 | ;(function ($) {
16 | 'use strict';
17 |
18 | $.fn.waterwheelCarousel = function (startingOptions) {
19 |
20 | // Adds support for intializing multiple carousels from the same selector group
21 | if (this.length > 1) {
22 | this.each(function() {
23 | $(this).waterwheelCarousel(startingOptions);
24 | });
25 | return this; // allow chaining
26 | }
27 |
28 | var carousel = this;
29 | var options = {};
30 | var data = {};
31 |
32 | function initializeCarouselData() {
33 | data = {
34 | itemsContainer: $(carousel),
35 | totalItems: $(carousel).find('img').length,
36 | containerWidth: $(carousel).width(),
37 | containerHeight: $(carousel).height(),
38 | currentCenterItem: null,
39 | previousCenterItem: null,
40 | items: [],
41 | calculations: [],
42 | carouselRotationsLeft: 0,
43 | currentlyMoving: false,
44 | itemsAnimating: 0,
45 | currentSpeed: options.speed,
46 | intervalTimer: null,
47 | currentDirection: 'forward',
48 | leftItemsCount: 0,
49 | rightItemsCount: 0,
50 | performingSetup: true
51 | };
52 | data.itemsContainer.find('img').removeClass(options.activeClassName);
53 | }
54 |
55 | /**
56 | * This function will set the autoplay for the carousel to
57 | * automatically rotate it given the time in the options
58 | * Can clear the autoplay by passing in true
59 | */
60 | function autoPlay(stop) {
61 | // clear timer
62 | clearTimeout(data.autoPlayTimer);
63 | // as long as no stop command, and autoplay isn't zeroed...
64 | if (!stop && options.autoPlay !== 0) {
65 | // set timer...
66 | data.autoPlayTimer = setTimeout(function () {
67 | // to move the carousl in either direction...
68 | if (options.autoPlay > 0) {
69 | moveOnce('forward');
70 | } else {
71 | moveOnce('backward');
72 | }
73 | }, Math.abs(options.autoPlay));
74 | }
75 | }
76 |
77 | /**
78 | * This function will preload all the images in the carousel before
79 | * calling the passed in callback function. This is only used so we can
80 | * properly determine the width and height of the items. This is not needed
81 | * if a user instead manually specifies that information.
82 | */
83 | function preload(callback) {
84 | if (options.preloadImages === false) {
85 | callback();
86 | return;
87 | }
88 |
89 | var $imageElements = data.itemsContainer.find('img'), loadedImages = 0, totalImages = $imageElements.length;
90 |
91 | $imageElements.each(function () {
92 | $(this).bind('load', function () {
93 | // Add to number of images loaded and see if they are all done yet
94 | loadedImages += 1;
95 | if (loadedImages === totalImages) {
96 | // All done, perform callback
97 | callback();
98 | return;
99 | }
100 | });
101 | // May need to manually reset the src to get the load event to fire
102 | // http://stackoverflow.com/questions/7137737/ie9-problems-with-jquery-load-event-not-firing
103 | $(this).attr('src', $(this).attr('src'));
104 |
105 | // If browser has cached the images, it may not call trigger a load. Detect this and do it ourselves
106 | if (this.complete) {
107 | $(this).trigger('load');
108 | }
109 | });
110 | }
111 |
112 | /**
113 | * Makes a record of the original width and height of all the items in the carousel.
114 | * If we re-intialize the carousel, these values can be used to re-establish their
115 | * original dimensions.
116 | */
117 | function setOriginalItemDimensions() {
118 | data.itemsContainer.find('img').each(function () {
119 | if ($(this).data('original_width') == undefined || options.forcedImageWidth > 0) {
120 | $(this).data('original_width', $(this).width());
121 | }
122 | if ($(this).data('original_height') == undefined || options.forcedImageHeight > 0) {
123 | $(this).data('original_height', $(this).height());
124 | }
125 | });
126 | }
127 |
128 | /**
129 | * Users can pass in a specific width and height that should be applied to every image.
130 | * While this option can be used in conjunction with the image preloader, the intended
131 | * use case is for when the preloader is turned off and the images don't have defined
132 | * dimensions in CSS. The carousel needs dimensions one way or another to work properly.
133 | */
134 | function forceImageDimensionsIfEnabled() {
135 | if (options.forcedImageWidth && options.forcedImageHeight) {
136 | data.itemsContainer.find('img').each(function () {
137 | $(this).width(options.forcedImageWidth);
138 | $(this).height(options.forcedImageHeight);
139 | });
140 | }
141 | }
142 |
143 | /**
144 | * For each "visible" item slot (# of flanking items plus the middle),
145 | * we pre-calculate all of the properties that the item should possess while
146 | * occupying that slot. This saves us some time during the actual animation.
147 | */
148 | function preCalculatePositionProperties() {
149 | // The 0 index is the center item in the carousel
150 | var $firstItem = data.itemsContainer.find('img:first');
151 |
152 | data.calculations[0] = {
153 | distance: 0,
154 | offset: 0,
155 | opacity: 1
156 | }
157 |
158 | // Then, for each number of flanking items (plus one more, see below), we
159 | // perform the calcations based on our user options
160 | var horizonOffset = options.horizonOffset;
161 | var separation = options.separation;
162 | for (var i = 1; i <= options.flankingItems + 2; i++) {
163 | if (i > 1) {
164 | horizonOffset *= options.horizonOffsetMultiplier;
165 | separation *= options.separationMultiplier;
166 | }
167 | data.calculations[i] = {
168 | distance: data.calculations[i-1].distance + separation,
169 | offset: data.calculations[i-1].offset + horizonOffset,
170 | opacity: data.calculations[i-1].opacity * options.opacityMultiplier
171 | }
172 | }
173 | // We performed 1 extra set of calculations above so that the items that
174 | // are moving out of sight (based on # of flanking items) gracefully animate there
175 | // However, we need them to animate to hidden, so we set the opacity to 0 for
176 | // that last item
177 | if (options.edgeFadeEnabled) {
178 | data.calculations[options.flankingItems+1].opacity = 0;
179 | } else {
180 | data.calculations[options.flankingItems+1] = {
181 | distance: 0,
182 | offset: 0,
183 | opacity: 0
184 | }
185 | }
186 | }
187 |
188 | /**
189 | * Here we prep the carousel and its items, like setting default CSS
190 | * attributes. All items start in the middle position by default
191 | * and will "fan out" from there during the first animation
192 | */
193 | function setupCarousel() {
194 | // Fill in a data array with jQuery objects of all the images
195 | data.items = data.itemsContainer.find('img');
196 | for (var i = 0; i < data.totalItems; i++) {
197 | data.items[i] = $(data.items[i]);
198 | }
199 |
200 | // May need to set the horizon if it was set to auto
201 | if (options.horizon === 0) {
202 | if (options.orientation === 'horizontal') {
203 | options.horizon = data.containerHeight / 2;
204 | } else {
205 | options.horizon = data.containerWidth / 2;
206 | }
207 | }
208 |
209 | // Default all the items to the center position
210 | data.itemsContainer
211 | .css('position','relative')
212 | .find('img')
213 | .each(function () {
214 | // Figure out where the top and left positions for center should be
215 | var centerPosLeft, centerPosTop;
216 | if (options.orientation === 'horizontal') {
217 | centerPosLeft = (data.containerWidth / 2) - ($(this).data('original_width') / 2);
218 | centerPosTop = options.horizon - ($(this).data('original_height') / 2);
219 | } else {
220 | centerPosLeft = options.horizon - ($(this).data('original_width') / 2);
221 | centerPosTop = (data.containerHeight / 2) - ($(this).data('original_height') / 2);
222 | }
223 | $(this)
224 | // Apply positioning and layering to the images
225 | .css({
226 | 'left': centerPosLeft,
227 | 'top': centerPosTop,
228 | 'visibility': 'visible',
229 | 'position': 'absolute',
230 | 'z-index': 0,
231 | 'opacity': 0
232 | })
233 | // Give each image a data object so it remembers specific data about
234 | // it's original form
235 | .data({
236 | top: centerPosTop,
237 | left: centerPosLeft,
238 | oldPosition: 0,
239 | currentPosition: 0,
240 | depth: 0,
241 | opacity: 0
242 | })
243 | // The image has been setup... Now we can show it
244 | .show();
245 | });
246 | }
247 |
248 | /**
249 | * All the items to the left and right of the center item need to be
250 | * animated to their starting positions. This function will
251 | * figure out what items go where and will animate them there
252 | */
253 | function setupStarterRotation() {
254 | options.startingItem = (options.startingItem === 0) ? Math.round(data.totalItems / 2) : options.startingItem;
255 |
256 | data.rightItemsCount = Math.ceil((data.totalItems-1) / 2);
257 | data.leftItemsCount = Math.floor((data.totalItems-1) / 2);
258 |
259 | // We are in effect rotating the carousel, so we need to set that
260 | data.carouselRotationsLeft = 1;
261 |
262 | // Center item
263 | moveItem(data.items[options.startingItem-1], 0);
264 | data.items[options.startingItem-1].css('opacity', 1);
265 |
266 | // All the items to the right of center
267 | var itemIndex = options.startingItem - 1;
268 | for (var pos = 1; pos <= data.rightItemsCount; pos++) {
269 | (itemIndex < data.totalItems - 1) ? itemIndex += 1 : itemIndex = 0;
270 |
271 | data.items[itemIndex].css('opacity', 1);
272 | moveItem(data.items[itemIndex], pos);
273 | }
274 |
275 | // All items to left of center
276 | var itemIndex = options.startingItem - 1;
277 | for (var pos = -1; pos >= data.leftItemsCount*-1; pos--) {
278 | (itemIndex > 0) ? itemIndex -= 1 : itemIndex = data.totalItems - 1;
279 |
280 | data.items[itemIndex].css('opacity', 1);
281 | moveItem(data.items[itemIndex], pos);
282 | }
283 | }
284 |
285 | /**
286 | * Given the item and position, this function will calculate the new data
287 | * for the item. One the calculations are done, it will store that data in
288 | * the items data object
289 | */
290 | function performCalculations($item, newPosition) {
291 | var newDistanceFromCenter = Math.abs(newPosition);
292 |
293 | // Distance to the center
294 | if (newDistanceFromCenter < options.flankingItems + 1) {
295 | var calculations = data.calculations[newDistanceFromCenter];
296 | } else {
297 | var calculations = data.calculations[options.flankingItems + 1];
298 | }
299 |
300 | var distanceFactor = Math.pow(options.sizeMultiplier, newDistanceFromCenter)
301 | var newWidth = distanceFactor * $item.data('original_width');
302 | var newHeight = distanceFactor * $item.data('original_height');
303 | var widthDifference = Math.abs($item.width() - newWidth);
304 | var heightDifference = Math.abs($item.height() - newHeight);
305 |
306 | var newOffset = calculations.offset
307 | var newDistance = calculations.distance;
308 | if (newPosition < 0) {
309 | newDistance *= -1;
310 | }
311 |
312 | if (options.orientation == 'horizontal') {
313 | var center = data.containerWidth / 2;
314 | var newLeft = center + newDistance - (newWidth / 2);
315 | var newTop = options.horizon - newOffset - (newHeight / 2);
316 | } else {
317 | var center = data.containerHeight / 2;
318 | var newLeft = options.horizon - newOffset - (newWidth / 2);
319 | var newTop = center + newDistance - (newHeight / 2);
320 | }
321 |
322 | var newOpacity;
323 | if (newPosition === 0) {
324 | newOpacity = 1;
325 | } else {
326 | newOpacity = calculations.opacity;
327 | }
328 |
329 | // Depth will be reverse distance from center
330 | var newDepth = options.flankingItems + 2 - newDistanceFromCenter;
331 |
332 | $item.data('width',newWidth);
333 | $item.data('height',newHeight);
334 | $item.data('top',newTop);
335 | $item.data('left',newLeft);
336 | $item.data('oldPosition',$item.data('currentPosition'));
337 | $item.data('depth',newDepth);
338 | $item.data('opacity',newOpacity);
339 | }
340 |
341 | function moveItem($item, newPosition) {
342 | // Only want to physically move the item if it is within the boundaries
343 | // or in the first position just outside either boundary
344 | if (Math.abs(newPosition) <= options.flankingItems + 1) {
345 | performCalculations($item, newPosition);
346 |
347 | data.itemsAnimating++;
348 |
349 | $item
350 | .css('z-index',$item.data().depth)
351 | // Animate the items to their new position values
352 | .animate({
353 | left: $item.data().left,
354 | width: $item.data().width,
355 | height: $item.data().height,
356 | top: $item.data().top,
357 | opacity: $item.data().opacity
358 | }, data.currentSpeed, options.animationEasing, function () {
359 | // Animation for the item has completed, call method
360 | itemAnimationComplete($item, newPosition);
361 | });
362 |
363 | } else {
364 | $item.data('currentPosition', newPosition)
365 | // Move the item to the 'hidden' position if hasn't been moved yet
366 | // This is for the intitial setup
367 | if ($item.data('oldPosition') === 0) {
368 | $item.css({
369 | 'left': $item.data().left,
370 | 'width': $item.data().width,
371 | 'height': $item.data().height,
372 | 'top': $item.data().top,
373 | 'opacity': $item.data().opacity,
374 | 'z-index': $item.data().depth
375 | });
376 | }
377 | }
378 |
379 | }
380 |
381 | /**
382 | * This function is called once an item has finished animating to its
383 | * given position. Several different statements are executed here, such as
384 | * dealing with the animation queue
385 | */
386 | function itemAnimationComplete($item, newPosition) {
387 | data.itemsAnimating--;
388 |
389 | $item.data('currentPosition', newPosition);
390 |
391 | // Keep track of what items came and left the center position,
392 | // so we can fire callbacks when all the rotations are completed
393 | if (newPosition === 0) {
394 | data.currentCenterItem = $item;
395 | }
396 |
397 | // all items have finished their rotation, lets clean up
398 | if (data.itemsAnimating === 0) {
399 | data.carouselRotationsLeft -= 1;
400 | data.currentlyMoving = false;
401 |
402 | // If there are still rotations left in the queue, rotate the carousel again
403 | // we pass in zero because we don't want to add any additional rotations
404 | if (data.carouselRotationsLeft > 0) {
405 | rotateCarousel(0);
406 | // Otherwise there are no more rotations and...
407 | } else {
408 | // Reset the speed of the carousel to original
409 | data.currentSpeed = options.speed;
410 |
411 | data.currentCenterItem.addClass(options.activeClassName);
412 |
413 | if (data.performingSetup === false) {
414 | options.movedToCenter(data.currentCenterItem);
415 | options.movedFromCenter(data.previousCenterItem);
416 | }
417 |
418 | data.performingSetup = false;
419 | // reset & initate the autoPlay
420 | autoPlay();
421 | }
422 | }
423 | }
424 |
425 | /**
426 | * Function called to rotate the carousel the given number of rotations
427 | * in the given direciton. Will check to make sure the carousel should
428 | * be able to move, and then adjust speed and move items
429 | */
430 | function rotateCarousel(rotations) {
431 | // Check to see that a rotation is allowed
432 | if (data.currentlyMoving === false) {
433 |
434 | // Remove active class from the center item while we rotate
435 | data.currentCenterItem.removeClass(options.activeClassName);
436 |
437 | data.currentlyMoving = true;
438 | data.itemsAnimating = 0;
439 | data.carouselRotationsLeft += rotations;
440 |
441 | if (options.quickerForFurther === true) {
442 | // Figure out how fast the carousel should rotate
443 | if (rotations > 1) {
444 | data.currentSpeed = options.speed / rotations;
445 | }
446 | // Assure the speed is above the minimum to avoid weird results
447 | data.currentSpeed = (data.currentSpeed < 100) ? 100 : data.currentSpeed;
448 | }
449 |
450 | // Iterate thru each item and move it
451 | for (var i = 0; i < data.totalItems; i++) {
452 | var $item = $(data.items[i]);
453 | var currentPosition = $item.data('currentPosition');
454 |
455 | var newPosition;
456 | if (data.currentDirection == 'forward') {
457 | newPosition = currentPosition - 1;
458 | } else {
459 | newPosition = currentPosition + 1;
460 | }
461 | // We keep both sides as even as possible to allow circular rotation to work.
462 | // We will "wrap" the item arround to the other side by negating its current position
463 | var flankingAllowance = (newPosition > 0) ? data.rightItemsCount : data.leftItemsCount;
464 | if (Math.abs(newPosition) > flankingAllowance) {
465 | newPosition = currentPosition * -1;
466 | // If there's an uneven number of "flanking" items, we need to compenstate for that
467 | // when we have an item switch sides. The right side will always have 1 more in that case
468 | if (data.totalItems % 2 == 0) {
469 | newPosition += 1;
470 | }
471 | }
472 |
473 | moveItem($item, newPosition);
474 | }
475 | }
476 | }
477 |
478 | /**
479 | * The event handler when an image within the carousel is clicked
480 | * This function will rotate the carousel the correct number of rotations
481 | * to get the clicked item to the center, or will fire the custom event
482 | * the user passed in if the center item is clicked
483 | */
484 | $(this).find('img').bind("click", function () {
485 | var itemPosition = $(this).data().currentPosition;
486 |
487 | if (options.imageNav == false) {
488 | return;
489 | }
490 | // Don't allow hidden items to be clicked
491 | if (Math.abs(itemPosition) >= options.flankingItems + 1) {
492 | return;
493 | }
494 | // Do nothing if the carousel is already moving
495 | if (data.currentlyMoving) {
496 | return;
497 | }
498 |
499 | data.previousCenterItem = data.currentCenterItem;
500 |
501 | // Remove autoplay
502 | autoPlay(true);
503 | options.autoPlay = 0;
504 |
505 | var rotations = Math.abs(itemPosition);
506 | if (itemPosition == 0) {
507 | options.clickedCenter($(this));
508 | } else {
509 | // Fire the 'moving' callbacks
510 | options.movingFromCenter(data.currentCenterItem);
511 | options.movingToCenter($(this));
512 | if (itemPosition < 0) {
513 | data.currentDirection = 'backward';
514 | rotateCarousel(rotations);
515 | } else if (itemPosition > 0) {
516 | data.currentDirection = 'forward';
517 | rotateCarousel(rotations);
518 | }
519 | }
520 | });
521 |
522 |
523 | /**
524 | * The user may choose to wrap the images is link tags. If they do this, we need to
525 | * make sure that they aren't active for certain situations
526 | */
527 | $(this).find('a').bind("click", function (event) {
528 | var isCenter = $(this).find('img').data('currentPosition') == 0;
529 | // should we disable the links?
530 | if (options.linkHandling === 1 || // turn off all links
531 | (options.linkHandling === 2 && !isCenter)) // turn off all links except center
532 | {
533 | event.preventDefault();
534 | return false;
535 | }
536 | });
537 |
538 | function nextItemFromCenter() {
539 | var $next = data.currentCenterItem.next();
540 | if ($next.length <= 0) {
541 | $next = data.currentCenterItem.parent().children().first();
542 | }
543 | return $next;
544 | }
545 |
546 | function prevItemFromCenter() {
547 | var $prev = data.currentCenterItem.prev();
548 | if ($prev.length <= 0) {
549 | $prev = data.currentCenterItem.parent().children().last();
550 | }
551 | return $prev;
552 | }
553 |
554 | /**
555 | * Intiate a move of the carousel in either direction. Takes care of firing
556 | * the 'moving' callbacks
557 | */
558 | function moveOnce(direction) {
559 | if (data.currentlyMoving === false) {
560 | data.previousCenterItem = data.currentCenterItem;
561 |
562 | options.movingFromCenter(data.currentCenterItem);
563 | if (direction == 'backward') {
564 | options.movingToCenter(prevItemFromCenter());
565 | data.currentDirection = 'backward';
566 | } else if (direction == 'forward') {
567 | options.movingToCenter(nextItemFromCenter());
568 | data.currentDirection = 'forward';
569 | }
570 | }
571 |
572 | rotateCarousel(1);
573 | }
574 |
575 | /**
576 | * Navigation with arrow keys
577 | */
578 | $(document).keydown(function(e) {
579 | if (options.keyboardNav) {
580 | // arrow left or up
581 | if ((e.which === 37 && options.orientation == 'horizontal') || (e.which === 38 && options.orientation == 'vertical')) {
582 | autoPlay(true);
583 | options.autoPlay = 0;
584 | moveOnce('backward');
585 | // arrow right or down
586 | } else if ((e.which === 39 && options.orientation == 'horizontal') || (e.which === 40 && options.orientation == 'vertical')) {
587 | autoPlay(true);
588 | options.autoPlay = 0;
589 | moveOnce('forward');
590 | }
591 | // should we override the normal functionality for the arrow keys?
592 | if (options.keyboardNavOverride && (
593 | (options.orientation == 'horizontal' && (e.which === 37 || e.which === 39)) ||
594 | (options.orientation == 'vertical' && (e.which === 38 || e.which === 40))
595 | )) {
596 | e.preventDefault();
597 | return false;
598 | }
599 | }
600 | });
601 |
602 | /**
603 | * Public API methods
604 | */
605 | this.reload = function (newOptions) {
606 | if (typeof newOptions === "object") {
607 | var combineDefaultWith = newOptions;
608 | } else {
609 | var combineDefaultWith = {};
610 | }
611 | options = $.extend({}, $.fn.waterwheelCarousel.defaults, newOptions);
612 |
613 | initializeCarouselData();
614 | data.itemsContainer.find('img').hide();
615 | forceImageDimensionsIfEnabled();
616 |
617 | preload(function () {
618 | setOriginalItemDimensions();
619 | preCalculatePositionProperties();
620 | setupCarousel();
621 | setupStarterRotation();
622 | });
623 | }
624 |
625 | this.next = function() {
626 | autoPlay(true);
627 | options.autoPlay = 0;
628 |
629 | moveOnce('forward');
630 | }
631 | this.prev = function () {
632 | autoPlay(true);
633 | options.autoPlay = 0;
634 |
635 | moveOnce('backward');
636 | }
637 |
638 | this.reload(startingOptions);
639 |
640 | return this;
641 | };
642 |
643 | $.fn.waterwheelCarousel.defaults = {
644 | // number tweeks to change apperance
645 | startingItem: 1, // item to place in the center of the carousel. Set to 0 for auto
646 | separation: 175, // distance between items in carousel
647 | separationMultiplier: 0.6, // multipled by separation distance to increase/decrease distance for each additional item
648 | horizonOffset: 0, // offset each item from the "horizon" by this amount (causes arching)
649 | horizonOffsetMultiplier: 1, // multipled by horizon offset to increase/decrease offset for each additional item
650 | sizeMultiplier: 0.7, // determines how drastically the size of each item changes
651 | opacityMultiplier: 0.8, // determines how drastically the opacity of each item changes
652 | horizon: 0, // how "far in" the horizontal/vertical horizon should be set from the container wall. 0 for auto
653 | flankingItems: 3, // the number of items visible on either side of the center
654 |
655 | // animation
656 | speed: 300, // speed in milliseconds it will take to rotate from one to the next
657 | animationEasing: 'linear', // the easing effect to use when animating
658 | quickerForFurther: true, // set to true to make animations faster when clicking an item that is far away from the center
659 | edgeFadeEnabled: false, // when true, items fade off into nothingness when reaching the edge. false to have them move behind the center image
660 |
661 | // misc
662 | linkHandling: 2, // 1 to disable all (used for facebox), 2 to disable all but center (to link images out)
663 | autoPlay: 0, // indicate the speed in milliseconds to wait before autorotating. 0 to turn off. Can be negative
664 | orientation: 'horizontal', // indicate if the carousel should be 'horizontal' or 'vertical'
665 | activeClassName: 'carousel-center', // the name of the class given to the current item in the center
666 | keyboardNav: false, // set to true to move the carousel with the arrow keys
667 | keyboardNavOverride: true, // set to true to override the normal functionality of the arrow keys (prevents scrolling)
668 | imageNav: true, // clicking a non-center image will rotate that image to the center
669 |
670 | // preloader
671 | preloadImages: true, // disable/enable the image preloader.
672 | forcedImageWidth: 0, // specify width of all images; otherwise the carousel tries to calculate it
673 | forcedImageHeight: 0, // specify height of all images; otherwise the carousel tries to calculate it
674 |
675 | // callback functions
676 | movingToCenter: $.noop, // fired when an item is about to move to the center position
677 | movedToCenter: $.noop, // fired when an item has finished moving to the center
678 | clickedCenter: $.noop, // fired when the center item has been clicked
679 | movingFromCenter: $.noop, // fired when an item is about to leave the center position
680 | movedFromCenter: $.noop // fired when an item has finished moving from the center
681 | };
682 |
683 | })(jQuery);
684 |
--------------------------------------------------------------------------------
/js/jquery.waterwheelCarousel.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * Waterwheel Carousel
3 | * Version 2.3.0
4 | * http://www.bkosborne.com
5 | *
6 | * Copyright 2011-2013 Brian Osborne
7 | * Dual licensed under GPLv3 or MIT
8 | * Copies of the licenses have been distributed
9 | * with this plugin.
10 | *
11 | * Plugin written by Brian Osborne
12 | * for use with the jQuery JavaScript Framework
13 | * http://www.jquery.com
14 | */
15 | (function(a){a.fn.waterwheelCarousel=function(r){if(this.length>1){this.each(function(){a(this).waterwheelCarousel(r)});return this}var m=this;var c={};var t={};function j(){t={itemsContainer:a(m),totalItems:a(m).find("img").length,containerWidth:a(m).width(),containerHeight:a(m).height(),currentCenterItem:null,previousCenterItem:null,items:[],calculations:[],carouselRotationsLeft:0,currentlyMoving:false,itemsAnimating:0,currentSpeed:c.speed,intervalTimer:null,currentDirection:"forward",leftItemsCount:0,rightItemsCount:0,performingSetup:true};t.itemsContainer.find("img").removeClass(c.activeClassName)}function l(u){clearTimeout(t.autoPlayTimer);if(!u&&c.autoPlay!==0){t.autoPlayTimer=setTimeout(function(){if(c.autoPlay>0){n("forward")}else{n("backward")}},Math.abs(c.autoPlay))}}function h(x){if(c.preloadImages===false){x();return}var v=t.itemsContainer.find("img"),u=0,w=v.length;v.each(function(){a(this).bind("load",function(){u+=1;if(u===w){x();return}});a(this).attr("src",a(this).attr("src"));if(this.complete){a(this).trigger("load")}})}function d(){t.itemsContainer.find("img").each(function(){if(a(this).data("original_width")==undefined||c.forcedImageWidth>0){a(this).data("original_width",a(this).width())}if(a(this).data("original_height")==undefined||c.forcedImageHeight>0){a(this).data("original_height",a(this).height())}})}function e(){if(c.forcedImageWidth&&c.forcedImageHeight){t.itemsContainer.find("img").each(function(){a(this).width(c.forcedImageWidth);a(this).height(c.forcedImageHeight)})}}function s(){var v=t.itemsContainer.find("img:first");t.calculations[0]={distance:0,offset:0,opacity:1};var u=c.horizonOffset;var x=c.separation;for(var w=1;w<=c.flankingItems+2;w++){if(w>1){u*=c.horizonOffsetMultiplier;x*=c.separationMultiplier}t.calculations[w]={distance:t.calculations[w-1].distance+x,offset:t.calculations[w-1].offset+u,opacity:t.calculations[w-1].opacity*c.opacityMultiplier}}if(c.edgeFadeEnabled){t.calculations[c.flankingItems+1].opacity=0}else{t.calculations[c.flankingItems+1]={distance:0,offset:0,opacity:0}}}function b(){t.items=t.itemsContainer.find("img");for(var u=0;uSample callback output
135 |
136 |
137 |
138 |