/*
* simplyScroll 1.0.3 - a scroll-tastic jQuery plugin
*
* http://logicbox.net/jquery/simplyscroll
* http://logicbox.net/blog/simplyscroll-jquery-plugin
* http://plugins.jquery.com/project/simplyScroll
*
* Copyright (c) 2009 Will Kelly - http://logicbox.net
*
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Last revised:03/07/2009 21:13
*
*/
/* Default/Master classes 
Example markup format (for horizontal scroller)
Note all DIVs are generated and should not be hard-coded
<div class="your-custom-class simply-scroll-container">
<div class="simply-scroll-btn simply-scroll-btn-left"></div>
<div class="simply-scroll-btn simply-scroll-btn-right"></div>
<div class="simply-scroll-clip">
<ul class="simply-scroll-list">
<li>...</li>
...
</ul>
</div>
</div>
*/
.simply-scroll-container{ /* Container DIV - automatically generated */
position:relative;
}
.simply-scroll-clip{ /* Clip DIV - automatically generated */
position:relative;
overflow:hidden;
z-index:2;
}
.simply-scroll-list{ /* UL/OL/DIV - the element that simplyScroll is inited on */
position:absolute;
top:0;
left:0;
z-index:1;
overflow:hidden;
margin:0;
padding:0;
list-style:none;
}
.simply-scroll-list li{
padding:0;
margin:0;
list-style:none;
}
.simply-scroll-list li img{
border:none;
display:block;
}
.simply-scroll-btn{
position:absolute;
background-image:url(buttons.png);
width:42px;
height:44px;
z-index:3;
cursor:pointer;
}
.simply-scroll-btn-left{
left:6px;
bottom:6px;
background-position:0 -44px;
}
.simply-scroll-btn-left.disabled{
background-position:0 0 !important;
}
.simply-scroll-btn-left:hover{
background-position:0 -88px;
}
.simply-scroll-btn-right{
right:6px;
bottom:6px;
background-position:84px -44px;
}
.simply-scroll-btn-right.disabled{
background-position:84px 0 !important;
}
.simply-scroll-btn-right:hover{
background-position:84px -88px;
}
.simply-scroll-btn-up{
right:6px;
top:6px;
background-position:-126px -44px;
}
.simply-scroll-btn-up.disabled{
background-position:-126px 0 !important;
}
.simply-scroll-btn-up:hover{
background-position:-126px -88px;
}
.simply-scroll-btn-down{
right:6px;
bottom:6px;
background-position:-42px -44px;
}
.simply-scroll-btn-down.disabled{
background-position:-42px 0 !important;
}
.simply-scroll-btn-down:hover{
background-position:-42px -88px;
}
/* Custom class modifications - override classees
.simply-scroll is default
*/
.simply-scroll{ /* Customisable base class for style override DIV */
}
.simply-scroll,
.simply-scroll .simply-scroll-clip{
width:545px;
height:80px;
}
.simply-scroll .simply-scroll-list{
display:block!important;
}
.simply-scroll .simply-scroll-list li{
float:left;
width:90px;
height:60px;
background:none!important;
padding:0!important;
margin:0!important;
}
.simply-scroll .simply-scroll-list li img{}
.simply-scroll .simply-scroll-btn{}
.simply-scroll .simply-scroll-btn-left{}
.simply-scroll .simply-scroll-btn-left.disabled{}
.simply-scroll .simply-scroll-btn-left:hover{}
.simply-scroll .simply-scroll-btn-right{}
.simply-scroll .simply-scroll-btn-right.disabled{}
.simply-scroll .simply-scroll-btn-right:hover{}
.simply-scroll .simply-scroll-btn-up{}
.simply-scroll .simply-scroll-btn-up.disabled{}
.simply-scroll .simply-scroll-btn-up:hover{}
.simply-scroll .simply-scroll-btn-down{}
.simply-scroll .simply-scroll-btn-down.disabled{}
.simply-scroll .simply-scroll-btn-down:hover{}
/* Vertical scroller example */
.vert{ /* wider than clip to position buttons to side */
width:340px;
height:400px;
margin-bottom:1.5em;
}
.vert .simply-scroll-clip{
width:290px;
height:400px;
}
.vert .simply-scroll-list{}
.vert .simply-scroll-list li{
width:290px;
height:200px;
}
.vert .simply-scroll-list li img{}
.vert .simply-scroll-btn{}
.vert .simply-scroll-btn-up{ /* modified btn pos */
right:0;
top:0;
}
.vert .simply-scroll-btn-up.disabled{}
.vert .simply-scroll-btn-up:hover{}
.vert .simply-scroll-btn-down{ /* modified btn pos */
right:0;
top:52px;
}
.vert .simply-scroll-btn-down.disabled{}
.vert .simply-scroll-btn-down:hover{}
/* NOTE left-right classes wouldn't be needed on vertical scroller */
/* Flickr example 
Images created from a data source use simpler format i.e.
<div>
<img/>
<img/>
...
</div>
*/
.flickr{
width:576px;
height:180px;
margin-bottom:1.5em;
}
.flickr .simply-scroll-clip{
width:576px;
height:180px;
}
.flickr .simply-scroll-list img{
float:left;
border:none;
display:block;
}