PRK PRK - 4 months ago 33
HTML Question

Why Bootstrap lightbox thumbnail not working

I am following online tutorial for bootstrap lightbox thumbnail. I typed exact same code multiple times but it is not working. Whenever I click on the image, it opens up in new tab instead of popping up in the same window.
Here is the code,

<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>


I tried adding lightbox.js file at different positions but, still not working.

Answer

You have some errors in your HTML:

  1. Your img tag isn'g closed.

  2. You have this inside your a tag href="1.jpg"="image=1", just link to the image path once.

  3. You aren't using the data-attribute for the plugin: data-lightbox="" on your a tag either.

Review the Docs: Lightbox2

Working Example

<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>