fancybox不起作用，没有控制台错误

Question

我在fancybox上遇到了一些问题...我加载了这样的文件：

    <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>

我列出的照片是这样的：

 <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>

我像这样初始化jquery：

  $(document).ready(function(){

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

        });

当我加载页面时没有控制台错误，但当我点击图像时，它会在新标签页中打开...任何想法？已经阅读了stackoverflow和google上的所有内容！

谢谢！