1

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

Community
  • 1
  • 1
Meivyn
  • 13
  • 6
  • 1
    Please post the full html you have tried as well as some info about your vm, as your problem is probably related to the headers. – Mr. Hugo Jun 01 '16 at 08:46
  • Updated with full HTML. I think I did not need to give information on the VM, since the code doesn't work either locally with a simple `.html` file opened in Chrome . – Meivyn Jun 01 '16 at 08:57
  • It works for me: http://codepen.io/anon/pen/pbvrwo. Must be your machine... – Mr. Hugo Jun 01 '16 at 09:00
  • Let me know if this works for you ? http://chaosdestiny.no-ip.org:8080/test – Meivyn Jun 01 '16 at 09:03
  • @Vucko I have a VirtualBox Debian. Even tryed this too. – Meivyn Jun 01 '16 at 09:04
  • The lightbox does not work on chaosdestiny.no-ip.org:8080/test. Please look at the script locations. I have changed them in my Codepen. – Mr. Hugo Jun 01 '16 at 09:06
  • I tried your code directly, it doesn't work anymore. Don't work on local .html too... What's wrong ? – Meivyn Jun 01 '16 at 09:13
  • My best guess that it is that your are not allowed to connect to the external sources. – Mr. Hugo Jun 01 '16 at 09:19
  • Used the code provided by Kaja Mydeen and it works. But when I replace `` with `` it doesn't work. I don't understand... – Meivyn Jun 01 '16 at 09:32

2 Answers2

2

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.

Community
  • 1
  • 1
Vucko
  • 20,555
  • 10
  • 56
  • 107
  • The OP has the scripts in the `head` element. And from his [comment](http://stackoverflow.com/questions/37563512/lightboxes-doesnt-work-at-all/37564761#comment62616692_37563987) you can see that he's loading lightbox before jQuery. – Vucko Jun 01 '16 at 09:36
  • 1
    Because the lightbox script was triggered before the markup was triggered. – Vucko Jun 01 '16 at 09:38
  • @Vucko Your reaction/solution is not an answer to the question, it should be a comment. You know that. – Mr. Hugo Jun 01 '16 at 09:39
  • @JoostS and why not? I've provided the answer to the problem (as the OP said that it resolved his issue), with the references to the issue. – Vucko Jun 01 '16 at 09:42
  • @Vucko Can you explain why this is the case only with lightboxes and not with my others jQuery code ? My jQuery tabs works with jQuery and tabs code in ``. – Meivyn Jun 01 '16 at 09:44
  • @Meivyn because most of the JQuery scripts use JQuery's [.ready handler](https://api.jquery.com/ready/) that executes the script when the DOM is fully loaded. [See also](https://learn.jquery.com/using-jquery-core/document-ready/). – Vucko Jun 01 '16 at 09:46
  • I'm not used to jQuery, thanks for your answer. I will keep this in mind, next time. Also, thanks to you JoostS, but I have to concede the vote to Vucko. – Meivyn Jun 01 '16 at 09:50
  • 1
    @JoostS This is not fully true. I was loading the lightbox script in ``, and that was my error. So he solved this for me. – Meivyn Jun 01 '16 at 09:57
  • OK, my bad! You guys are right. I upvoted this answer as well. I got confused because the codepen worked. – Mr. Hugo Jun 01 '16 at 10:02
  • It's not the first time I take a code on Codepen that don't work on my site :P Now I know why. – Meivyn Jun 01 '16 at 10:04
1

Download from here. Keep this file in examples folder. It was working. I think you should remove jquery.min and lightbox js

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <title>Lightbox Example</title>
  <link rel="stylesheet" href="../dist/css/lightbox.min.css">
</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 src="../dist/js/lightbox-plus-jquery.min.js"></script>

</body>
</html>
Kaja Mydeen
  • 585
  • 1
  • 7
  • 13