Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Template Questions

jQuery lightbox not playing nicely???


5 Posts   2526 Views


2 November 2010 at 10:34am (Last edited: 2 November 2010 10:37am), Community Member, 46 Posts

Hey all, I've been learning silverstripe over the last few weeks and really enjoying it. I have started a project for a client but have got stuck trying to implement jQuery light box. The page loads without errors, but when I click on the image link it just links straight to the image file and leaves me with some nice wee errors in my consol.

I have checked all the required scripts are being loaded.

I have tried loading the scripts using both the "Requirements::javascript" method and conventionally in the template <head> tags.

I also tested the same scripts / code in a test.html file in the root of my SS installation and that worked fine. lightbox loads and no errors.

These are the errors I get in my consol:


Error: mismatched tag. Expected: </img>.
Source File:
Line: 1, Column: 432
Source Code:
<div xmlns=""><div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image"><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="images/lightbox-ico-loading.gif"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img src="images/lightbox-btn-close.gif"></a></div></div></div></div></


Error: uncaught exception: [Exception... "An invalid or illegal string was specified" code: "12" nsresult: "0x8053000c (NS_ERROR_DOM_SYNTAX_ERR)" location: "http://localhost:8888/silverstripe/magmagallery/mysite/javascript/lightbox/js/jquery.js Line: 23"]

Ideas anybody?

Thanks in advance :)

Ryan M.

2 November 2010 at 10:59am Community Member, 309 Posts

First error is from an unclosed img tag. Close it up by putting /> at the end, since you're using an XHTML doctype.

Second one, not really sure but it sound like you should just grab a fresh copy of jquery. Use [url=]Google's[/url].

Try these and then come back again if you still get errors.

P.S. Sometimes I find it necessary to insert the js call in the template instead of using the function in PHP. The PHP function places the js calls at the bottom of your page, which might load after anything else you have.


2 November 2010 at 12:25pm (Last edited: 2 November 2010 12:26pm), Community Member, 46 Posts

Thanks for your reply Ryan.

The problem was with the doctype I had specified.

I had:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns="">

I replaced with

<!DOCTYPE html>
<html lang="en">

(As recommended by SilverStripe here

The img tags generated by the lightbox did not close which caused those errors, but now seems to be ok.



24 June 2011 at 10:39am Community Member, 90 Posts

Hey, Think the <?xml version="1.0" encoding="UTF-8"?> caused the problem in JQuery lightbox/
I have spent quite some time try to debug that.
Is that mean, the Jquery lightbox didnt support the <?xml> xhtml standard?
Any insights?!



25 June 2011 at 7:51am (Last edited: 25 June 2011 8:12am), Community Member, 141 Posts

Well, i can only refer to the code posted above, since i'm not familiar with this particular lightbox script.
This code used to generate the lightbox will not validate for a XHtml doctype , 'cause the <img> tags are not properly closed. (Like Ryan said)
But it will validate for a Html5 doctype, because it's more tolerant to unclosed tags. (but I still prefer my tags closed)

So you have the options to choose another doctype, fix this script to close the tags or use another jQuery lightbox script.