Slide Show Using J Query



 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);
}