Meivyn Meivyn - 6 months ago 54
jQuery Question

Lightboxes doesn't work at all

I try to include a lightbox on my site hosted locally on a virtual machine.

But no matter how I'm struggling, even by retrieving codes that work on the web, no one works for me.

I tested :


  • Lightbox V2

  • Fancybox

  • iLightBox



I even tested while local directly without going through an Apache server, but nothing works. I'm completely lost...

In case, one of the HTML tested, found here (Lightbox V2) :

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


Doesn't work at all on a file like
test.html
.
Some jQuery scripts that I already use (such for tabs) work, but not for the lightbox.

This is what I'm getting in Chrome's console :
Resource interpreted as Document but transferred with MIME type image/jpeg
. Nothing in Firefox's console and even Firebug.

Thanks for your help.




Update



This is the full HTML :

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="plugins/lightbox/js/lightbox.js"></script>
<title>Test</title>
<link href="plugins/lightbox/css/lightbox.css" rel="stylesheet">
</head>
<body>
<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>
</body>
</html>





Update



Solved, thanks to helpers :)

Answer

As lightbox is a JQuery plugin, first JQuery must be included in your snippet, and then lightbox.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link href="plugins/lightbox/css/lightbox.css" rel="stylesheet">
</head>
<body>
    <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>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="plugins/lightbox/js/lightbox.js"></script>
</body>
</html> 

Why it didn't work in the first place? Because the lightbox was triggered before the markup was loaded.

Even in the documentation it says:

  • Include the Javascript at the bottom of your page before the closing </body> tag.

  • Make sure jQuery, which is required by Lightbox, is also loaded.