Fancybox issue

<script type="text/javascript">
    $(document).ready(function() {
    $("#showcase a").fancybox({
        prevEffect: 'elastic',
        nextEffect: 'elastic',
                openEffect: 'fade',
                closeEffect: 'fade',
                playSpeed: 3000,
        closeBtn: false,
                arrows: false,
        helpers: {
                overlay: {
            speedIn : 300,
            speedOut: 300,
            opacity : 0.8,
                        closeClick: true,
        css: {
            cursor: 'pointer',
        }
        },
        title   : {type     : 'float'},
        buttons : {position : 'top'}
        }
    });
    });
</script>

<div id="showcase">
    <a href="very_large_image1.png" rel="gallery"><img src="thumb1.png"></a>
    <a href="very_large_image2.png" rel="gallery"><img src="thumb2.png"></a>
    <a href="very_large_image3.png" rel="gallery"><img src="thumb3.png"></a>
</div>