Question

I am creating a coverflow plugin but I have a slight problem when it first loads.

The size/styles of the images is set based on their position in the coverflow. When the page first loads the images all resize properly but they do not reposition themselves. If I them use the left and right navigation they work correctly.

I am not sure what is causing this. I thought it might be something to do with the variable that sets the starting position of the coverflow…

Here’s my code:

    <script type="text/javascript" src="/scripts/jquery-ui.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            var coverflowPos = Math.round($('#coverflow img').length / 2)

            $('#coverflow img').each( function(i) {
                $(this).css({'opacity' : 1-(Math.abs(coverflowPos-i)*0.4), 'z-index' : 100-(Math.abs(coverflowPos-i)) }).width(200-(Math.abs(coverflowPos-i)*50)).height(128-(Math.abs(coverflowPos-i)*50));
            });

// If I run the testme() function here, it animates to the right place but I want it to start in this position rather than animate to it

            $('#moveLeft').click( function() {
                if(coverflowPos > 1) {
                    coverflowPos = coverflowPos-1
                }
                testme();
            });

            $('#moveRight').click( function() {
                if(coverflowPos < $("#coverflow img").length -1) {
                    coverflowPos = coverflowPos+1
                }
                testme();
            });

            function testme() {
                $('#coverflow img').each( function(i) {
                    $(this).animate({
                        opacity: 1-(Math.abs(coverflowPos-i)*0.4),
                        width: 200-(Math.abs(coverflowPos-i)*50),
                        height: 128-(Math.abs(coverflowPos-i)*50)
                    }, {
                        duration: 500,
                        easing: 'easeInOutSine'
                    }).css({ 'z-index' : 100-(Math.abs(coverflowPos-i)) });
                });

            };

        });

    </script>

And here’s a link to a jsfiddle:

http://jsfiddle.net/r8NqP/4/

Answer 1

Calling testme() at the end of the ready() function moves them into place. It does ease them in though, which looks a bit odd, could get rid of the ease in testme() by adding a doease parameter.