<div class="header">
<h1>Wall Slider</h1>
<div id="" class="">
<div id="slider" class="slider"></div>
</div>
</div>
<div class="wall">
<div id="ftl_container" class="ftl_container">
<ul id="ftl_photos" class="ftl_photos">
<li><a href="#1"><img src="images/1.jpg" alt="Free Time Learning"/></a></li>
<li><a href="#2"><img src="images/2.jpg" alt="Free Time Learning"/></a></li>
<li><a href="#3"><img src="images/3.jpg" alt="Free Time Learning"/></a></li>
<li><a href="#4"><img src="images/4.jpg" alt="Free Time Learning"/></a></li>
<li><a href="#5"><img src="images/5.jpg" alt="Free Time Learning"/></a></li>
<li><a href="#6"><img src="images/6.jpg" alt="Free Time Learning"/></a></li>
<li><a href="#7"><img src="images/7.jpg" alt="Free Time Learning"/></a></li>
<li><a href="#8"><img src="images/8.jpg" alt="Free Time Learning"/></a></li>
<li><a href="#1"><img src="images/1.jpg" alt="Free Time Learning"/></a></li>
<li><a href="#2"><img src="images/2.jpg" alt="Free Time Learning"/></a></li>
<li><a href="#3"><img src="images/3.jpg" alt="Free Time Learning"/></a></li>
<li><a href="#4"><img src="images/4.jpg" alt="Free Time Learning"/></a></li>
<li><a href="#5"><img src="images/5.jpg" alt="Free Time Learning"/></a></li>
<li><a href="#6"><img src="images/6.jpg" alt="Free Time Learning"/></a></li>
<li><a href="#7"><img src="images/7.jpg" alt="Free Time Learning"/></a></li>
<li><a href="#8"><img src="images/8.jpg" alt="Free Time Learning"/></a></li>
<li><a href="#1"><img src="images/1.jpg" alt="Free Time Learning"/></a></li>
<li><a href="#2"><img src="images/2.jpg" alt="Free Time Learning"/></a></li>
<li><a href="#3"><img src="images/3.jpg" alt="Free Time Learning"/></a></li>
<li><a href="#4"><img src="images/4.jpg" alt="Free Time Learning"/></a></li>
<li><a href="#5"><img src="images/5.jpg" alt="Free Time Learning"/></a></li>
<li><a href="#6"><img src="images/6.jpg" alt="Free Time Learning"/></a></li>
<li><a href="#7"><img src="images/7.jpg" alt="Free Time Learning"/></a></li>
<li><a href="#8"><img src="images/8.jpg" alt="Free Time Learning"/></a></li>
</ul>
</div>
</div>
<div class="footer">
<div class="thumbnailSlider" id="thumbnailSlider">
<ul class="ts_container">
<li><a href="#1">Image 1</a></li>
<li><a href="#2">Image 2</a></li>
<li><a href="#3">Image 3</a></li>
<li><a href="#4">Image 4</a></li>
<li><a href="#5">Image 5</a></li>
<li><a href="#6">Image 6</a></li>
<li><a href="#7">Image 7</a></li>
<li><a href="#8">Image 8</a></li>
<li><a href="#1">Image 1</a></li>
<li><a href="#2">Image 2</a></li>
<li><a href="#3">Image 3</a></li>
<li><a href="#4">Image 4</a></li>
<li><a href="#5">Image 5</a></li>
<li><a href="#6">Image 6</a></li>
<li><a href="#7">Image 7</a></li>
<li><a href="#8">Image 8</a></li>
<li><a href="#1">Image 1</a></li>
<li><a href="#2">Image 2</a></li>
<li><a href="#3">Image 3</a></li>
<li><a href="#4">Image 4</a></li>
<li><a href="#5">Image 5</a></li>
<li><a href="#6">Image 6</a></li>
<li><a href="#7">Image 7</a></li>
<li><a href="#8">Image 8</a></li>
<li class="ts_thumbnails">
<div class="ts_preview_wrapper">
<ul class="ts_preview">
<li><img src="images/thumbs/1.jpg" alt="Free Time Learning" /></li>
<li><img src="images/thumbs/2.jpg" alt="Free Time Learning" /></li>
<li><img src="images/thumbs/3.jpg" alt="Free Time Learning" /></li>
<li><img src="images/thumbs/4.jpg" alt="Free Time Learning" /></li>
<li><img src="images/thumbs/5.jpg" alt="Free Time Learning" /></li>
<li><img src="images/thumbs/6.jpg" alt="Free Time Learning" /></li>
<li><img src="images/thumbs/7.jpg" alt="Free Time Learning" /></li>
<li><img src="images/thumbs/8.jpg" alt="Free Time Learning" /></li>
<li><img src="images/thumbs/1.jpg" alt="Free Time Learning" /></li>
<li><img src="images/thumbs/2.jpg" alt="Free Time Learning" /></li>
<li><img src="images/thumbs/3.jpg" alt="Free Time Learning" /></li>
<li><img src="images/thumbs/4.jpg" alt="Free Time Learning" /></li>
<li><img src="images/thumbs/5.jpg" alt="Free Time Learning" /></li>
<li><img src="images/thumbs/6.jpg" alt="Free Time Learning" /></li>
<li><img src="images/thumbs/7.jpg" alt="Free Time Learning" /></li>
<li><img src="images/thumbs/8.jpg" alt="Free Time Learning" /></li>
<li><img src="images/thumbs/1.jpg" alt="Free Time Learning" /></li>
<li><img src="images/thumbs/2.jpg" alt="Free Time Learning" /></li>
<li><img src="images/thumbs/3.jpg" alt="Free Time Learning" /></li>
<li><img src="images/thumbs/4.jpg" alt="Free Time Learning" /></li>
<li><img src="images/thumbs/5.jpg" alt="Free Time Learning" /></li>
<li><img src="images/thumbs/6.jpg" alt="Free Time Learning" /></li>
<li><img src="images/thumbs/7.jpg" alt="Free Time Learning" /></li>
<li><img src="images/thumbs/8.jpg" alt="Free Time Learning" /></li>
</ul>
</div>
<span></span>
</li>
</ul>
</div>
</div>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/ui-lightness/jquery.ui.theme.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/ui-lightness/jquery.ui.core.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/ui-lightness/jquery.ui.slider.css" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.freetimelearning.com/plugins/sliders/slider-5/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://www.freetimelearning.com/plugins/sliders/slider-5/js/jquery.ba-hashchange.min.js"></script>
<script type="text/javascript" src="http://www.freetimelearning.com/plugins/sliders/slider-5/js/jquery-mousewheel-3.0.4/jquery.mousewheel.min.js"></script>
body{
background:#E2E2E2;
font-family:Arial, sans-serif;
font-size:11px;
color: #fff;
}
*{ margin:0px;}
a{
text-decoration:none;
}
.clearfix{clear:both}
.ftl{font-size:16px;padding:50px 0 20px;margin:0 auto;font-style:italic;text-align:center;}
.ftl a{color:#09C;text-decoration:none !important;}
.ftl a:hover{color:#999}
.header, .footer{
width:100%;
background:#000;
height:50px;
position:relative;
line-height:50px;
-moz-box-shadow:0px -2px 10px #000 inset;
-webkit-box-shadow:0px -2px 10px #000 inset;
box-shadow:0px -2px 10px #000 inset;
}
.header{
border-bottom:1px solid #CFA467;
z-index:9999;
margin-bottom:30px;
}
.footer{
border-top:1px solid #CFA467;
}
.left{
float:left;
}
.right{
float:right;
}
a.back{
color:#ddd;
text-decoration:none;
text-shadow:1px 1px 1px #000;
margin:0px 10px;
text-transform:uppercase;
letter-spacing:1px;
}
a.back:hover{
color:#fff;
}
.header h1{
float:left;
font-weight:normal;
margin:0px 10px;
color:#fff;
text-shadow:1px 1px 1px #000;
}
.header a.reference{
text-decoration:none;
font-size:14px;
font-weight:bold;
line-height:50px;
color:#a0a0a0;
padding-right:15px;
float:right;
text-shadow:1px 1px 1px #000;
}
.header a.reference:hover{
color:#fff;
}
.wall{
-webkit-perspective: 350;
-webkit-transform-style:flat;
}
.turnLeft {
-webkit-transition: -webkit-transform 1s;
-webkit-transform: rotateY(20deg);
}
.turnRight {
-webkit-transition: -webkit-transform 1s;
-webkit-transform: rotateY(-20deg);
}
.flat {
-webkit-transition: -webkit-transform 1s;
-webkit-transform: rotateY( 0deg );
}
.ftl_container{
width:100%;
position:relative;
height:412px;
}
ul.ftl_photos{
position:absolute;
top:0;
left:0;
height:412px;
width:12188px; /*This is set dynamically*/
list-style-type:none;
}
ul.ftl_photos li{
float:left;
position:relative;
margin-right:7px;
}
ul.ftl_photos li a{
display:block;
border:6px solid #fff;
position:relative;
-moz-box-shadow:1px 1px 7px #000;
-webkit-box-shadow:1px 1px 7px #000;
box-shadow:1px 1px 7px #000;
}
ul.ftl_photos li a span{
background:#423B30;
opacity:0.6;
position:absolute;
padding:20px;
font-size:12px;
text-shadow:1px 1px 1px #000;
top:20px;
right:0px;
color:#fff;
-moz-box-shadow:1px 0px 2px #000 inset;
-webkit-box-shadow:1px 0px 2px #000 inset;
box-shadow:1px 0px 2px #000 inset;
}
ul.ftl_photos li img{
display:block;
border:none;
}
.footer{
position:fixed;
bottom:0px;
left:0px;
width:100%;
-moz-box-shadow:0px 2px 10px #000 inset;
-webkit-box-shadow:0px 2px 10px #000 inset;
box-shadow:0px 2px 10px #000 inset;
}
.ftl_scrollWrapper{
position:absolute;
top:12px;
left:50%;
width:300px;
margin-left:-175px;
padding:10px 15px;
height:4px;
background:#111;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
.ui-state-default,
.ui-widget-content
.ui-state-default,
.ui-widget-header
.ui-state-default {
background:#a0a0a0;
cursor:pointer;
border:1px solid #000;
color: #1C94C4;
font-weight: bold;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
margin-top:-4px;
}
.ui-slider-horizontal {
height:2px;
background:#555;
border:1px solid #000;
}
ul.ts_container{
list-style:none;
margin:0;
padding:0;
width:476px;/*dot width times number of dots*/
position:absolute;
height:17px;
top:20px;
left:50%;
margin-left:-238px;
}
ul.ts_container li{
float:left;
}
ul.ts_container li a{
display:block;
text-indent:-9000px;
width:11px;
height:11px;
outline:none;
padding:0px 3px;
background:transparent url(../images/sliderIcons/dot.png) no-repeat top center;
}
ul.ts_container li a:hover,
ul.ts_container li.selected a{
background-position:50% -11px;
}
ul.ts_container li.ts_thumbnails{
display:none;
position:absolute;
}
ul.ts_container li.ts_thumbnails span{
background:transparent url(../images/sliderIcons/triangle.png) no-repeat top center;
width:15px;
height:6px;
position:absolute;
}
.ts_preview_wrapper{
border:5px solid #fff;
overflow:hidden;
position:relative;
-moz-box-shadow:0px 0px 5px #999;
-webkit-box-shadow:0px 0px 5px #999;
box-shadow:0px 0px 5px #999;
}
ul.ts_preview{
position:absolute;
left:0px;
top:0px;
margin:0;
padding:0;
list-style-type:none;
}
ul.ts_preview li{
float:left;
}
ul.ts_preview li img{
display:block;
}