I'm currently trying to implement lightbox onto my website, but I cannot get it to work, I don't think there is anything conflicting with it, and I have placed all of the files in the correct locations and linked them how it tells you to on the lightbox 2 website. ( http://lokeshdhakar.com/projects/lightbox2/ )
Just to double check:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet">
is in the head tags,
<script src="js/lightbox.js"></script>
Is at the bottom of the page, just before the closing body tag.
lightbox.css is in the css directory lightbox.js is in the js directory
<li><img src="images/1.png" data-lightbox="image-1" /></li>
and above is what all of my image tags look like.
I'm unsure why it isn't working. I have the files uploaded to a server, and it doesn't work on there either.
Thanks in advance
The problem is that you're using an img
tag, and they explicity say to use an anchor a
one.
For me, it's working like a charm:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.1/js/lightbox.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.1/css/lightbox.min.css" rel="stylesheet" /> <ul> <li> <a href="https://s-media-cache-ak0.pinimg.com/236x/d7/24/f9/d724f9e2e1a300dbdcb11b1d0491c884.jpg" data-lightbox="panda">Cute baby panda</a> </li> <li> <a href="https://s-media-cache-ak0.pinimg.com/236x/25/17/52/2517525a674d91b127938e55a72f0f12.jpg" data-lightbox="panda">Another</a> </li> <li> <a href="http://i.ytimg.com/vi/qfsRZsvraD8/hqdefault.jpg" data-lightbox="panda">Last one</a> </li> </ul>
The documentation says to use <a>
(anchor tag) to trigger the lightbox.
<li>
<a href="images/1.png" data-lightbox="image-1">
<img src="images/1.png" />
</a>
</li>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.