Reputation: 3882
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#demoLightbox
but 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
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
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