Cycle plugin with easing and corners

Cycle plugin with easing and corners

I am trying to use the Cycle plugin with the corners plugin to cycle rounded corners. I am accounting for different sized images and hiding all but the first image until document ready.

Everything works until I try to use any easing affect it does not work. I have tried using easing version 1.1.1 which is used on the cycle plugin website and I have tried using the compatibility plugin on the easing plugin site without any luck. It may just be an outright incompatibility, but any help would be appreciated.

The code is:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script type="text/javascript" src="inc/jquery.easing.1.3.js"></script>




  2. <?php
  3. /*
  4. <script type="text/javascript" src="inc/jquery.easing.1.1.1.js"></script>
    <script type="text/javascript" src="inc/jquery.easing.compatibility.js"></script>
  5. */
  6. ?>
    <script type="text/javascript" src="inc/jquery.min.js"></script>
    <script type="text/javascript" src="inc/jquery.cycle.all.min.js"></script>
    <script type="text/javascript" src="inc/jquery.corner.2.11.js"></script>
    <style type="text/css">
    div.imagecycler {
        margin:100px auto;
    }
    div.imagecycler div.cycleimg {
        display:none;
    }
    div.imagecycler div.first {
        display:block;
    }
    </style>
    <script type="text/javascript">
    $.fn.corner.defaults.useNative = false;
    $(document).ready(function() {
        $('.cycleimg').corner("30px");

        $('.imagecycler').cycle({
            before:setSize,
            fx:'zoom', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
            easing:'bounceout',
            delay: -2000,
            //speed:500,
            //timeout:3000
        });
        function setSize() {
            $(this).css({display:"block"});
            var w = $(this).children("img").width();
            var h = $(this).children("img").height();
            $(this).css({width:w+"px",height:h+"px"});
            $(this).corner("30px");
        }
    });
    </script>
    </head>

    <body>
    <div class="imagecycler">
        <div class="cycleimg first"><img src="images/pic1.jpg" /></div>
        <div class="cycleimg"><img src="images/pic2.jpg" /></div>
        <div class="cycleimg"><img src="images/pic3.jpg" /></div>
        <div class="cycleimg"><img src="images/pic4.jpg" /></div>
    </div>
    </body>
    </html>