ryanflorence / jquery-rf-slideshow

Super flexible, low-level jQuery slideshow built on the jquery.widget system

jquery.rf.slideshow

Built upon the jQuery UI library, jquery.rf.slideshow is a super flexible, low-level slideshow.

Copyright (c) Ryan Florence, MIT Style License

Demos / Docs

• Online Demos.
• Online Docs.

That website is just this repository, so you can clone the repository and open index.html in your browser as well.

Quick Look

Instantiation

First you need some simple markup

<!-- styling the height and width is important for some transitions -->
<div id="slideshow" style="width: 400px; height: 200px">
  <img src="../img/one.jpg"> <!-- can have any kind of element, not just images -->
  <img src="../img/two.jpg">
  <img src="../img/three.jpg">
  <img src="../img/four.jpg">
  <img src="../img/five.jpg">
</div>

Just like any other jQuery UI widget:

$('#el').slideshow({
  duration: 400,
  delay: 3000,
  selector: '> img',
  transition: 'push(up, bounce)'
});

Transitions

You can create your own transitions, which is what makes this script so awesome.

jQuery.rf.slideshow.defineTransition('slide', function (params, dir, ease){
  var animation = {},
      prop = (dir == 'left' || dir == 'right') ? 'left' : 'top';
  animation[prop] = (dir == 'left' || dir == 'up') ? '-100%' : '100%';
  params.previous.animate(animation, params.duration, ease);
});

The name of a transition works like a function, but it's just a string. You can allow for any number of arguments when creating a transition.

Here are some example values for the transition option when using slide.

'slide(left)'
'slide(right)'
'slide(up)'
'slide(down)'
'slide(left, linear)'
'slide(left, bounce)'
// in other words
'slide([direction], [easing])'

Methods

var el = $('#el');
el.slideshow();
// I prefer to work with the object directly
var slideshow = el.data('slideshow');

// show an arbitrary slide by index
el.slideshow('show', 3);
// or
slideshow.show(3);

// show next slide
el.slideshow('show', 'next');
slideshow.show('next');

// show previous slide
el.slideshow('show', 'previous');
slideshow.show('previous');

// show and override the instance options
// note, this is one-time only, the instance options are not rewritten
el.slideshow('show', {transition: 'slide(left)', duration: 1000});
slideshow.show({transition: 'slide(left)', duration: 1000});

// play
el.slideshow('play');
slideshow.play();

// stop
el.slideshow('stop');
slideshow.stop();

// if you've added elements to the slideshow dynamically, set it up again
el.slideshow('setup');
slideshow.setup();

jquery-rf-slideshow's Issues

Help: Need to scroll div's

As it said in the doc's it is able to scrol not only images but any other element,
Unfortunatelly after I wrapped my images DIV tag it does not work...

Any suggestion ?

Thanks,

Shai

Calling Show() During a Transition

The navigation API is working very well for me. I have three hot spots below the slider. When I mouseenter one of them, I want to change the 0th image, show it, and stop playing. Then on mouseleave I want to restore the 0th image and resume play.

All this works fine until I mouseenter while the slider is in transition. It show the 1th (is that a designation?) slide and stops.

Can upload page if needed.

incorrect class names in documentation

The documentation for slideshownav shows the class "current-nav" as the class assigned to the current navigation item but it really is "rf-slideshownav-current-nav". I may not be understanding some of the logic where "rf-slideshownav-" is prepended to the classes, if so it might be worth noting in the docs for these classes.

parceiro

Animations should not be queued with setInterval or setTimeout

I was getting some strange behavior with my slideshow--specifically, when the tab is not active for a while, all of the animations try playing at once when I return to the page, which leads to lots of strange flickering, and then the slideshow doesn't work properly afterward (some slides will have permanent opacities of .23, etc.). I found what seems to be the root cause:

from the jQuery docs (specifically http://api.jquery.com/fadeIn/ ):
"Because of the nature of requestAnimationFrame(), you should never queue animations using a setInterval or setTimeout loop. In order to preserve CPU resources, browsers that support requestAnimationFrame will not update animations when the window/tab is not displayed. If you continue to queue animations via setInterval or setTimeout while animation is paused, all of the queued animations will begin playing when the window/tab regains focus. To avoid this potential problem, use the callback of your last animation in the loop, or append a function to the elements .queue() to set the timeout to start the next animation."

I see you use setTimeout and setInterval in your plugin, though I'm afraid I currently lack the expertise to easily modify your code to use .queue() and friends instead.

Document transition signatures

Currently the docs don't talk about all the transition signatures like "push(left)" etc.

Touch screen swipe trigger to next/prev slide

Do we have a feature to swipe on the slideshow on touch screens to go to next or previous slide ?

Help :)

Hi there,

How can I center images in a div during slideshow ???

Thanks

showComplete Callback

The showComplete callback is all over the documentation but is never actually triggered in the widget, so far as I can tell.

Continue auto-play from current slideshow

I want to continue auto-play from the current slide which is being displayed. The auto-play slideshow may get interrupted by displaying images after clicking next button, previous button or by selecting from the bottom displayed gallery.

Syncing multiple slide shows

Thanks for this awesome script! I've been looking for something this lightweight and customizable for ages. Awesome work.

Quick question:

I'm trying to sync up two slide shows using setInterval:

    $(document).ready(function() {

        var slideImages = $('.slideCaptions > .slides, .slideImages > .slides');
        var slideHeadlines = $('.slideHeadlines > .slides');

        function mySlides() { 
            slideImages.slideshow( 'show', 'next', {
                transition: 'push(left, false, ease)', // blind(direction, fade, ease)
                autoStyle: true, // handle some basic styles for you
                duration: 800, // duration of a transition
            });

            slideHeadlines.slideshow( 'show', 'next', {
                transition: 'push(right, false, ease)', // blind(direction, fade, ease)
                autoStyle: true, // handle some basic styles for you
                duration: 800, // duration of a transition
            });
            console.log("Done!");
        }
        var slidesInterval = setInterval( mySlides, 3000);

        $( '.sliderNext' ).click(function(){
            slideImages.slideshow( 'show', 'next', {
            } );

            slideHeadlines.slideshow( 'show', 'next', {
                transition:'push(right)'
            } );
        // or slideshowElement.slideshow( 'show', 'next' );
        });

        $( '.sliderPrev' ).click(function(){
            slideImages.slideshow( 'show', 'previous', {
                transition:'push(right)'
            } );

            slideHeadlines.slideshow( 'show', 'previous', {
                transition:'push(left)'
            } );
        // or slideshowElement.slideshow( 'show', 'previous' );
        // etc.
        });

    });

The console.log is there just to make sure the function fires—sure enough, "Done!" shows up in the console every three seconds.

However, the slide shows, when wrapped in that function, just don't work (including the next/prev functionality). Console shows no errors or anything, and I can't see anything wrong with my code (though I'm not much of a JS developer). Am I doing something wrong, or is it the script?

FYI, leaving the function and intervals out (and setting the slideshows to autoplay) works just fine, but they fall out of sync eventually.

Thanks for the script regardless; I'll definitely be using it in future projects!

Question: Only the first slide acknowledges the width & height properties

This is my JS (very simple):

$('#slideshow').slideshow({
duration: 600,
delay: 5000,
transition: 'push(left)',
autoPlay: true,
selector: 'div.slide'
});

And here's the markup:

<div id="slideshow" style="width: 940px; height: 300px;">
<div class="slide">Slide 1.</div>
<div class="slide">Slide 2.</div>
<div class="slide">Slide 3.</div>
</div>

The first slide is fine, but all others only seem to have a width of maybe 100px, maximum. I've tried using very little text and a lot of text (e.g. a Lorem Ipsum paragraph).

What could be causing this?

Thanks!