Having some trouble with img cycling using .find(img:first)...

Having some trouble with img cycling using .find(img:first)...

Hi i have been racking my brain over this for the last couple of days.
Basically i have a stack of images that i want to cycle on a button click. The way i have done this is to use the .find(img:position) function.
At the moment i find the last image in the stack and .insertBefore the first img in the stack.

This works fine. But once i have switched the images the update code to change the button link to the last image in stack doesnt work. Its like my code is only running once. Aside from the fadeIn and fadeOut on the button.


html
  1. <div id="ps_container">
                <a id="button" style="height: 60px; width=60px; display: none;" alt="navigation arrow"></a>
                <img class="image"  src="images/beef-pie.jpg" style="margin:15px 15px;"  alt="Beef Pie" />
                <img class="image"  src="images/cheese.jpg"  alt="Cheese" style="margin:25px 25px;"/>
                <img class="image"  src="images/pan-fry.jpg" alt="Pan Fry" style="margin:35px 35px;" />
            </div>






Code
  1. (document).ready(function() {
       
        var $current = $ps_container.find('img:last');
        var rand = Math.floor(Math.random() * 41) - 20;

            var currentPositions = {
                marginLeft : $current.css('margin-left'),
                marginTop : $current.css('margin-top')
            }

            var $new_current = $current.prev(); 

        /** Handles the visablity of the nav button */
        $current.fadeIn('slow');

        $current.mouseover(function() {
            $('#button').fadeIn('slow');
        });

        $current.mouseout(function() {
            $('#button').fadeOut('slow');
        }); 

        $('#button').click(function() {

            if (btnLock)
                return;
            else
                btnLock = true;

            $current.animate({
                'marginLeft' : '250px;',
                'marginTop' : '-385px;'
            }, 250, function() {
                $(this).insertBefore($ps_container.find('img:first')).css({
                    '-moz-transform' : 'rotate(' + rand + 'deg)',
                    '-webkit-transform' : 'rotate(' + rand + 'deg)',
                    'transform' : 'rotate(' + rand + 'deg)'
                }).animate({
                    'marginLeft' : currentPositions.marginLeft,
                    'marginTop' : currentPositions.marginTop
                }, 250, function() {
                    $new_current.css({
                        '-moz-transform' : 'rotate(0deg)',
                        '-webkit-transform' : 'rotate(0deg)',
                        'transform' : 'rotate(0deg)'
                    });
                    $current = $new_current;
                });
            });
        });
    });




















































 

Hope someone can help.

Thanks
Tony G