Skip to content

Instantly share code, notes, and snippets.

@abernier

abernier/index.html

Created January 18, 2012 17:52
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save abernier/1634456 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save abernier/1634456 to your computer and use it in GitHub Desktop.
Download ZIP
$.ui.cycling
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title></title>
<style>
#settings {text-align:left; position:absolute; top:0; left:0; background-color:gainsboro; opacity:.5;}
#settings:hover {opacity:1;}
img {display:inline-block; vertical-align:bottom; width:10em; height:10em; background-color:gainsboro;}
.hexagon {font-size:300%;}
.hexagon .active {font-size:200%; z-index:1;}
.hexagon, .hexagon * {-moz-border-radius:100%;-webkit-border-radius:2em;border-radius:2em;}
ul.hexagon {list-style:none; margin:0; padding:0; width:4em; height:4em; position:relative; margin-top:1em; margin-left:1em; display:inline-block;}
.hexagon li {width:2em; height:2em; border:1px dotted; position:absolute; margin-right:-1em; margin-top:-1em; line-height:2em; text-align:center; border:1px solid;}
.hexagon li:nth-child(1) {right:0; top:50%;} /* θ = 0 */
.hexagon li:nth-child(2) {right:25%; top:6.69872981%;} /* θ = π/3 */
.hexagon li:nth-child(3) {right:75%; top:6.69872981%;} /* θ = 2π/3 */
.hexagon li:nth-child(4) {right:100%; top:50%;} /* θ = π */
.hexagon li:nth-child(5) {right:75%; top:93.30127019%;} /* θ = 4π/3 */
.hexagon li:nth-child(6) {right:25%; top:93.30127019%;} /* θ = 5π/3 */
.hexagon li:nth-child(7) {right:50%; top:50%;}
#prev, #next {position:absolute; top:50%; margin-top:-.85em; font-size:300%; z-index:99;}
#prev {left:0;}
#next {right:0;}
.carousel {display:inline-block; vertical-align:middle;}
.carousel .active {background-color:infobackground;}
#carousel-one,
#carousel-two {overflow:auto;}
#carousel-one {white-space:nowrap; width:31em;}
#carousel-one .item {margin-right:.5em;}
#carousel-one .item:last-child {margin-right:0;}
#carousel-two {white-space:normal; height:31em; width:11em;}
#carousel-two .item {margin-bottom:.5em;}
#carousel-two .item:last-child {margin-bottom:0;}
strong {position:fixed; z-index:99; top:50%;margin-top:-.5em; left:0; right:0; width:100%; text-align:center; font-size:300%; color:red; opacity:0; -moz-transition:opacity 1s;}
strong.active {opacity:1; -moz-transition:opacity 0s;}
</style>
</head>
<body>
<strong>"cyclingchange"</strong>
<!-- Horizontal carousel -->
<div id="carousel-one" class="carousel">
<img alt="1" src=""><img alt="2" src=""><img alt="3" src=""><img alt="4" src=""><img alt="5" src=""><img alt="6" src=""><img alt="7" src=""><img alt="8" src=""><img alt="9" src=""><img alt="10" src=""><img alt="11" src="">
</div>
<!-- Vertical (and non-homogeneous structure) carousel -->
<div id="carousel-two" class="carousel">
<div><div>
<img alt="1" class="item" src=""><span><span><img alt="2" class="item" src=""></span></span><img alt="3" class="item" src=""><img alt="4" class="item" src=""><img alt="5" class="item" src=""><img alt="6" class="item" src=""><img alt="7" class="item" src=""><img alt="8" class="item" src=""><img alt="9" class="item" src=""><img alt="10" class="item" src=""><img alt="11" class="item" src=""><img alt="12" class="item" src=""><img alt="13" class="item" src=""><img alt="14" class="item" src=""><img alt="15" class="item" src="">
</div></div>
<span></span>
</div>
<!-- Hexagonal carousel -->
<ul id="carousel-three" class="carousel hexagon">
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
</ul>
<!-- Controls -->
<p>
<button id="prev" type="button"><abbr title="previous">&lt;</abbr></button>
<button id="next" type="button"><abbr title="next">&gt;</abbr></button>
</p>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2.js"></script>
<script src="ui.cycling.js"></script>
<script>
var change = function(event, data) {
//
// The function to be called when an instance of cycling is changing
//
$('strong').addClass('active');
setTimeout(function () {
$('strong').removeClass('active')
}, 10);
// Make the new active item active
$(this).cycling('option', 'items').removeClass('active').eq(data.value).addClass('active');
// Scroll to it
$(this).stop(true, true).scrollTo(data.$activeItem, {
duration: 500,
easing: 'easeOutCirc'
});
};
// 1st carousel (horizontal)
$('#carousel-one').cycling({
value: 5,
min: 2,
max: 8,
change: change
});
// Bind the previous change function on 'cyclingchange' for carousel 2 and 3
$([$('#carousel-two')[0], $('#carousel-three')[0]]).bind('cyclingchange', change);
// 2nd carousel (vertical)
$('#carousel-two').cycling({
value: 7,
max: 12,
items: $('.item'),
loop: false,
step: 2
});
// 3rd carousel (hexagonal)
$('#carousel-three').cycling({
value: 3
});
//
// Controls (previous/next)
//
$('#prev').click(function(){
$(':ui-cycling').cycling('prev');
});
$('#next').click(function(){
$(':ui-cycling').cycling('next');
});
</script>
</body>
</html>
Raw
ui.cycling.js
//
// $.ui.cycling
//
// Cycling widget
//
// depends on:
// - jquery.js
// - jquery.ui.core.js
// - jquery.ui.widget.js
//
// Copyright: © 2012 Is Cool Entertainment
// Author: Antoine BERNIER (abernier)
//
// Usage: $(el).cycling({
// items: Collection's items (jQuery|selector|el) Default: '> *', eg: children
// value: Current value (Number) Default: 0,
// min: Min value (Number) Default: 0
// max: Max value (Number) Default: $(items).length - 1
// loop: Loop? (Boolean) Default: true
// step: Step (Number >= 0) Default: 1
// })
//
(function ($) {
$.widget("ui.cycling", {
//
// Defaults options
//
// /!\ Order below matters
//
options: {
items: '> *', // The collection of elements to cycle around
min: -Infinity, // The min index below stop cycling
max: Infinity, // The max index below stop cycling
value: 0, // The index of the current element
loop: true, // Whether to loop
step: 1, // step used for prev/next actions
},
_create: function () {
$.Widget.prototype._create.apply(this, arguments);
// Force setting options in order to normalize them
this._setOptions(this.options);
this.element.bind(this.widgetName + 'setoption.' + this.widgetName, $.proxy(function (event, data) {
//
// Options dependencies computation
//
// TODO:
//
// value = f(min, max, loop)
// min = f(max)
// max = f(items, min)
//
// So, for example, updating 'min' => updating 'max' then 'value'
//
//console.info("option '%s' has just set to '%s'(original: '%s')", data.option, data.current, data.original);
switch (data.option) {
case 'min':
this._setOption('max', this.options.max, true);
this._setOption('value', this.options.value);
break;
case 'max':
this._setOption('min', this.options.min, true);
this._setOption('value', this.options.value);
break;
case 'items':
this._setOption('max', this.options.max, true);
break;
case 'loop':
this._setOption('value', this.options.value);
break;
case 'value':
//
// Trigger the 'cyclingchange' event
//
this._trigger('change', null, {
value: data.current,
$activeItem: this.options.items.eq(data.current)
});
break;
}
}, this));
//
this.go(this.options.value);
return this;
},
go: function (value) {
this._setOption('value', value);
return this;
},
jump: function (increment) {
this.go(this.options.value + increment);
return this;
},
next: function (step) {
if (step) {
this._setOption('step', step);
}
this.jump(this.options.step);
return this;
},
prev: function (step) {
if (step) {
this._setOption('step', step);
}
this.jump(-this.options.step);
return this;
},
_setOption: function (k, v, silently) {
var oldValue = this.options[k];
switch (k) {
case 'items':
v = $(v, this.element);
break;
case 'min':
if (v < 0) {
v = 0;
}
if (v > this.options.max) {
v = this.options.max;
}
break;
case 'max':
if (v > this.options.items.length - 1) {
v = this.options.items.length - 1;
}
if (v < this.options.min) {
v = this.options.min;
}
break;
case 'value':
if (v > this.options.max) {
v = (this.options.loop && this.options.value === this.options.max) ? this.options.min : this.options.max;
}
if (v < this.options.min) {
v = (this.options.loop && this.options.value == this.options.min) ? this.options.max : this.options.min;
}
break;
case 'step':
if (v < 0) {
v = Math.abs(v);
}
break;
}
$.Widget.prototype._setOption.apply(this, arguments);
//
// Trigger an event when setting a option
//
!silently && this._trigger("setoption", null, {
option: k,
original: oldValue,
current: v
});
return this;
}
});
}(jQuery));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment