点击后隐藏的 Fancybox 图像答案

【问题标题】：Fancybox image hidden after click点击后隐藏的 Fancybox 图像
【发布时间】：2013-08-30 11:20:59
【问题描述】：

我正在使用第一个灯箱系统。我选择了fancybox。但是，我有一个问题。点击后选择我画廊的图片，隐藏图片。

这是我所有的代码；

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>FancyBox Gallery Test</title>

    <link rel="stylesheet" href="inc/css/style.css" />
    <link rel="stylesheet" href="inc/js/fancybox/jquery.fancybox.css" />
    <link rel="stylesheet" href="inc/js/fancybox/helpers/jquery.fancybox-buttons.css" />
    <link rel="stylesheet" href="inc/js/fancybox/helpers/jquery.fancybox-thumbs.css" />
    <script type="text/javascript" src="inc/js/jquery.js"></script>
    <script type="text/javascript" src="inc/js/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="inc/js/fancybox/jquery.fancybox.js"></script>
    <script type="text/javascript" src="inc/js/fancybox/helpers/jquery.fancybox-buttons.js"></script>
    <script type="text/javascript" src="inc/js/fancybox/helpers/jquery.fancybox-media.js"></script>
    <script type="text/javascript" src="inc/js/fancybox/helpers/jquery.fancybox-thumbs.js"></script>
</head>
<body>

    <div class="gallery">
        <center>
        <script type="text/javascript">
            $(document).ready(function(){

                for(var i = 0;i<9;i++){
                    $(".gallery li#"+i).fancybox({
                        padding: 0,
                        'hideOnContentClick': false,
                        openEffect : 'elastic',
                        openSpeed  : 150,

                        closeEffect : 'elastic',
                        closeSpeed  : 150,

                        closeClick : true,

                        helpers : {
                            overlay : null
                        }
                    });
                }
            });
        </script>
        <ul>
            <li id="1"><img src="inc/imj/uye/Mustafa AY/1.jpg" alt="123123123" /></li>
            <li id="2"><img src="inc/imj/uye/Mustafa AY/1.jpg" alt="" /></li>
            <li id="3"><img src="inc/imj/uye/Mustafa AY/1.jpg" alt="" /></li>
            <li id="4"><img src="inc/imj/uye/Mustafa AY/1.jpg" alt="" /></li>
            <li id="5"><img src="inc/imj/uye/Mustafa AY/1.jpg" alt="" /></li>
            <li id="6"><img src="inc/imj/uye/Mustafa AY/1.jpg" alt="" /></li>
            <li id="7"><img src="inc/imj/uye/Mustafa AY/1.jpg" alt="" /></li>
            <li id="8"><img src="inc/imj/uye/Mustafa AY/1.jpg" alt="" /></li>
        </ul>
        </center>
    </div>
</body>
</html>

我们如何解决？因为，我看不出错。

感谢您的关注。好作品..

【问题讨论】：

标签： jquery jquery-plugins fancybox

【解决方案1】：

我希望我明白，你的问题是什么。我把它清理了一下，我希望我能解决你的问题:)

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>FancyBox Gallery Test</title>

    <link rel="stylesheet" href="inc/css/style.css" />
    <link rel="stylesheet" href="inc/js/fancybox/jquery.fancybox.css" />
    <link rel="stylesheet" href="inc/js/fancybox/helpers/jquery.fancybox-buttons.css" />
    <link rel="stylesheet" href="inc/js/fancybox/helpers/jquery.fancybox-thumbs.css" />
</head>
<body>

    <div class="gallery" style="text-align:center;">
        <ul>
            <li><a class="fancybox" rel="gallery1" href="inc/imj/uye/Mustafa AY/1.jpg" title="Image 1: Title"><img src="inc/imj/uye/Mustafa AY/1.jpg" /></a></li>
            <li><a class="fancybox" rel="gallery1" href="inc/imj/uye/Mustafa AY/1.jpg" title="Image 2: Title"><img src="inc/imj/uye/Mustafa AY/1.jpg" /></a></li>
            <li><a class="fancybox" rel="gallery1" href="inc/imj/uye/Mustafa AY/1.jpg" title="Image 3: Title"><img src="inc/imj/uye/Mustafa AY/1.jpg" /></a></li>
            <li><a class="fancybox" rel="gallery1" href="inc/imj/uye/Mustafa AY/1.jpg" title="Image 4: Title"><img src="inc/imj/uye/Mustafa AY/1.jpg" /></a></li>
            <li><a class="fancybox" rel="gallery1" href="inc/imj/uye/Mustafa AY/1.jpg" title="Image 5: Title"><img src="inc/imj/uye/Mustafa AY/1.jpg" /></a></li>
            <li><a class="fancybox" rel="gallery1" href="inc/imj/uye/Mustafa AY/1.jpg" title="Image 6: Title"><img src="inc/imj/uye/Mustafa AY/1.jpg" /></a></li>
            <li><a class="fancybox" rel="gallery1" href="inc/imj/uye/Mustafa AY/1.jpg" title="Image 7: Title"><img src="inc/imj/uye/Mustafa AY/1.jpg" /></a></li>
            <li><a class="fancybox" rel="gallery1" href="inc/imj/uye/Mustafa AY/1.jpg" title="Image 8: Title"><img src="inc/imj/uye/Mustafa AY/1.jpg" /></a></li>
        </ul>
    </div>

    <script type="text/javascript" src="inc/js/jquery.js"></script>
    <script type="text/javascript" src="inc/js/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="inc/js/fancybox/jquery.fancybox.js"></script>
    <script type="text/javascript" src="inc/js/fancybox/helpers/jquery.fancybox-buttons.js"></script>
    <script type="text/javascript" src="inc/js/fancybox/helpers/jquery.fancybox-media.js"></script>
    <script type="text/javascript" src="inc/js/fancybox/helpers/jquery.fancybox-thumbs.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){

            $(".fancybox").fancybox({
                padding: 0,
                openEffect : 'elastic',
                openSpeed  : 150,

                closeEffect : 'elastic',
                closeSpeed  : 150,

                closeClick : false,

                helpers : {
                    overlay : null
                }
            });
        });
    </script>
</body>
</html>

【讨论】：

如果你提供答案，你应该写下你所做的改变。没人看到，你改变了什么