EasilyBaffled
EasilyBaffled

Reputation: 3882

Bootstrap Lightbox is not popping up

I am working with the demo for Bootstrap Lightbox, I am also new to web development. I cannot get the lightbox to work, the first image in this case shell_small.jpg is visable, and it's clearly a link, but when I click on it the only notable change is that the url goes from http://127.0.0.1:52595/index.html to http://127.0.0.1:52595/index.html#demoLightboxbut the page stays the same. Can anyone explain what's going or not going on?

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
      <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
      <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.6.1/bootstrap-lightbox.css">
      <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.6.1/bootstrap-lightbox.js">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <a data-toggle="lightbox" href="#demoLightbox" class="thumbnail">
        <img src="shell_small.jpg" alt="Click to view the lightbox">
    </a>
    <div id="demoLightbox" class="lightbox hide fade"  tabindex="-1" role="dialog" aria-hidden="true">
        <div class='lightbox-content'>
            <img src="image.png">
            <div class="lightbox-caption"><p>Your caption here</p></div>
        </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Upvotes: 0

Views: 7135

Answers (2)

Mateo Stafa
Mateo Stafa

Reputation: 21

I was having a similar problem with light box the img and the shadow were showing but on a new page. what i had done wrong was put the bootstrap and the lightbox script in the head section. I changed that and put it at the end of the body section that fixed it. its a silly mistake even if i'm new to web developing tbh.

Upvotes: 2

idmean
idmean

Reputation: 14875

The problem is you are loading the Lightbox plugin before jQuery. Put jQuery in head or the lightbox code after the jQuery code. Secondly you are loading the lightbox code as a stylesheet.

Do it like this:

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.6.1/bootstrap-lightbox.js"></script>
  </body>
</html>

and remove

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.6.1/bootstrap-lightbox.js">

from head.

Upvotes: 2

Related Questions