<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ListBox - jQuery plugin</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>ListBox - jQuery plugin</h1>
<h5><a href="https://github.com/vlada-j/ListBox">GitHub</a></h5>
<div class="listbox lightThem" data-orientation="vertical" data-step="512" style="width:266px; height:512px;">
<ul>
<li><img src="http://cdn1.iconfinder.com/data/icons/iconsland-weather/PNG/256x256/Sunny.png"></li>
<li><img src="http://cdn1.iconfinder.com/data/icons/iconsland-weather/PNG/256x256/Snow_Occasional.png"></li>
<li><img src="http://cdn1.iconfinder.com/data/icons/iconsland-weather/PNG/256x256/Wind_Flag_Storm.png"></li>
<li><img src="http://cdn1.iconfinder.com/data/icons/iconsland-weather/PNG/256x256/Moon_Phase_Full.png"></li>
<li><img src="http://cdn1.iconfinder.com/data/icons/iconsland-weather/PNG/256x256/Night_Rain.png"></li>
<li><img src="http://cdn1.iconfinder.com/data/icons/iconsland-weather/PNG/256x256/Overcast.png"></li>
<li><img src="http://cdn1.iconfinder.com/data/icons/iconsland-weather/PNG/256x256/Sleet.png"></li>
<li><img src="http://cdn1.iconfinder.com/data/icons/iconsland-weather/PNG/256x256/Fog.png"></li>
<li><img src="http://cdn1.iconfinder.com/data/icons/iconsland-weather/PNG/256x256/Ice.png"></li>
<li><img src="http://cdn1.iconfinder.com/data/icons/iconsland-weather/PNG/256x256/Thermometer_Snowflake.png"></li>
<li><img src="http://cdn1.iconfinder.com/data/icons/iconsland-weather/PNG/256x256/Rainbow.png"></li>
</ul>
</div>
<div class="listbox lightThem" data-orientation="horizontal" style="width:768px;">
<ul>
<li><img src="http://cdn1.iconfinder.com/data/icons/iconsland-weather/PNG/256x256/Sunny.png"></li>
<li><img src="http://cdn1.iconfinder.com/data/icons/iconsland-weather/PNG/256x256/Snow_Occasional.png"></li>
<li><img src="http://cdn1.iconfinder.com/data/icons/iconsland-weather/PNG/256x256/Wind_Flag_Storm.png"></li>
<li><img src="http://cdn1.iconfinder.com/data/icons/iconsland-weather/PNG/256x256/Moon_Phase_Full.png"></li>
<li><img src="http://cdn1.iconfinder.com/data/icons/iconsland-weather/PNG/256x256/Night_Rain.png"></li>
<li><img src="http://cdn1.iconfinder.com/data/icons/iconsland-weather/PNG/256x256/Overcast.png"></li>
<li><img src="http://cdn1.iconfinder.com/data/icons/iconsland-weather/PNG/256x256/Sleet.png"></li>
<li><img src="http://cdn1.iconfinder.com/data/icons/iconsland-weather/PNG/256x256/Fog.png"></li>
<li><img src="http://cdn1.iconfinder.com/data/icons/iconsland-weather/PNG/256x256/Ice.png"></li>
<li><img src="http://cdn1.iconfinder.com/data/icons/iconsland-weather/PNG/256x256/Thermometer_Snowflake.png"></li>
<li><img src="http://cdn1.iconfinder.com/data/icons/iconsland-weather/PNG/256x256/Rainbow.png"></li>
</ul>
</div>
<!-- SCRIPT -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="listbox.js"></script>
<script>
$(window).ready(function(){
$('.listbox').ListBox();
// or with options
//$('.listbox').ListBox({step:276, orientation:'vertical'});
});
</script>
</body>
</html>
/* ***************************************************************************************
* Demo style
* *************************************************************************************** */
@import url("http://fonts.googleapis.com/css?family=Lato:400,700,900,400italic");
* {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
body {
color:#416c80;
text-align:center;
font:14px/1.231 "Lato", sans-serif;
background:#f8f8f8 url(http://www.htmldrive.net/edit_media/2012/201205/20120520/css3-toggle/images/bg.jpg) repeat top left;
}
/* ***************************************************************************************
* ListBox - Base styles - DO NOT CHANGE
* *************************************************************************************** */
.listbox {
margin:0;
padding:0;
width:auto;
height:auto;
overflow:hidden;
position:relative;
display:inline-block;}
.listbox > .viewport {
width:100%;
height:100%;
display:block;
overflow:hidden;
position:relative;
text-align:center;}
.listbox > ul,
.listbox > .viewport > ul {
padding:0;
width:auto;
margin:auto;
display:block;
overflow:hidden;
text-align:left;
white-space:nowrap;
list-style-type:none;}
.listbox > ul li,
.listbox > .viewport > ul li {list-style-type:none;}
.listbox > #prev,
.listbox > #next {
z-index:9999;
display:block;
cursor:pointer;
position:absolute;
text-decoration:none;
-webkit-user-select:none;
-moz-user-select:none;}
.listbox > #prev.disable,
.listbox > #next.disable {display:none;}
/* ***************************************************************************************
* ListBox - Horizontal orientation - DO NOT CHANGE
* *************************************************************************************** */
.listbox[data-orientation=horizontal] {width:100%; height:auto; padding:0 25px;}
.listbox[data-orientation=horizontal] > .viewport {float:left; clear:none; white-space:nowrap;}
.listbox[data-orientation=horizontal] > .viewport > ul {white-space:nowrap;}
.listbox[data-orientation=horizontal] > .viewport > ul li {display:inline-block; clear:none; float:left; width:auto;}
.listbox[data-orientation=horizontal] > #prev,
.listbox[data-orientation=horizontal] > #next {width:25px; height:100%;}
.listbox[data-orientation=horizontal] > #prev {left:0;}
.listbox[data-orientation=horizontal] > #next {right:0;}
/* ***************************************************************************************
* ListBox - Vertical orientation - DO NOT CHANGE
* *************************************************************************************** */
.listbox[data-orientation=vertical] {width:auto; height:100%; padding:25px 0;}
.listbox[data-orientation=vertical] > .viewport {float:none; clear:both; white-space:normal;}
.listbox[data-orientation=vertical] > .viewport > ul {white-space:normal;}
.listbox[data-orientation=vertical] > .viewport > ul li {display:block; clear:both; float:none; height:auto;}
.listbox[data-orientation=vertical] > #prev,
.listbox[data-orientation=vertical] > #next {width:100%; height:25px;}
.listbox[data-orientation=vertical] > #prev {top:0;}
.listbox[data-orientation=vertical] > #next {bottom:0;}
/* ***************************************************************************************
* ListBox - light style - FREE TO CHANGE :)
* *************************************************************************************** */
.listbox.lightThem {
border:1px solid #A5A9AC;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;}
/* Horizontal */
.listbox[data-orientation=horizontal].lightThem {
width:768px;
height:266px;
padding:5px 40px;
background:#C0C0C0;
background:-moz-linear-gradient (top, #CED2D3 0%, #F9FBFA 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #CED2D3), color-stop(100%, #F9FBFA));
background:-webkit-linear-gradient (top, #CED2D3 0%, #F9FBFA 100%);
background:-o-linear-gradient (top, #CED2D3 0%, #F9FBFA 100%);
background:-ms-linear-gradient (top, #CED2D3 0%, #F9FBFA 100%);
background:linear-gradient (top, #CED2D3 0%, #F9FBFA 100%);}
.listbox[data-orientation=horizontal].lightThem > #prev,
.listbox[data-orientation=horizontal].lightThem > #next {
height:254px;
color:#A5A9AC;
line-height:254px;
text-align:center;
border:1px solid #A5A9AC;
background:#EBEBEB;
background:-moz-linear-gradient (left, #F0F0F0 0%, #EBEBEB 100%);
background:-webkit-gradient(linear, left top, right top, color-stop(0%, #F0F0F0), color-stop(100%, #EBEBEB));
background:-webkit-linear-gradient (left, #F0F0F0 0%, #EBEBEB 100%);
background:-o-linear-gradient (left, #F0F0F0 0%, #EBEBEB 100%);
background:-ms-linear-gradient (left, #F0F0F0 0%, #EBEBEB 100%);
background:linear-gradient (left, #F0F0F0 0%, #EBEBEB 100%);}
.listbox[data-orientation=horizontal].lightThem > #prev {
left:5px;
-webkit-border-radius:10px 0 0 10px;
-moz-border-radius:10px 0 0 10px;
border-radius:10px 0 0 10px;}
.listbox[data-orientation=horizontal].lightThem > #next {
right:5px;
-webkit-border-radius:0 10px 10px 0;
-moz-border-radius:0 10px 10px 0;
border-radius:0 10px 10px 0;}
.listbox[data-orientation=horizontal].lightThem > #prev:before {content:"◄";}
.listbox[data-orientation=horizontal].lightThem > #next:before {content:"►";}
.listbox[data-orientation=horizontal].lightThem > #prev:hover {}
.listbox[data-orientation=horizontal].lightThem > #next:hover {}
/* Vertical */
.listbox[data-orientation=vertical].lightThem {
width:266px;;
height:512px;
padding:40px 5px;
background:#C0C0C0;
background:-moz-linear-gradient (top, #CED2D3 0%, #F9FBFA 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #CED2D3), color-stop(100%, #F9FBFA));
background:-webkit-linear-gradient (top, #CED2D3 0%, #F9FBFA 100%);
background:-o-linear-gradient (top, #CED2D3 0%, #F9FBFA 100%);
background:-ms-linear-gradient (top, #CED2D3 0%, #F9FBFA 100%);
background:linear-gradient (top, #CED2D3 0%, #F9FBFA 100%);}
.listbox[data-orientation=vertical].lightThem > #prev,
.listbox[data-orientation=vertical].lightThem > #next {
width:254px;
color:#A5A9AC;
line-height:27px;
text-align:center;
border:1px solid #A5A9AC;
background:#EBEBEB;
background:-moz-linear-gradient (top, #F0F0F0 0%, #EBEBEB 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #F0F0F0), color-stop(100%, #EBEBEB));
background:-webkit-linear-gradient (top, #F0F0F0 0%, #EBEBEB 100%);
background:-o-linear-gradient (top, #F0F0F0 0%, #EBEBEB 100%);
background:-ms-linear-gradient (top, #F0F0F0 0%, #EBEBEB 100%);
background:linear-gradient (top, #F0F0F0 0%, #EBEBEB 100%);}
.listbox[data-orientation=vertical].lightThem > #prev {
top:5px;
-webkit-border-radius:10px 10px 0 0;
-moz-border-radius:10px 10px 0 0;
border-radius:10px 10px 0 0;}
.listbox[data-orientation=vertical].lightThem > #next {
bottom:5px;
-webkit-border-radius:0 0 10px 10px;
-moz-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px;}
.listbox[data-orientation=vertical].lightThem > #prev:before {content:"▲";}
.listbox[data-orientation=vertical].lightThem > #next:before {content:"▼";}
.listbox[data-orientation=vertical].lightThem > #prev:hover {}
.listbox[data-orientation=vertical].lightThem > #next:hover {}
/*
* jQuery ListBox v1.0
* https://github.com/vlada-j/ListBox
*
* Copyright 2012, Vlada Janosevic
* http://www.vladajanosevic.info/
* Free to use and change
*
* Required: jQuery 1.7.1
*/
jQuery.fn.ListBox=function(options){
// Default plugin settings
var settings=jQuery.extend({
orientation: 'horizontal', // value: horizontal | vertical
prevButton: '#prev',
nextButton: '#next',
step: 0,
duration: 500,
easing: "swing" // "swing" or "linear"
}, options);
// Create for each... -------------------------------------------------------------------
this.each(function(i, one) {
// Setting variables...
var $this = $(one); // This box - component
var carrier = $this.children('ul');
var viewport= $this.children('.viewport');
var btn = { };
btn.prev = $this.children(settings.prevButton);
btn.next = $this.children(settings.nextButton);
var carrierLength = 0;
var items = [];
var anim = false;
// Personal settings (uniqe for each)
var set=jQuery.extend({
// Inherit settings value from default
hor: settings.orientation,
step: settings.step,
dur: settings.duration,
easing: settings.easing
},{
// Value from attributes
hor: $this.attr('data-orientation'),
step: $this.attr('data-step'),
dur: $this.attr('data-duration'),
easing: $this.attr('data-easing')
});
// Test for orientation / Horizontal orientation - yes/no /
set.hor.toLowerCase();
set.hor = ( set.hor=='vertical' ||
set.hor=='vert' ||
set.hor=='ver' ||
set.hor=='v' ) ? false : true;
// Correct attribute for CSS
if(set.hor) $this.attr('data-orientation','horizontal');
else $this.attr('data-orientation','vertical');
// Refresh elements and re-calculate variables --------------------------------------
function refresh() {
items = [];
carrierLength = 0;
if(set.hor) {
var mbe='margin-left';
var maf='margin-right';
var att='width';}
else {
var mbe='margin-top';
var maf='margin-bottom';
var att='height';}
$(carrier.children('li')).each(
function(i, ele) {
items.push(ele);
var ow=parseInt( set.hor ? $(ele).outerWidth() : $(ele).outerHeight() );
carrierLength += ow + parseInt( $(ele).css(mbe) ) + parseInt( $(ele).css(maf) );
}
);
carrier.css(att, carrierLength);
testButtons();
};
// Scroll and animation -------------------------------------------------------------
// public: custom steps (negative numbers is prevew | positive nubers is next)
this.scrollStep = function(steps) {
steps = steps===undefined ? 0 : steps;
scrolling(1*steps);
};
// Scroll to the preview
function goToPrev() { scrolling(-1); };
// Scroll to the next
function goToNext() { scrolling(+1); };
// Animation scrolling
function scrolling(dir) {
if(anim) return;
var op = {duration: set.dur, easing: set.easing, complete: testButtons}; // options
var st = set.step * dir; // step
if(set.hor) { viewport.animate( {scrollLeft: ( viewport.scrollLeft() + st )}, op ); }
else { viewport.animate( {scrollTop: ( viewport.scrollTop() + st )}, op ); }
anim = true;
};
// Test for enable buttons
function testButtons() {
anim = false;
var curr = 0, maxp = 0, vp = 0;
if(set.hor) {
vp = viewport.width();
curr = viewport.scrollLeft();}
else {
vp = viewport.height();
curr = viewport.scrollTop();}
maxp = carrierLength - vp;
btn.prev.removeClass('disable');
btn.next.removeClass('disable');
if(curr==0) { btn.prev.addClass('disable');}
if(curr==maxp) { btn.next.addClass('disable');}
if(carrierLength<vp) {
btn.prev.addClass('disable');
btn.next.addClass('disable');}
};
// Initialise -----------------------------------------------------------------------
$(function(){
// Test for carrier
if( carrier.length==0 ) {
$this.append('<ul/>');
carrier = $this.children('ul');
}
// Test for viewport
if( viewport.length==0 ) {
carrier.wrap('<div class="viewport" />');
viewport = $this.children('.viewport');
}
if( set.step==0 ) {
if(set.hor) set.step = viewport.innerWidth();
else set.step = viewport.innerHeight();
}
// Test for buttons
if( btn.prev.length==0 ) {
$this.append('<a id="prev"> </a>');
btn.prev = $this.children('#prev');
}
if( btn.next.length==0 ) {
$this.append('<a id="next"> </a>');
btn.next = $this.children('#next');
}
btn.prev.click(goToPrev);
btn.next.click(goToNext);
$(window).load(refresh);
});
});
return this;
};