Thumbnail animation

[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]

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]

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]

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]

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]

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]

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]

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

[Catlon]

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]

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.