CODEWITHSUNDEEP
javascriptjquerylightboxlightbox2
Jan
Jan

Reputation: 23

Lightbox2 Not Working; "Uncaught SyntaxError: Invalid or Unexpected Token"

I am attempting to use Lokesh Dhakar's Lightbox2 on my art portfolio site. I have downloaded the files, followed all instructions, and used the lightbox-plus-jquery.js file (since I know next to nothing about Jquery).

When I click the link to the image, it only opens the image up on a new page with a dark background.

I use Chrome, so I had it inspect the page, and it found a "Unexpected SyntaxError: Invalid or Unexpected Token", referring to "lightbox-plus-jquery.js:1". I've never seen that error before.

Can someone please help and find out where I went wrong? This is driving me absolutely INSANE.

Site: http://art.juniebug.net/portfolio.html

Thank you!!

UPDATED CODE BELOW: 2/26/17 using CDNs now!:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html><head>
<meta name="Author" content="Janna Correa">


<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/css/lightbox.css" rel="stylesheet" />
</head>
<style>
<!--
a:hover {
text-decoration: underline;
color: lightskyblue;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
 } 
a:hover {
text-decoration: underline;
color: lightskyblue;
}

-->
</style>
<title>JMC illustration * juniebug.net</title></head>

<body bgcolor="#FFFFFF" text="#000000" link="darkgreen" alink="orchid"   
vlink="mediumspringgreen">
<font face="Arial, Helvetica, Verdana, MS Reference Sans Serif, Calibri">




<br>
<br>
<center>

<br><br><br>


    <table border="0">
    <tr>
    <td>
    <center><img src="artinvisibar.gif"></center>


<br>
    <center>
    <img src="logo-jmc1.gif">
    </center>
    <br>


<center>
<img src="artstrip1.jpg">

    <br>
<div id="gallery">
    <a href="port/momo-Rio2.jpg" data-lightbox="gallery" rel="lightbox[closeup]"><img src="port/thumbs/momorio-t.gif" width="51" height="55"></a>

<a href="port/ioiosam2.jpg" data-lightbox="gallery" rel="lightbox[closeup]"><img src="port/thumbs/ioiosam-t.gif" width="51" height="55"></a>

</div>








</center>



    </td>
    </tr>
    </table>
    </center>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/js/lightbox-plus-jquery.js"></script>
</body>
</html>

Upvotes: 1

Views: 2718

Answers (3)

Ayan
Ayan

Reputation: 2918

Add the jquery plugin first (you must load it first as your plugin will depend on it to work), then add your lightbox plugin.

Like this 

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="lightbox-plus-jquery.js"></script>

And also you should add the scripts just before the </body> tag or just before the </head> tag. But in the site you are adding it inside </center> tag.

WORKING FIDDLE: https://jsfiddle.net/ayan/dzpqucvc/

UPDATE: For the list of CDNs, you can find it here.

Upvotes: 1

Zahid Saeed
Zahid Saeed

Reputation: 1171

I checked your code and it's clear that you haven't added jQuery link to your source code. Do it by either downloading and linking to it using <script> or use a CDN instead like this:

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>

So your JS code will look like this:

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="lightbox-plus-jquery.js"></script>

Note: The jQuery MUST be loaded before the LightboxJS.

Cheers :-)

Upvotes: 0

Tomato32
Tomato32

Reputation: 2245

You can try cdn provider for this. Or maybe I think you can try removing all comments in lightbox-plus-jquery.js file :))

<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/js/lightbox-plus-jquery.js"></script>

Upvotes: 0

Related Questions