Question

我之前从未使用过奇特的盒子，除了打开一个带有图像的新窗口，我无法做任何事情，我希望它使用“弹性”功能在同一页面打开，这就是我写的......

<head>
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js"></script>
</head>

<body>
 <div class="grid_5" id="images">
            <a id="single_image" href="htmlandcss/images/1car.gif"><img src="htmlandcss/images/1car.gif" alt=""/></a>
</div>  

</body>
<script type="text/javascript">
        $(document).ready(function() {  

                        $("a#single_image").fancybox({
                            'transitionIn'  :   'elastic',
                            'transitionOut' :   'elastic', 
                            'overlayShow'   :   false
                        });

                    });

    </script>

任何帮助将不胜感激

Answer 1

您使用的jQuery版本与Fancybox2不兼容 - 我收到以下错误：

 Uncaught TypeError: Object #<Object> has no method 'prop'

尝试将jQuery更新为最新版本，或至少1.6.4版本（definitely works）

Answer 2

也许这个是你需要的，更简单和更短的代码

$.fancybox.open([
{
    href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
    link : 'http://jquery.com/'}
],{
    afterShow: function() {
    $(".fancybox-image").wrap('<a href="' + this.link + '" />')
    },   

    padding : 0   
});

FancyBox链接到另一个页面与图像

2 个答案: