Thumbnail animation #255

Closed
guitarcrazy44 opened this Issue Jan 20, 2012 · 15 comments

Projects

None yet

3 participants

@guitarcrazy44

I set my toggleControls to true and my thumbnails disappear and appear on mouseover correctly. My issue is there is no slide in animation when they appear/disappear as seen in demo1 on the below link.

http://proloser.github.com/AnythingSlider/demos.html#&panel1-3

@Mottie
Member
Mottie commented Jan 21, 2012

It would help me troubleshoot the problem if I saw some code (specifically, the initialization options) or a demo of the problem.

@guitarcrazy44
$('#slider').anythingSlider({
    buildArrows: false,
    buildStartStop: false,
    toggleControls: true,
    navigationSize: 8,
    animationTime: 0,
    delayBeforeAnimate: 500,
    onSlideBegin: function (e, slider) {
        slider.$items.fadeOut(500);
    },
    onSlideComplete: function (slider) {
        slider.$items.fadeIn(500, "swing");
    },
    navigationFormatter: function() {
        return '< div class="thumb">< / div >';
    }
});
@guitarcrazy44

basically, how do I add appear/ disappear animation to my navigation thumbnails on mouseover and how to I add a sliding animation when I click the next arrow to see the next set of thumbnails?

@Mottie
Member
Mottie commented Jan 22, 2012

I think this is what you are asking for (demo)... I'm not 100% sure because the code you shared above is for a fading transition.

$('#slider').anythingSlider({
    toggleControls : true,
    navigationSize : 3,
    navigationFormatter: function(i, panel) {
        return '< div class="thumb">< / div >';
    }
});

I think the key to what you want is actually in the css. The navigation controls need to be positioned absolutely and to the bottom:

div.anythingSlider .anythingControls {
    z-index: 100;
    height: 35px;
    opacity: 0.90;
    filter: alpha(opacity=90);
    position: absolute;
    bottom: 0;
    left: 60px; /* this left value includes the width of the left arrow (45px) */
    width: 270px; /* width of the navigation controls, so that the slideshow button is inside of the slider */
}
@guitarcrazy44

I figured out why there was no animation is because I had my animationTime set to 0. My next questions:

-Is there a way to have the thumbnails fade in and out on mouse over instead of sliding in and out?

-How can I make the navigation fade out after a certain amount of seconds like a timeout?

-How would I add tooltips to each thumbnail on mouseover like these?

http://flowplayer.org/tools/demos/tooltip/index.html

@Mottie
Member
Mottie commented Jan 23, 2012

Ok do this instead (demo):

var fadeTime = 400,
    fadeDelay = 5000, // hide after 5 second delay
    timer,
    hideControls = function(slider){
        clearTimeout(timer);
        setTimeout(function(){
            slider.$controls.fadeOut(fadeTime);
            $('.tooltip').fadeOut(fadeTime);
        }, fadeDelay); 
    };

$('#slider').anythingSlider({

    navigationSize: 3,

    navigationFormatter: function(i, panel) { 
        var url = 'http://proloser.github.com/AnythingSlider/demos/images/th-slide-',
        //  [ 'image name', 'tooltip title' ],
        thumbs = [
            [ 'civil-1', 'tooltip 1' ],
            [ 'env-1', 'tooltip 2' ],
            [ 'civil-2', 'tooltip 3' ],
            [ 'env-2', 'tooltip 4' ],
            [ 'civil-1', 'tooltip 5' ],
            [ 'env-1', 'tooltip 6' ],
            [ 'civil-2', 'tooltip 7' ],
            [ 'env-2', 'tooltip 8' ],
        ];
        return '<img title="' + thumbs[i-1][1] + '" src="' + url + thumbs[i-1][0] + '.jpg">';
    },

    // Callback when the plugin finished initializing
    onInitialized: function(e, slider) {
        hideControls(slider);
        slider.$wrapper.hover(function(){
            clearTimeout(timer);
            slider.$controls.fadeIn(fadeTime);
        }, function(){
            hideControls(slider);
        });

        // add tooltip
        slider.$controls.find('img').tooltip();

    },

});
@Mottie
Member
Mottie commented Jan 23, 2012

Before I can do anything with that code, I need to know where is the tooltip data stored? What I mean is that in the example code above, I made an array with the thumbnail image file name and tooltip data. The tooltip data needs to be added using the navigationFormatter function to the image title before the tooltip will work.

@Mottie
Member
Mottie commented Jan 23, 2012

It looks like you just need to remove the toggleControls: true, from the slider options. Then you should be good to go! :)

@guitarcrazy44

thank you so much!

@guitarcrazy44

I changed the script up a bit so instead of the thumbnails completely fading out after the timeout, they fadeTo a low opacity. My question is how can I add a mouseover event to make them fade back to 1.0 opacity?

$(function () {
    var fadeTime = 1750,
        fadeDelay = 4000,
    // hide after 3 second delay
    timer, hideControls = function (slider) {
        clearTimeout(timer);
        setTimeout(function () {
            slider.$controls.fadeTo(fadeTime, 0.1);
            $('.tooltip').fadeOut(fadeTime);
        }, fadeDelay);
    };

    $('#slider').anythingSlider({
        toggleControls: false,
        navigationSize: 8,
        buildArrows: false,
        buildStartStop: false,
        onSlideBegin: function (e, slider) {
            /*myPlayer.setStop();*/
            slider.$items.fadeOut(0);
        },
        onSlideComplete: function (slider) {
            slider.$items.fadeIn(500, "swing");
        },
        navigationFormatter: function (i, panel) {
            var url = 'dbs/images/thumbnails/',
            //  [ 'image name', 'tooltip title' ],
            thumbs = [
                ['thumb1', 'tooltip 1'],
                ['thumb2', 'tooltip 2'],
                ['thumb3', 'tooltip 3'],
                ['thumb4', 'tooltip 4'],
                ['thumb5', 'tooltip 5'],
                ['thumb1', 'tooltip 6'],
                ['thumb2', 'tooltip 7'],
                ['thumb3', 'tooltip 8'],
                ['thumb4', 'tooltip 9'],
                ['thumb5', 'tooltip 10'],
            ];
            return '<img title="' + thumbs[i - 1][1] + '" src="' + url + thumbs[i - 1][0] + '.jpg">';
        },

        // Callback when the plugin finished initializing
        onInitialized: function (e, slider) {
            hideControls(slider);
            slider.$wrapper.hover(function () {
                clearTimeout(timer);
                slider.$controls.fadeIn(fadeTime);
            }, function () {
                hideControls(slider);
            });

            slider.$controls.find('img').tooltip();

        },

    });
});
@Mottie
Member
Mottie commented Jan 25, 2012

You're killing me!! LOL

Why doesn't the slider.$controls.fadeIn(fadeTime); work? It should be the same as slider.$controls.fadeTo(fadeTime, 1);

@guitarcrazy44

because I want it to fade to .3 capacity after a certain amount of time and still be visible then when you mouse over it, it fades back in to full opacity. :)

@Mottie
Member
Mottie commented Jan 25, 2012

And so what issue are you having with it? I've gotten you 99% of the way...

@Catlon
Catlon commented Feb 14, 2012

Hello Mottie,

I'm using this with Wordpress and having static thumbs seems a bit strange to me. Is there anyway I could call the featured image as thumbnail?

this gets the post thumb in wordpress :
but i can't figure out how to fetch that instead of the predefined thumbs...

Could you help me out?
Thanks

@Mottie
Member
Mottie commented Feb 15, 2012

Hi Catlon!

Sadly, I know almost nothing about Wordpress, so I'd recommend you ask this question on the Wordpress forums for Jacob to answer for you.

@Mottie Mottie closed this Feb 15, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment