fancybox doesn`t work, no console errors

Question

I have some problems with fancybox...I load the files like so:

    <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <script src="js/jquery-1.10.1.min.js"></script>
    <script src="js/jquery.mousewheel-3.0.6.pack.js"></script>
    <script src="js/jquery.fancybox.js"></script>

    <!---strat-date-piker---->
    <link rel="stylesheet" href="css/jquery-ui.css"/>
    <link rel="stylesheet" href="js/jquery.fancybox.css"/>
    <script src="js/jquery-ui.js"></script>
    <script>

I have the photos listed like so:

 <ul class="service_list">
                    <li>
                        <div class="ser_img">
                            <a class="fancybox" href="images/v1.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet">
                                <img src="images/v1.jpg" alt="" />
                                </a>


                        </div>

                    </li>
                    <li>
                        <div class="ser_img">
                            <a class="fancybox" href="images/v2.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet">
                                <img src="images/v2.jpg" alt="" />
                                </a>

                        </div>

                    </li>
                    <li>
                        <div class="ser_img">
                            <a class="fancybox" href="images/v3.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet">
                                <img src="images/v3.jpg" alt="" />
                                </a>

                        </div>

                    </li>
                    <li>
                        <div class="ser_img">
                            <a class="fancybox" href="images/v4.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet">
                                <img src="images/v4.jpg" alt="" />

                            </a>
                        </div>

                    </li>
                    <div class="clear"></div>
                </ul>
                <ul class="service_list top">
                    <li>
                        <div class="ser_img">
                            <a class="fancybox" href="images/v5.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet">
                                <img src="images/v5.jpg" alt="" />
</a>
                        </div>

                    </li>
                    <li>
                        <div class="ser_img">
                            <a class="fancybox" href="images/v6.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet">
                                <img src="images/v6.jpg" alt="" />

</a>
                        </div>

                    </li>
                    <li>
                        <div class="ser_img">
                            <a class="fancybox" href="images/v7.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet">
                                <img src="images/v7.jpg" alt="" />

</a>
                        </div>


                    </li>
                    <li>
                        <div class="ser_img">
                            <a class="fancybox" href="images/v8.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet">
                                <img src="images/v8.jpg" alt="" />
</a>
                        </div>

                    </li>
                    <div class="clear"></div>
                </ul>

I initialize the jquery like so:

  $(document).ready(function(){

            $(".fancybox").fancybox({
                openEffect  : "fade",
                closeEffect : "fade",
                type : "image"
            });

        });

When I load the page there are no console errors, but when I click an image it opens in a new tab...any ideas? Did read everything on stackoverflow and google!

Thanks!