Jquery Slideshow Script, Pause on Click -
i'm new jquery , javascript in general, sorry if simple question. hugely appreciated. have slideshow auto-paging , want when click on controller (#thumbs li) show pauses. here's js:
<script type="text/javascript"> var currentimage; var currentindex = -1; var interval; function showimage(index){ if(index < $('#bigpic div').length){ var indeximage = $('#bigpic div')[index] if(currentimage){ if(currentimage != indeximage ){ $(currentimage).css('z-index',2); cleartimeout(mytimer); $(currentimage).fadeout(400, function() { mytimer = settimeout("shownext()", 3500); $(this).css({'display':'none','z-index':1}) }); } } $(indeximage).css({'display':'block', 'opacity':1}); currentimage = indeximage; currentindex = index; $('#thumbs li').removeclass('active'); $($('#thumbs li')[index]).addclass('active'); } } function shownext(){ var len = $('#bigpic div').length; var next = currentindex < (len-1) ? currentindex + 1 : 0; showimage(next); } var mytimer; $(document).ready(function() { mytimer = settimeout("shownext()", 3500); shownext(); //loads first image $('#thumbs li').bind('click',function(e){ var count = $(this).attr('rel'); showimage(parseint(count)-1); }); }); </script>
i make function start slide show stop this.
// must set declare we're using later. var mytimer; function startshow(){ mytimer = settimeout("shownext()", 3500); } function stopshow(){ cleartimeout(mytimer); } $(document).ready(function() { startshow(); shownext(); //loads first image $('#thumbs li').bind('click',function(e){ var count = $(this).attr('rel'); showimage(parseint(count)-1); }); // you're going want hide element initially, until user pauses slide show, vice versa. $('#selectortostartshow').bind('click',function(){ startshow(); }); $('#selectortopauseshow').bind('click',function(){ stopshow(); }); });
i'm not sure you're trying #thumbs li click, should trick.
Comments
Post a Comment