CODEWITHSUNDEEP
jquerylightbox
Meivyn
Meivyn

Reputation: 13

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 :

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

Upvotes: 1

Views: 2786

Answers (2)

Vucko
Vucko

Reputation: 20834

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.

Upvotes: 2

Kaja Mydeen
Kaja Mydeen

Reputation: 585

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>

Upvotes: 1

Related Questions