This is a simple slideshow j Query. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.
This slide show is provided with limited support but if you find a bug please submit an with a brief description of the bug and a link to where it can be reviewed.
HTML
<!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=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript"
src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript"
src="js/03_08b_02_i1.js"></script>
<link href="css/03_08b_02_i1.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<div class="ClickRevealStar">
<div class="InterBody">
<div class="tab">
<div class="center_area">
<div title="Play" tabindex="1"
class="startbtn"></div>
<div class="playTxt"><em>Select
<strong>Play</strong> to begin.</em></div>
<div title="Replay"
class="replaybtn"></div><span
class="replayTxt"><strong>Replay</strong></span></div>
<div class="container_bg"></div>
<div class="contentMiddleBg">
<div class="set"
style="height:355px">
<div class="fl leftContent">
<img src="images/img1.png"
class="img_03_02b_02" style=" position:absolute"/>
</div>
<div class="fl rightContent1">
</div>
<div class="clr"></div>
</div>
<div class="set hide"
style="height:355px">
<img src="images/img2.png"
class="img_03_02b_02" style=" position:absolute"/>
<div class="clr"></div></div>
<div class="set hide"
style="height:355px">
<div class="fl leftContent"
style="margin-left:40px;">
<img src="images/new3.png"
class="img_03_02b_02" style="
position:absolute"/></div>
<div class="fl leftContent"></div>
<div class="fl rightContent1"
style="width:550px;">
</div>
<div class="clr"></div>
</div>
<div class="set hide" style="
height:355px">
<div class="fl leftContent">
<img src="images/img4.png"
class="img_03_02b_02" style=" position:absolute"/>
</div>
<div class="fl rightContent1"
style="margin:100px 0 0 0">
</div>
<div class="clr"></div>
</div>
</div>
<div class="contentBottomBg" style="
margin:6px 0 0 19px">
<div class="btnpos">
<input type="button" class="prev"
disabled="disabled" alt="Previous"/>
<input type="button" class="nxt"
alt="Next" title="Next" />
</div>
</div>
</div>
</div>
<span style=" position:absolute; margin:329px 0 0
-289px; font-size:11px">© 2011 FLVS</span>
</div>
</body>
</html>
J QUERY
$('.nxt').live('click',function(){
clearTime();
$(".prev").css('cursor','pointer');
var oCurrSet =
$(this).closest(".tab").find(".set:visible");
$(oCurrSet).next(".set").show();
$(oCurrSet).hide();
$(this).closest(".tab").find(".prev").removeAttr("disabled").css({'opacity':'1','filter':'alpha(opacity
=
100)','-ms-filter':'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)','cursor':'pointer'});
$(this).closest(".tab").find(".prev").attr({'title':'Previous'});
if($(oCurrSet).next(".set").next(".set").length==0){
animateFlag = false;
time12 = setTimeout(function(){
$(".replaybtn, .replayTxt").show();
$(".container_bg").show();
},5000);
$(this).closest(".tab").find(".nxt").attr("disabled",
"true");
$(this).closest(".tab").find(".nxt").css({'cursor':'default'}).css({'opacity':'0.3','filter':'alpha(opacity
=
30)','-ms-filter':'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)','cursor':'default'});
$(this).closest(".tab").find(".nxt").removeAttr("title");
}
});
$('.prev').live('click',function(){
clearTime();
$(".nxt").css('cursor','pointer');
var oCurrSet =
$(this).closest(".tab").find(".set:visible");
$(this).closest(".tab").find(".nxt").removeAttr("disabled").css({'opacity':'1','filter':'alpha(opacity
=
100)','-ms-filter':'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)','cursor':'pointer'});
$(this).closest(".tab").find(".nxt").attr({'title':'Next'});
$(oCurrSet).prev(".set").show();
$(oCurrSet).hide();
if($(oCurrSet).prev(".set").prev(".tab
.set").length==0){
$(this).closest(".tab").find(".prev").attr("disabled",
"true");
$(this).closest(".tab").find(".prev").removeAttr("title");
$(this).closest(".tab").find(".prev").css({'cursor':'default'}).css({'opacity':'0.3','filter':'alpha(opacity
= 30)','-ms-filter':'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)'});
}
});
$(".startbtn").live('click',function(){
$(".startbtn, .playTxt, .container_bg").hide();
$(".container_bg").hide();
});
$(".replaybtn").live('click',function(){
clearTime();
animateFlag = true;
$(".replaybtn, .replayTxt").hide();
$(".container_bg, .set:visible").hide();
$('.set:first').show();
$(".nxt").removeAttr("disabled").css({'cursor':'pointer'}).css({'opacity':'1','filter':'alpha(opacity
= 100)','-ms-filter':'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'});
$(".nxt").attr({'title':'Next'});
$(".prev").attr("disabled",
"true").css({'cursor':'default'}).css({'opacity':'0.3','filter':'alpha(opacity
= 30)','-ms-filter':'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)'});
});
var time12 = 0;
function clearTime(){
clearTimeout(time12);
}
