@@ -24,3 +24,6 @@ Options featuredClass - Class name to add to a featured item when it is selected displayTime - Number of seconds to show a feature autoReStart - After a user hovers over an item, should the rotation be restarted automatically? + transition - The transition style (fadeIn, slideDown, etc). + For an effect at default speed just use a string: 'fadeIn' + To set the speed use an array: ['fadeIn', 'fast'] \ No newline at end of file README.txt @@ -12,13 +12,16 @@ <script type="text/javascript" charset="utf-8"> $(function() { $('#spotlight_1').spotlight({displayTime: 1}); - $('#spotlight_2').spotlight({displayTime: 3}); + $('#spotlight_2').spotlight({ + displayTime: 3, + transition: ['fadeIn', 'slow'] + }); }); </script> <style type="text/css" media="screen"> #spotlight { width: 40em; } - .spotlight_feature { width: 20em; border: solid 1px #ccc; margin-left: 10em; padding: 0.5em; height: 6.5em; } + .spotlight_feature { position: relative; width: 20em; border: solid 1px #ccc; margin-left: 10em; padding: 0.5em; height: 6.5em; } .featured_content { display: none; } ul { float: left; width: 10em; border: solid 1px #ccc; border-right-style: none; } ul, li { padding: 0; margin: 0; list-style: none; } index.html @@ -16,7 +16,8 @@ feature : '.spotlight_feature', featuredClass : 'on', displayTime : 3, - autoReStart : true + autoReStart : true, + transition : null }, init: function(element, settings) { @@ -27,6 +28,22 @@ this.features = $(element).find(this.settings.featureItems); this.featureContainer = $(element).find(this.settings.feature); + if (this.settings.transition) { + if (typeof this.settings.transition == 'object') { + this.settings.transitionSpeed = this.settings.transition[1]; + this.settings.transition = this.settings.transition[0]; + } + + this.transitionContainer = this.featureContainer.clone() + .css({ + position: 'absolute', + top: 0, left: 0, + margin: 0, border: 0, + overflow: 'hidden' + }) + .hide(); + } + this.features .each(function(idx) { var featured = $(this); @@ -65,14 +82,18 @@ this.currentIdx = idx; this.showing.addClass(this.settings.featuredClass); - if (this.featureContainer) - this.featureContainer.html(this.showing.data('featured')); + if (this.featureContainer) { + if (this.transitionContainer) + this.transitionTo(this.showing.data('featured')); + else + this.featureContainer.html(this.showing.data('featured')); + } }, start: function() { var self = this; - self.running = true; - self.interval = setTimeout(function() { self.next(); }, self.settings.displayTime * 1000); + this.running = true; + this.interval = setTimeout(function() { self.next(true); }, this.settings.displayTime * 1000); }, stop: function() { @@ -81,8 +102,8 @@ }, restart: function() { - if (self.settings.autoReStart) - self.start(); + if (this.settings.autoReStart) + this.start(); }, next: function(override) { @@ -93,9 +114,21 @@ this.show(idx); - if (this.running) + if (this.running || override) this.start(); } + }, + + transitionTo: function(html) { + var self = this; + this.transitionContainer + .hide() + .html(html) + .appendTo(this.featureContainer); + + this.transitionContainer[this.settings.transition](this.settings.transitionSpeed, function() { + self.featureContainer.html(html); + }); } }); })(jQuery); spotlight.js a88f131002d8c85d0d741e1332c65c1039a9293c Jeff Smick sprsquish@gmail.com http://github.com/sprsquish/jquery_spotlight/commit/3ecc85d1947afa31dcd98aeb39028a0de427495f 3ecc85d1947afa31dcd98aeb39028a0de427495f 2008-12-30T17:02:28-08:00 2008-12-30T17:02:28-08:00 add support for transition effects b889132886ae60bf7be526e2c5c9ecb4f1d8dc7e Jeff Smick sprsquish@gmail.com