Jquery Image Slider

Question

Hi,

I have a jquery image slider, but it only shows 2 slides, so i cant really add more images than whats in those 2 slides is there any way i can create more slides here is the code

    /*  Slideshow

*/

$(document).ready(function() {

    slideshow_loading = true;

    slideshow_busy = true;

    current_slide = 1;

    slideshow_loop_interval = 0;

    total_slideshow_images = $('#slideshow-thumbs li').length;

    add_action('slideshow_after_preload', slideshow_ready );

    slideshow_init();

    slideshow_clicks();

    slideshow_preload();

});

function slideshow_init() {

    clicked_by_loop = false;

    // Resize Slideshow Wrapper

    $('#slideshow .wrap').height(610);

    // Add current slide reflection

    $('#current-slide').reflect({
        height: 150,
        opacity: 0.4
    });

    $('#slideshow').css('marginBottom', '-150px');

    // Separate chunks of thumbnails

    $('#slideshow-thumbs li').each(function(i) {

        var c = i+1;

        if ( c % 6 == 0 ) {

            $(this).css('marginRight', '50px');

        }

    });

    // Slideshow thumbs reflection

    $('#slideshow-thumbs li img').reflect({
        height: 24,
        opacity: 0.3
    });

    // Slideshow video frame reflection

    $('#slideshow .wrap #slideshow-video-reflection img').reflect({
        height: 60,
        opacity: 0.3
    });

    // Add rel=index to slideshow thumbs

    $('#slideshow-thumbs li a').each(function(i) {

        $(this).attr('rel', i);

    });

    // Configure Slideshow Mode

    slideshow_transition_init();

    // Configure hover & clickevent for #slideshow-video (only image, excluding the map)

    if ( slideshow_add_permalink ) {

        $('#slideshow-video, #current-slide')
        .hover(function() { $(this).css('cursor', 'pointer'); }, function() { $(this).css('cursor', 'default'); })
        .click(function() {

            var href = $('#slideshow-meta .meta-name').attr('href');

            window.location = href;

        });

    }

    // Slideshow Keyboard Shortcuts

    $(document).keyup(function(e) {

        //alert(e.keyCode);

        switch ( e.keyCode ) {

            case 39: // Right Key

                if ( slideshow_busy ) { return false; }

                if ( NOT_IE ) {
                    $('#slideshow-right a').stop().animate({opacity: 1}, slideshow_transition_delay*0.5).animate({opacity: 0}, slideshow_transition_delay*0.5);
                } else {
                    $('#slideshow-right a').css('visibility', 'visible');
                    setTimeout(function() { $('#slideshow-right a').css('visibility', 'hidden'); }, slideshow_transition_delay*0.5);
                }

                $('#slideshow-right a').click();

                break;

            case 37: // Left Arrow

                if ( slideshow_busy ) { return false; }

                if ( NOT_IE ) {
                    $('#slideshow-left a').stop().animate({opacity: 1}, slideshow_transition_delay*0.5).animate({opacity: 0}, slideshow_transition_delay*0.5);
                } else {
                    $('#slideshow-left a').css('visibility', 'visible');
                    setTimeout(function() { $('#slideshow-left a').css('visibility', 'hidden'); }, slideshow_transition_delay*0.5);
                }

                $('#slideshow-left a').click();

                break;

        }

    });

    // If Slideshow has no posts, remove loading indicator

    if ( slideshow_images.length > 0 ) {

        $('#slideshow-thumbs-container span.loading').css('visibility', 'visible');

    }

}


function slideshow_clicks() {

    // Thumbnail controls Click Event

    slideshow_thumbs_easing = 'easeOutSine';

    slideshow_thumbs_scroll_time = 700;

    $('#slideshow-thumb-left, #slideshow-thumb-right').click(function() {

        /* Exit event if Slideshow is loading, or Slideshow UI is busy, or No Images in Slideshow */

        if ( slideshow_loading || slideshow_busy || total_slideshow_images == 0 ) {return false;}

        slideshow_busy = true; /* Lock slideshow interface */

        var where = $(this).attr('rel');

        var left_coord = $('#slideshow-thumbs').css('left');

        left_coord = Math.abs(parseInt(left_coord.replace('px', '')));

        var x = 811;    // Total offset distance between spans

        switch ( where ) {

            case 'left':

                if ( left_coord == 49 ) {

                    // Left limit reached

                    var t1 = 100;

                    var t2 = 80;

                    $('#slideshow-thumbs').stop().animate({left: '63px'}, t1).animate({left: '49px'}, t2);

                    setTimeout(function() {

                        slideshow_busy = false;

                    }, t1+t2+50); // Add 50 miliseconds offset, to prevent bad behavior on rapid clicks

                    return false;

                } else {

                    // Scroll left

                    var next_coord = x - left_coord;

                    var t = slideshow_thumbs_scroll_time;

                    $('#slideshow-thumbs').stop().animate({left: next_coord + 'px'}, t, slideshow_thumbs_easing);

                    setTimeout(function() {

                        slideshow_busy = false;

                    }, t);

                    return false;

                }

                break;

            case 'right':

                var next_coord = left_coord - x;

                var right_limit = Math.abs( ( Math.floor( (total_slideshow_images - 1 ) / 6 ) * x ) - 49 );

                if ( left_coord < right_limit ) {

                    // Scroll right

                    var t = slideshow_thumbs_scroll_time;

                    $('#slideshow-thumbs').stop().animate({left: next_coord + 'px'}, t, slideshow_thumbs_easing);

                    setTimeout(function() {

                        slideshow_busy = false;

                    }, t);

                    return false;

                } else {

                    // Right limit reached

                    var t1 = 100;

                    var t2 = 80;

                    if ( total_slideshow_images > 6 ) {

                        $('#slideshow-thumbs').stop().animate({left: '-' + left_coord - 14 + 'px'}, t1).animate({left: '-' + left_coord + 'px'}, t2);

                    } else {

                        $('#slideshow-thumbs').stop().animate({left: '35px'}, t1).animate({left: '49px'}, t2);

                    }

                    setTimeout(function() {

                        slideshow_busy = false;

                    }, t1+t2+50);  // Add 50 miliseconds offset, to prevent bad behavior on rapid clicks

                    return false;

                }

                break;

        }

    });


    // Thumbnails Click Event

    $('#slideshow-thumbs li a').click(function(evt) {

        /* Exit event if Slideshow is loading, or Slideshow UI is busy, or No Images in Slideshow */

        if ( slideshow_loading || slideshow_busy || total_slideshow_images == 0 ) {return false;}

        slideshow_busy = true;

        if ( evt.which == 1 ) {

            /* evt.which is 1 when clicked, undefined when triggered by click();
             * http://api.jquery.com/category/events/event-object/ */

            clearInterval(slideshow_loop_interval);

        }

        var rel = parseInt( $(this).attr('rel') );

        var next = rel;

        if ( current_slide == ( rel + 1 ) ) { slideshow_busy = false; return false;} // Exit event if it's the same slide

        current_slide = rel + 1;

        slideshow_fade_transition(next, evt);

        return false;

    });

}

function slideshow_preload() {

    var counter = 0;

    var total_images = slideshow_images.length;

    do_action('slideshow_before_preload');

    $.cacheImage(slideshow_images, {
        load     : function(e) {counter += 1;},
        error    : function(e) {total_images -= 1;},
        complete : function(e) {
            if ( counter == total_images ) {

                //setTimeout(function() {
                    slideshow_loading = false;
                    do_action('slideshow_after_preload');
                //},2000);

            }
        }

    });

}

function slideshow_ready() {

    var t = 500;

    $('#slideshow-thumbs-container span.loading').fadeOut(t);

    setTimeout(function() {

        $('#slideshow-thumbs').stop().animate({left: '49px'}, t+100, 'easeOutExpo');

        // Enable slideshow video frame

        if ( total_slideshow_images > 0 ) {

            var video = slideshow_meta[0]['video'];

            if ( video != '' ) {

                $('#slideshow-video-trigger, #slideshow map area').attr('href', video);

                if ( NOT_IE ) {
                    $('#slideshow .wrap #slideshow-video, #slideshow .wrap #slideshow-video-reflection').fadeIn(t+100);
                } else {
                    $('#slideshow .wrap #slideshow-video, #slideshow .wrap #slideshow-video-reflection').show();
                }

            }

        }

        setTimeout(function() {

            slideshow_busy = false; // Unlock the Slideshow UI

            slideshow_loop();

        }, t+120);

    }, t+20 );

}

function slideshow_thumbs_autoscroll(next, rel) {

    /* Do nothing if nothign to scroll */

    if ( total_slideshow_images <= 6 ) { return false; }

    switch( rel ) {

        case 1:

            // Slide Right

            if ( current_slide % 6 == 0 || current_slide == total_slideshow_images ) {

                if ( next != 0 ) {

                    // Scroll right

                    slideshow_busy = false;

                    $('#slideshow-thumb-right').click();

                    return false;

                } else {

                    // Go to the beginning

                    slideshow_busy = true;

                    $('#slideshow-thumbs').stop().animate({left: '49px'}, slideshow_thumbs_scroll_time, slideshow_thumbs_easing);

                    setTimeout(function() {

                        slideshow_busy = false;

                    }, slideshow_thumbs_scroll_time + 50);

                    return false;

                }

            }

            break;

        case -1:

            // Slide Left

            if ( (current_slide - 1 ) % 6 == 0 ) {

                if ( current_slide == 1 ) {

                    // Go to the end

                    slideshow_busy = true;

                    var x = 811;

                    var right_limit = Math.abs( ( Math.floor( (total_slideshow_images - 1 ) / 6 ) * x ) - 49 );

                    $('#slideshow-thumbs').stop().animate({left: '-' + right_limit + 'px'}, slideshow_thumbs_scroll_time, slideshow_thumbs_easing);

                    setTimeout(function() {

                        slideshow_busy = false;

                    }, slideshow_thumbs_scroll_time + 50);

                    return false;

                } else {

                    // Scroll left

                    slideshow_busy = false;

                    $('#slideshow-thumb-left').click();

                    return false;

                }

            }

            break;

    }

}

function slideshow_transition_init() {

    $('#slideshow-left a, #slideshow-right a').click(function(evt) {

        /* Exit event if Slideshow is loading, or Slideshow UI is busy, or No Images in Slideshow */

        if ( slideshow_loading || slideshow_busy || total_slideshow_images == 0 ) {return false;}

        slideshow_busy = true;

        if ( evt.which == 1 ) {

            /* evt.which is 1 when clicked, undefined when triggered by click();
             * http://api.jquery.com/category/events/event-object/ */

            clearInterval(slideshow_loop_interval);

        }

        var rel = parseInt( $(this).attr('rel') );

        var next = cycle(rel, current_slide, total_slideshow_images) - 1;

        slideshow_thumbs_autoscroll(next, rel);

        current_slide = next + 1;

        slideshow_fade_transition(next, evt);

        return false;

    });

}

function slideshow_fade_transition(next, evt) {

    // Add slideshow video (if any)

    var video = slideshow_meta[next]['video'];

    if ( video == '' ) {

        if ( NOT_IE ) {
            $('#slideshow .wrap #slideshow-video, #slideshow .wrap #slideshow-video-reflection').fadeOut(slideshow_transition_delay);
        } else {
            $('#slideshow .wrap #slideshow-video, #slideshow .wrap #slideshow-video-reflection').hide();
        }

    } else {

        $('#slideshow-video-trigger, #slideshow map area').attr('href', video);

        if ( NOT_IE ) {
            $('#slideshow .wrap #slideshow-video, #slideshow .wrap #slideshow-video-reflection').fadeIn(slideshow_transition_delay);
        } else {
            $('#slideshow .wrap #slideshow-video, #slideshow .wrap #slideshow-video-reflection').show();
        }

    }

    // Configure Transition

    var title = $( slideshow_meta[next]['title'] );

    var category = slideshow_meta[next]['category'];

    $('#slideshow .wrap').append('<img alt="" width="960" height="460" class="below" src="' + slideshow_images[next] + '" />');

    $('#slideshow .wrap .below').reflect({height: 150, opacity: 0.4});

    var t = slideshow_transition_delay;

    $('#slideshow .wrap .above').stop().fadeOut(t);

    $('#slideshow .wrap .below').stop().fadeIn(t);

    $('#slideshow-thumbs li.active').removeClass('active');

    $('#slideshow-thumbs li a[rel=' + next + ']').parents('li').addClass('active');

    $('#slideshow-meta .meta-name, #slideshow-meta .meta-category').stop().animate({opacity: 0}, t*0.5);

    setTimeout(function() {

        $('#slideshow-meta .meta-name').html( title.html() ).attr('href', title.attr('href') );

        $('#slideshow-meta .meta-category').html( category );

        $('#slideshow-meta .meta-name, #slideshow-meta .meta-category').stop().animate({opacity: 1}, t*0.5);

    }, t*0.3);

    setTimeout(function() {

        $('#slideshow .wrap .above').remove();

        $('#slideshow .wrap .below').removeClass('below').addClass('above');

        slideshow_busy = false;

        if ( slideshow_add_permalink ) {

            $('#slideshow .wrap .above')
            .hover(function() { $(this).css('cursor', 'pointer'); }, function() { $(this).css('cursor', 'default'); })
            .click(function() { var href = $('#slideshow-meta .meta-name').attr('href'); window.location = href; });

        }

        if ( evt.which == 1 ) {

            // Reinitiate loop if control buttons clicked

            slideshow_loop();

        }

    }, t+10);

}

function slideshow_loop() {

    if ( slideshow_loop_enabled == false ) { return false; }

    slideshow_loop_interval = setInterval(function() {

        $('#slideshow-right a').stop().animate({opacity: 1}, slideshow_transition_delay*0.5).animate({opacity: 0}, slideshow_transition_delay*0.5);

        $('#slideshow-right a').click();

    }, slideshow_loop_time * 1000 );

}

Answer 1

total_slideshow_images = $('#slideshow-thumbs li').length;

var next = cycle(rel, current_slide, total_slideshow_images) - 1;

These lines imply that the code adjusts to however many images you have with that particular class. It seems like you just need to copy-paste one of your existing images and change the source link.

Answer 2

The problem is here (in shiny-slider.js):

left_coord = Math.abs(parseInt(left_coord.replace('px', '')));

The script is using the absolute value of the left coordinate of the slider frame to calculate the next position. So the first right slide takes it to 49 - 811 = -762, but then the next slide uses 762 instead of -762, leading to 762 - 811 = -49, which is the wrong direction.

If you remove the Math.abs(), the slider will continue to slide to the right. There are some other issues with the script however, as it will continue to slide past the last image, as well as some margin issues etc. Hopefully, this will get you started.

Answer 3

someone please tell me whats wrong with the margin i have been stuck for weeks..