keyboard
09-13-2013, 12:08 PM
Hey Everyone!
I have a basic Carousel which consists of these two files:
<!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>
ui-carousel.js
/*
* 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);
There are also two other jscript files (both part of standard 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.
I have a basic Carousel which consists of these two files:
<!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>
ui-carousel.js
/*
* 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);
There are also two other jscript files (both part of standard 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.