I am looking to have a slider similar to this with the thumbnails on the right had side displayed as a slider
http://wowslider.com/jquery-image-scroller-prime-time-linear-demo.html
Any ideas how I can achieve this?
london-G 0 Light Poster
rad1964 0 Light Poster
Use JQuery.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 10000, true);
});
</script>
<style>
#featured{
width:450px;
padding-right:120px;
position:relative;
height:350px;
background:#fff;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0px;
left:454px;
list-style: none;
margin:0;
width:114px;
height: 261px;
padding: 0;
}
#featured ul.ui-tabs-nav li{
padding-left:10px;
font-size:12px;
color:#666;
padding-top: 1px;
padding-right: 0;
padding-bottom: 1px;
margin-bottom: 1px;
}
#featured ul.ui-tabs-nav li img{
float:left;
background:#fff;
margin: 1px;
padding: 2px;
border: 1px solid #CCC;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:62px;
color:#CCC;
line-height:20px;
background-color: #FFFFFF;
}
#featured li.ui-tabs-nav-item a:hover{
background-color: #247CD5;
}
#featured li.ui-tabs-selected{
background-image: url(../img/selected-item.png);
background-repeat: no-repeat;
background-position: left top;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background-color: #195695;
}
#featured .ui-tabs-panel{
width:450px;
height:350px;
background:#fff;
position:relative;
}
#featured .ui-tabs-panel img{
border: 1px solid #CCC;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:263px;
left:1px;
height:86px;
width: 566px;
padding-right: 2px;
padding-bottom: 2px;
}
#featured .info h2{
font-size:16px;
font-family:Tahoma, Geneva, sans-serif;
color:#333;
padding:5px;
margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana;
font-size:11px;
line-height:15px;
color:#000033;
}
#featured .info p a{
color: #F3981E;
}
#featured .info a{
text-decoration:none;
color:#195695;
}
#featured .info a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none;
}
.lh20 {line-height: 20px;}
</style>
</head>
<body>
<div id="featured">
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSI03OjfQ-OVlBOfwp7oV4tl8eoI6QkD9biegseHd7eZzvyZUzb" alt="" width="96" height="54" /></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSAt-Bf8Ma8ItU-Mn_0RCdqlM_27tM-ikLpxwO3MDpmO_dkrgTHUw" alt="" width="96" height="54" /></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRFUBvlXb4sR-QsCgEZNmhjzvtySUBty7hVOpf7FKQME2NB1yL0" alt="" width="96" height="54" /></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTKAybztGOepLP9MZhve9J4GY0NeX06dwSmcS-XMYZjO-LTm21p" alt="" width="96" height="54" /></a></li>
</ul>
<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="http://www.stratpost.com/wp-content/uploads/2011/05/mv2-450-x-255.jpg" width="450" height="255" alt="" />
<div class="info" >
<h2 class="lh20 strong"><a href="#" target="_blank">Lorem ipsum dolor</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis est ut tortor semper tempor vel quis sem. Proin ullamcorper sem ullamcorper molestie eleifend.
<a href="#" target="_blank"> Read More...</a></p>
</div>
</div>
<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="http://blog.iso50.com/wp-content/uploads/2011/03/Picture-4-450x255.png" width="450" height="255" alt="" />
<div class="info" >
<h2 class="lh20 strong"><a href="#" target="_blank">Lorem ipsum dolor</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis est ut tortor semper tempor vel quis sem. Proin ullamcorper sem ullamcorper molestie eleifend.
<a href="#" target="_blank"> Read More...</a></p>
</div>
</div>
<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="http://www.stratpost.com/wp-content/uploads/2010/10/Panther-UAV-450-x-255.jpg" width="450" height="255" alt="" />
<div class="info" >
<h2 class="lh20 strong"><a href="#" target="_blank">Chili Cook-off</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis est ut tortor semper tempor vel quis sem. Proin ullamcorper sem ullamcorper molestie eleifend.
<a href="#" target="_blank"> Read More...</a></p>
</div>
</div>
<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="http://doubleaardvarkmedia.com/wp-content/uploads/2012/11/mk_logo21-450-x-255.jpg" width="450" height="255" alt="" />
<div class="info" >
<h2 class="lh20 strong"><a href="#" target="_blank">Lorem ipsum dolor</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis est ut tortor semper tempor vel quis sem. Proin ullamcorper sem ullamcorper molestie eleifend.
<a href="#" target="_blank"> Read More...</a></p>
</div>
</div>
</div>
<!-- /End featured -->
</body>
</html>
london-G 0 Light Poster
rad, you're the best!
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.