Lightbox Not Working Onto (Any)Browser

Question

I watched a tutorial on a simple lightbox, and I am trying to figure out why it is not working for me. I am using http://lokeshdhakar.com/ version of the lightbox.

I do not know what the issue is. When I type it through the text editor I am using it just opens up the image in a new window. But just now in the code.io , it opened it up as the proper lightbox. I am so confused on what is happening.

Here is my code.

<head>
<meta charset="utf-8">
<title> Fine Art</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link href="styles5.css" rel="stylesheet" type="text/css">
 <link href="css/lightbox.css" rel="stylesheet" type="text/css">

 <link href="fineart.css" rel="stylesheet" type="text/css">
 <link href="https://fonts.googleapis.com/css?    
family=Roboto:400,100,400italic,500,900,300,500italic,900italic"  
rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/lightbox.min.js"></script>


</head>
<body>

<h1 class="fineart"> B &amp; W Photo </h1>
  <div id="page"><!--beginning of sidebar-->
<div id="sidebar">
    <div><a href="index.html"><img id="logo" src="img/logo.png"/></a>  
</div>
    <div>
    <ul class="sb">
        <li ><a href="index.html"> Home</a> </li>
        <li ><a href="about.html"> About</a> </li>
        <li ><a  href="works.html"> Works</a> </li>
        <li ><a  href="resume.html"> Resume</a> </li>
     </ul>
    </div>


    <div id="sidebar-btn">
        <span></span>
        <span></span>
        <span></span>
    </div>

    </div>




    <script  
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>

<script>

$(document).ready(function(){
    $('#sidebar-btn').click(function(){
        $('#sidebar').toggleClass('visible');
    });

});

</script>

</div><!--end of sidebar-->

<div class="container-a4">
    <ul class="caption-style-4">
        <li>
            <img src="http://i68.tinypic.com/2re64y0.jpg" alt="blur">
            <div class="caption">
                <div class="blur"></div>
                <div class="caption-text">
                  <h1><a href="http://i63.tinypic.com/9lhaj9.jpg" data- 
lightbox="photos">Blur</a></h1>
                  <p> Photo Series </p>
                </div>

            </div>
        </li>
    </ul>
    </div>
</body>
</html>

(here's the rest) http://codepen.io/kasiariele/pen/jbjVgr

Like I said, I'm not sure why its working in the site editor, but when I save and refresh onto the browser it opens the image on a new page instead of the lightbox. Please help!

score 0 · Accepted Answer · edited May 23 '17 at 12:30

You need to order your javascript libraries correctly.

You are loading lightbox.min.js before loading jquery.min.js (which is a dependency for how you are using lightbox).

Here is a direct quote from the lightbox website.

If you already use jQuery on your page, make sure it is loaded before lightbox.js. jQuery 1.7 or greater is required.

You should also load all of your scripts together right before your </body> closing tag, like so:

<script  
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="js/lightbox.min.js"></script>
<script>
    $(document).ready(function(){
        $('#sidebar-btn').click(function(){
            $('#sidebar').toggleClass('visible');
        });
    });
</script>

Lightbox Not Working Onto (Any)Browser

1 Answers1