fancybox undefined is not a function

Question

I have following script include page part:

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="<c:url value ='/resources/js/jquery-1.8.2.min.js'/>"></script>
<script type="text/javascript"
        src="<c:url value='/resources/js/underscore.js'/>"></script>
<!-- the mousewheel plugin -->
<script type="text/javascript" src="<c:url value ='/resources/js/jquery.mousewheel.js'/>"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="<c:url value ='/resources/js/popup.js'/>"></script>
<script type="text/javascript" src="<c:url value ='/resources/js/jquery.jscrollpane.min.js'/>"></script>
<script type="text/javascript" src="<c:url value ='/resources/js/scroll-startstop.events.jquery.js'/>"></script>
<script src="<c:url value ='/resources/js/jquery.ikSelect.js'/>" type="text/javascript"></script>
<script type="text/javascript" src="<c:url value ='/resources/js/jquery-ui-1.10.0.custom.min.js'/>"></script>
<!--uniform-->
<script src="<c:url value ='/resources/js/jquery.uniform.js'/>" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">

</script>
<!--end uniform-->




<script type="text/javascript" src="<c:url value ='/resources/js/script-ini.js'/>"></script>
<script type="text/javascript" src="<c:url value ='/resources/js/addImage.js'/>"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="<c:url value ='/resources/js/source/jquery.fancybox.js?v=2.1.5'/>"></script>
<link rel="stylesheet" type="text/css" href="<c:url value ='/resources/js/source/jquery.fancybox.css?v=2.1.5'/>" media="screen" />

<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="<c:url value ='/resources/js/source/helpers/jquery.fancybox-buttons.css?v=1.0.5'/>" />
<script type="text/javascript" src="<c:url value ='/resources/js/source/helpers/jquery.fancybox-buttons.js?v=1.0.5'/>"></script>

<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="<c:url value ='/resources/js/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7'/>" />
<script type="text/javascript" src="<c:url value ='/resources/js/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7'/>"></script>

<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="<c:url value ='/resources/js/source/helpers/jquery.fancybox-media.js?v=1.0.6'/>"></script>

following js:

$(".image").fancybox({
    helpers: {
        title : {
            type : 'float'
        }
    }
});

and following html:

<a href="/member/createCompany/getOriginalImage/1" title="" class="image">
     <img src="/member/createCompany/getSmallThumbnail/1" alt="">
</a>

When I load page I see error undefined is not a function for following line:

 $(".image").fancybox({

How to fix it?

UPDATE

When I rewrote like this:

$(document).ready(function () {
    $(".image").fancybox({
        helpers: {
            title : {
                type : 'float'
            }
        }
    });
}

error from console was disappear but when I click on image opens new tabs with picture. I want to see fancybox