2014-10-05 38 views
0

在互联网上搜索如何构建良好的Bootstrap灯箱,但这里有些错误。观看此视频www.youtube.com/watch?v=J-EZC46hOc8并重复追踪他,但我得到了黑屏,图片悬停的地方www.dropbox.com/s/kw9fzoy8jjkxe49/pic.png?dl=0。 Here is the original page Bootstrap灯箱从我开始编程这个。无法看到清晰的图片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> 

非常感谢。

+0

发布您的问题的图像并没有真正的帮助。做一个jsfiddle或者至少发布一个链接。 – Macsupport 2014-10-05 15:20:52

回答

0

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

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

此外,GitHub的插件页面状态更新它使用自举v3的,而不是V2:

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

需要根据插件的GitHub库变为此.3.2