/* * jQuery rg Content Rotator * * Version 1.1 * 19. September 2010 * * Copyright: * Rune Øllgaard Grønkjær * rune.gronkjaer.dk * * Developer * Rune Øllgaard Grønkjær * rune@gronkjaer.dk * * Created with jQuery v1.4.2 * Tested with jQuery v1.5 * ********************************** * Incorporated scripts * * jQuery Utils by Rune Grønkjær * http://jscripts.teasolutions.dk/rg.jQuery.utils/rg.jQuery.Utils.min.js * ********************************** * Plugin API: * * // Readies any element for content rotation * // All default settings can be overwritten * jQuery('#selector').readyContentRotato(settings); * * // Gets the content rotator controller object: 'cr' * jQuery('#selector').getContentRotatorControl();* ********************************** * Image Viewer Controller API: * * //Stops autorotation * cr.stop(); * * //Starts autorotation * //Send true as a parameter to rotate backwards * cr.start(); * * //Rotates to the next element * //Will stop any autorotation first * cr.next(); * * //Rotates to the previous element * //Will stop any autorotation first * cr.prev(); * ********************************** * Default settings: * * jQuery.contentRotator.defaultSettings = { * showTime: 4000, //The time each image is to be showed * shiftTime: 600, //The time between the image animation * rotatorElementSelector: 'img', //The elements to rotate must be of this type * autoRotate: true, //Start autorotating when initialized * rotateForward: true //Set to false to autorotate backwards * }; * ********************************** * Changelog: * * * * Version v1.0: * Created: 19. August 2010 * * * * Version v1.1: * Created: 19. September 2010 * Added bootstrap capability to the Content Rotator. This way it * can be identified if the Content Rotator have allready been loaded. * Tea.Utils is now being bootstrapped by it's Id, to verify that * it has not yet been loaded * * * * Version 1.1.1 * Created: 20. September 2010 * Bugfix to the new Bootstrapper system * */ /* ************************* - TEA NAMESPACE ************************* */ if (typeof Tea === 'undefined') { var Tea = {}; } /* ************************* - BOOTSTRAP INFORMATION ************************* */ if (!Tea.Bootstrap) { Tea.Bootstrap = {}; } if (!Tea.Bootstrap.registeredFiles) { Tea.Bootstrap.registeredFiles = []; } if (!Tea.Bootstrap.registeredFiles['71BC1F9B-B122-4D4B-8F3B-A9C9037B9CF3']) { //Bootstrap check START Tea.Bootstrap.registeredFiles['71BC1F9B-B122-4D4B-8F3B-A9C9037B9CF3'] = 'http://jscripts.teasolutions.dk/plugins/rg.jQuery.contentRotator/rg.jQuery.ContentRotator.min.js'; (function (jQuery) { /* * Constructor for the contentRotator class. * initiates the image rotation */ jQuery.contentRotator = function (contentRotatorArea, settings) { var cr = this; cr.init = function () { cr.settings = jQuery.extend({}, jQuery.contentRotator.defaultSettings, settings); cr.autoRotate = cr.settings.autoRotate; cr.rotateForward = cr.settings.rotateForward; cr.contentRotatorArea = contentRotatorArea; cr.isRotating = false; cr.rotatorElements = cr.contentRotatorArea.children(cr.settings.rotatorElementSelector); cr.readyRotatorElements(); cr.readyNextRotation(); cr.contentRotatorArea.data('rgcr_contentRotator', cr) .addClass('rgcr_contentRotator'); }; /* * Readies the elemenents that are to be rotated * Most of it is changes to the css of the elements */ cr.readyRotatorElements = function () { cr.contentRotatorArea.css({ display: 'block', position: cr.contentRotatorArea.css('position') !== 'relative' && cr.contentRotatorArea.css('position') !== 'absolute' ? 'relative' : '' }); cr.rotatorElements.css({ display: 'none', position: 'absolute', zIndex: 9, top: 0, left: 0 }).first().css({ display: 'block', zIndex: 10 }).attr('rgcr_IsCurrent', 'true'); }; /* * A timeout is set to start a rotation */ cr.readyNextRotation = function () { if (cr.autoRotate && cr.rotatorElements.length > 1) { cr.rotationTimeout = window.setTimeout(cr.startRotate, cr.settings.showTime); } }; /* * Starts a rotation * Checks the direction of the rotation to detect the correct rotatemethod */ cr.startRotate = function () { if (cr.rotateForward) { cr.rotateNext(); } else { cr.rotatePrev(); } }; /* * Rotates to the NEXT element from the current element */ cr.rotateNext = function () { var fromEle = cr.rotatorElements.filter('[rgcr_IsCurrent=true]'), nextImage = fromEle.next(cr.settings.rotatorElementSelector); if (!nextImage[0]) { nextImage = cr.rotatorElements.first(); } cr.rotate(fromEle, nextImage); }; /* * Rotates to the PREVIOUS element from the current element */ cr.rotatePrev = function () { var fromEle = cr.rotatorElements.filter('[rgcr_IsCurrent=true]'), nextImage = fromEle.prev(cr.settings.rotatorElementSelector); if (!nextImage[0]) { nextImage = cr.rotatorElements.last(); } cr.rotate(fromEle, nextImage); }; /* * Rotates from one element to another */ cr.rotate = function (fromEle, toEle) { if (cr.settings.beforeRotate) { cr.settings.beforeRotate(fromEle, toEle); } cr.isRotating = true; fromEle.animate({ opacity: 0 }, cr.settings.shiftTime); toEle.css({ display: 'block' }).animate({ opacity: 1 }, cr.settings.shiftTime, function () { fromEle.css({ zIndex: 9, display: 'none' }).attr('rgcr_IsCurrent', ''); toEle.css({ zIndex: 10, display: 'block' }).attr('rgcr_IsCurrent', 'true'); fromEle.removeFilter(); toEle.removeFilter(); cr.readyNextRotation(); cr.isRotating = false; if (cr.settings.afterRotate) { cr.settings.afterRotate(fromEle, toEle); } }); }; /* * Stops autorotation */ cr.stop = function () { cr.autoRotate = false; window.clearTimeout(cr.rotationTimeout); }; /* * Starts autorotation * Send true as a parameter to rotate backwards */ cr.start = function (rotateBackwards) { cr.stop(); cr.autoRotate = true; cr.rotateForward = !rotateBackwards; cr.startRotate(); }; /* * Rotates to the next element * Will stop any autorotation first */ cr.next = function () { cr.stop(); cr.rotateNext(); }; /* * Rotates to the previous element * Will stop any autorotation first */ cr.prev = function () { cr.stop(); cr.rotatePrev(); }; /* * Start the initiation method */ cr.init(); }; /* * Default settings of the plugin */ jQuery.contentRotator.defaultSettings = { showTime: 4000, //The time each image is to be showed shiftTime: 600, //The time between the image animation rotatorElementSelector: 'img', //The elements to rotate must be of this type autoRotate: true, //Start autorotating when initialized rotateForward: true, //Set to false to autorotate backwards beforeRotate: function () { }, afterRotate: function () { } }; /* * Readies any element for content rotation */ jQuery.fn.readyContentRotator = function (settings) { var contentRotatorControl = new jQuery.contentRotator(this, settings); return this; }; /* * Gets the content rotator controller object: 'cr' */ jQuery.fn.getContentRotatorControl = function () { return this.closest('.rgcr_contentRotator').data('rgcr_contentRotator'); }; /* * This plugin depends on the following script files */ jQuery.contentRotator.scriptDependencies = [{ key: '8F384D79-9750-45B8-9DB4-D64050E2BF2B', uri: 'http://jscripts.teasolutions.dk/tea.utils/tea.utils.min.js' }]; /* * Imports the scriptfiles this plugin depends on */ bootstrapScripts = function () { for (var i = 0; i < jQuery.contentRotator.scriptDependencies.length; i++) { if (!Tea.Bootstrap.registeredFiles[jQuery.contentRotator.scriptDependencies[i].key]) { jQuery.getScript(jQuery.contentRotator.scriptDependencies[i].uri); } } }; bootstrapScripts(); })(jQuery); } //Bootstrap check END