为什么Bootstrap灯箱缩略图不起作用

时间:2016-07-10 14:48:09

标签: javascript html css twitter-bootstrap

我正在关注bootstrap灯箱缩略图的在线教程。我多次输入完全相同的代码,但它不起作用。每当我点击图像时,它都会在新标签中打开,而不是在同一窗口中弹出。 这是代码,

<title>Lightbox</title>

<link href="css/lightbox.css" rel="stylesheet" type="text/css">
<script src="http//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="F:/LightBox/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" type="text/css">
<link rel="stylesheet"   href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--
<link rel="stylesheet"     src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
<link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
-->
<link rel="stylesheet"  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-4">
        <a href="1.jpg"="image=1" data-title="my CATioN"><img src="1.jpg"   alt="" class="img-thumbnail"</a>
        </div>
    </div>
</div>

<!--
<script src="F:/LightBox/lightbox.js"></script>
-->

</body>

我尝试在不同位置添加lightbox.js文件,但仍无法正常工作。

1 个答案:

答案 0 :(得分:0)

HTML中有一些错误:

  1. 您的img代码尚未关闭。

  2. 您的a代码href="1.jpg"="image=1"内有此内容 链接到图像路径一次。

  3. 您没有使用数据属性作为插件: 您data-lightbox=""标记上的a也是。

  4. 查看文档:{​​{3}}

    工作示例

    <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <div class="container">
      <div class="row">
    
        <div class="col-sm-3">
          <a class="img-thumbnail" href="http://placehold.it/350x350/f00" data-lightbox="example-set" data-title="title">
            <img class="img-thumbnail" src="http://placehold.it/350x350/f00" alt="alt">
          </a>
        </div>
    
        <div class="col-sm-3">
          <a class="img-thumbnail" href="http://placehold.it/350x350/000" data-lightbox="example-set" data-title="title">
            <img class="img-thumbnail" src="http://placehold.it/350x350/000" alt="alt">
          </a>
        </div>
    
        <div class="col-sm-3">
          <a class="img-thumbnail" href="http://placehold.it/350x350/ff0" data-lightbox="example-set" data-title="title">
            <img class="img-thumbnail" src="http://placehold.it/350x350/ff0" alt="alt">
          </a>
        </div>
    
        <div class="col-sm-3">
          <a class="img-thumbnail" href="http://placehold.it/350x350" data-lightbox="example-set" data-title="title">
            <img class="img-thumbnail" src="http://placehold.it/350x350" alt="alt">
          </a>
        </div>
    
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/js/lightbox.min.js"></script>