jQuery - Carousel rotate to position
Hey Everyone!
I have a basic Carousel which consists of these two files:
ui-carousel.jsHTML Code:<!doctype html> <html lang="en"> <head> <title>jQuery UI Carousel - Default functionality</title> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="ui.core.js"></script> <script type="text/javascript" src="ui.carousel.js"></script> <link type="text/css" href="demos.css" rel="stylesheet" /> <style type="text/css"> body { color:white; background-color:#011015; } #step { list-style-type:none; margin:0; padding:0; color:black; } #step li { width:30px; padding:15px; background-color:white; display:inline; } #carousel { margin:auto; top:0; position:relative; height:160px; margin:70px; padding:0; } #carousel_border { position:relative; background-color:#010707; border:1px solid #96FFFB; width:500px; height:330px; border-radius:100%; box-shadow:0 0 50px #3BB7ED; margin:auto; } #carousel_mask{ position:relative; background-color:#011015; -khtml-opacity:.50; -moz-opacity:.50; -ms-filter:”alpha(opacity=50)”; filter:alpha(opacity=50); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.50); opacity:.50; border:1px solid #96FFFB; width:500px; height:330px; border-radius:100%; } #innercircle { position:absolute; border:1px solid #DF740C; width:250px; height:165px; left:50%; top:50%; border-radius:100%; box-shadow: 0 0 50px #DF740C; margin-left:-125px; margin-top:-110px; } #carousel li { float:left; cursor:pointer; cursor:hand; list-style:none; margin:0; padding:0; width:128px; height:128px; } #carousel li img { height:100%; width:100%; } </style> <script type="text/javascript"> $(function() { //You don't need this timeout in your pages - Safari has stupid issues with our demo system window.setTimeout(function() { $("#carousel").carousel(); }, $.browser.safari ? 100 : 0); }); </script> </head> <body> <div id="step"> <ul id="stepList"> <li>Step 1</li> <li>Step 2</li> </ul> </div> <div id="carousel_border"> <div id="carousel_mask"> <div id="innercircle"></div> <ul id="carousel"> <li><img src="1.png" /></li> <li><img src="2.png" /></li> <li><img src="3.png" /></li> <li><img src="4.png" /></li> <li><img src="5.png" /></li> <li><img src="6.png" /></li> </ul> </div> </div> </body> </html>
There are also two other jscript files (both part of standard jQuery).Code:/* * jQuery UI Labs - Carousel * - for experimental use only - * * Copyright (c) 2009 AUTHORS.txt (http://ui.jquery.com/about) * Dual licensed under the MIT (MIT-LICENSE.txt) * and GPL (GPL-LICENSE.txt) licenses. * * Depends: * ui.core.js * effects.core.js */ (function($){ $.widget("ui.carousel", { _init: function() { var self = this; //Prepare animation parameters and needed variables this.items = $(this.options.items, this.element).css({ position: "absolute", top: 0, left: 0, zIndex: 1 }); $.extend(this, { props: this.options.orientation == 'vertical' ? ['height', 'Height', 'top', 'Top'] : ['width', 'Width', 'left', 'Left'], start: Math.PI/2, speed: 0.03, //We need a default spead so the initialization works direction: 'left', //This is a live property, toggled during interaction step: 2*Math.PI/this.items.length, paddingX: this.element.outerWidth() / 2, paddingY: this.element.outerHeight() / 2, itemHeight: this.options.height || this.items.height(), itemWidth: this.options.width || this.items.width(), offset: this.element.offset() }); //Add pause/resume functionality when you hover a item if(this.options.pausable) { this.items .bind('mouseenter.carousel', function() { self.pause(); }) .bind('mouseout.carousel', function() { self.resume(); }); } //Little trick to jump to the start position this.rotate("left"); this.rotate("right"); //Auto animation for the carousel if(this.options.animate) self._startAnimation(); $(this.options.handle || this.element) .bind('mouseenter.carousel', function() { self.offset = self.element.offset(); }) .bind('mouseleave.carousel', function() { self.options.animate ? self._startAnimation() : self.interval && clearInterval(self.interval); }) .bind("mousemove.carousel", function(e) { if(self.paused || !self.options.animateByMouse) return; var mod = ((e[self.options.orientation == 'vertical' ? 'pageY' : 'pageX']-self.offset[self.props[2]]) - this['offset'+self.props[1]]/2); self.speed = Math.abs(mod)/5000; self.direction = mod < 0 ? "right" : "left"; }); }, _setData: function(key, value) { $.widget.prototype._setData.apply(this, arguments); if(key == 'height') this.itemHeight = value; if(key == 'width') this.itemWidth = value; }, destroy: function() { clearInterval(this.interval); this.element.unbind('.carousel'); var self = this; window.setTimeout(function() { self.items.css({ left: '', top: '', position: '', height: '', width: '' }).unbind('.carousel'); self.element.removeData('carousel'); }, 0); }, _startAnimation: function() { var self = this; this.speed = self.options.animate; this.interval && clearInterval(this.interval); this.interval = window.setInterval(function() { self.rotate(); }, 13); }, resume: function() { this.paused = false; this.options.animate && this._startAnimation(); this._trigger('resume'); }, pause: function() { var self = this; this.paused = true; this.options.pauseSpeed ? (this.speed = self.options.pauseSpeed) : (this.interval && clearInterval(this.interval)); this._trigger('pause'); }, select: function(item) { this.currentItem = !isNaN(parseInt(item,10)) ? parseInt(item,10) : this.items.index(item); this.start = Math.PI/2; this.rotate('left', this.step * item); this._trigger('select', null, { value: item, item: this.items[item] }); }, rotate: function(direction, speed) { var o = this.options, self = this; direction = direction || this.direction; this.speed = speed !== undefined ? speed : this.speed; this.start = this.start + (direction == "right" ? -this.speed : this.speed); self.items.each(function(i) { //var x = Math.min(0, self.options.radius * Math.cos(angle)); w00t! this makes a half carousel var angle = self.start + i * self.step, x = self.options.radius * Math.cos(angle), y = self.options.tilt * Math.sin(angle), width = Math.max(self.itemWidth - (o.distance * self.itemWidth), self.itemWidth * ((self.options.tilt+y) / (2 * self.options.tilt))), height = parseInt(width * self.itemHeight / self.itemWidth,10); $.extend(this.style, { top: self.paddingY + (self.options.orientation == 'vertical' ? x : y) - height/2 + "px", left: self.paddingX + (self.options.orientation == 'vertical' ? y : x) - width/2 + "px", width: width + "px", height: height + "px", zIndex: parseInt(100 * (self.options.tilt+y) / (2 * self.options.tilt),10) }); }); } }); $.extend($.ui.carousel, { defaults: { animate: 0, //TODO: Setting animate to false also currently blocks animateByMouse animateByMouse: false, distance: 0.7, handle: false, items: '> *', orientation: 'horizontal', pausable: false, pauseSpeed: 0, //If you don't want to actually stop the carousel when hovering items, set it to something small, i.e. 0.001 radius: 200, tilt: 125 } }); })(jQuery);
The issue is, I'd like it so that when you click on one of the images in the slider, it rotates that image to the closest point of the carousel (down the bottom center).
Any suggestions?
Thanks.
CSS Codes
Reply With Quote
Bookmarks