Slideshow script ported script from Prototype... need assistance
I found this neat simple slideshow... it's just 1 JS file, and it barely scrolls. Really lightweight.. but I found it used Prototype, so I ported it to jQuery perfectly, and it works great, but now I want to extend it, to have those little bubble indicators, where it shows which slide you're currently on, and when you click on one, it goes to that slide.
I've got it all working fine, except the ability to move to a different slide when you click a bubble...
I'm not sure what the ""goto_slide" function should do... unless there's a different way I should be doing the entire script..
- var delay = 2000;
- var start_frame = 0;
- function init() {
- var lis = $('#slide-images li');
- var btn = $('#slide-bubbles');
-
- for( i=0; i < lis.length; i++){
- if(i!=0){
- lis[i].style.display = 'none';
- }
- btn.append("<a href='#' rel='"+i+"' id='b" + i + "'><img src='/images/bubble_inactive.png' /></a>");
- }
- end_frame = lis.length -1;
- $("#slide-bubbles a[rel^='0'] img").attr("src","/images/bubble_active.png");
- start_slideshow(start_frame, end_frame, delay, lis);
- }
- function start_slideshow(start_frame, end_frame, delay, lis) {
- setTimeout(fadeInOut(start_frame,start_frame,end_frame, delay, lis), delay);
- }
- function goto_slide(frame) {
- // huh?
- }
- function fadeInOut(frame, start_frame, end_frame, delay, lis) {
- return (function() {
- lis =$('#slide-images li');
- $(lis[frame]).fadeOut();
- $("#slide-bubbles a img").attr("src","/images/bubble_inactive.png");
- if (frame == end_frame) {
- frame = start_frame;
- } else {
- frame++;
- }
- lisAppear = lis[frame];
- $("#slide-bubbles a[rel^='"+frame+"'] img").attr("src","/images/bubble_active.png");
-
- setTimeout("$(lisAppear).fadeIn();", 0);
- setTimeout(fadeInOut(frame, start_frame, end_frame, delay), delay + 1850);
- })
-
- }
- $(document).ready(function(){
- init();
- $("#slide-bubbles a").live("click",function(){
- goto_slide($(this).attr("rel"));
- });
- });
Thanks.