Guidance for creating auto rotate

[hungrysquirrel]

@ericthelast

Thanks for contributing to this project. Can you provide me some guidance on a few things.

1. Have the animation begin after x seconds if user does not click the start btn
2. Auto rotate if the user does not click the buttons to change the image

[ericthelast]

Hey @hungrysquirrel, happy to help.

I've created this gist detailing how both features could be accomplished. Check that out and let me know if it helps. One way that code could be improved would be to check for when a user does click so that you can clear the timeout.

Anyhoo, hope that helps!

[bheijns]

Hi @ericthelast ,

I can't get it to work on autoplay... Can you please help me out? What I want to do:

1. Autoplay --> If it's possible to make a nice kind of refresh each two minutes or so it would be great (because our image folder is always being filled).
2. When a backside of an image (description) is available rotate the image after a couple seconds to show the back; after that resume autoplay.

Can you or somebody else help me out?

Thank you so much in advance.

Bas

[inklingsofreality]

I would like to comment that @ericthelast gist works for the autoplay part.

What I am trying to add to it is the flipping to the back after it shuffles to the next image, then flips to the front, and then shuffles again.

I, too, need it to pull in new images, but that's later down the road.

The issue I have is in finding the function that actually does the flipping. I cannot tell if it is in the CSS or in the js file. There is nothing that explicitly tells it to flip. It also seems to somehow be tied to the navigation bar, which I need turned off and have been able to do so.

Any thoughts on where the flipping functionality resides? And no, that's not a euphemism...;)

Update: The code appears to be in _rotateItem and one should be able to call it by saying ps._rotateItem(), but it doesn't appear to be working. If I get it working, I'll let you know.

The following allows you to hide the navigation, rotate the image after 3 seconds, rotate it back after 3 seconds and then proceed to the next item..

new Photostack( document.getElementById( element ), {
              // any other options here,
                showNavigation: false,                
                afterShowPhoto: function(ps) {
                    setTimeout(function() {
                        ps._rotateItem();
                        setTimeout(function() {
                            ps._rotateItem(); 
                            setTimeout(function() {
                                ps._navigate('next');
                            }, 3000);
                        }, 3000);
                    }, 3000);
                }                
            });