Question

在互联网上搜索如何构建好的Bootstrap Lightbox但这里有些错误。观看此视频www.youtube.com/watch?v=J-EZC46hOc8并在他之后重复，但我得到黑屏，图片悬停在www.dropbox.com/s/kw9fzoy8jjkxe49/pic.png?dl=0。 Here is the original page来自我开始编程的Bootstrap Lightbox。

代码：

<html>
<head>
    <meta charset="UTF-8">
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
    <link href="css/bootstrap-lightbox.css" ref="stylesheet"/>
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="span12">
                <h2>LightBox</h2>
                <div id="demoLightbox" class="lightbox hide fade" tabindex="-1" role="dialog"  area-hidden="true">
                    <div class="lightbox-content">
                        <img src="x.jpg" />
                        <div class="lightbox-caption">
                            <p>
                                This is lightbox
                            </p>
                        </div>
                    </div>
                </div>

                <a data-toggle="lightbox" href="#demoLightbox" class="span2 thumbnail">
                    <img src="x.jpg" />
                </a>
            </div>
        </div>
    </div>

</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="js/bootstrap-lightbox.js"></script>
</html>

非常感谢。

Answer 1

我看到的一件事是使用类隐藏。以下代码：

<div id="demoLightbox" class="lightbox hide fade" tabindex="-1" role="dialog"  area-hidden="true">

需要根据插件的Github repo改为：

<div id="demoLightbox" class="lightbox fade" tabindex="-1" role="dialog"  area-hidden="true">

另外，Github插件页面声明它已更新为使用bootstrap v3，而不是v2.3.2

无法看清楚图片Bootstrap LightBox

1 个答案: