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

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Template Questions /

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

jQuery lightbox not playing nicely???

5 Posts 3919 Views

sheadawson

Community Member, 49 Posts

2 November 2010 at 10:34am

Edited: 02/11/2010 10:37am

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="http://www.w3.org/1999/xhtml"><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.

Community Member, 309 Posts

2 November 2010 at 10:59am

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 Google's.

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.

sheadawson

Community Member, 49 Posts

2 November 2010 at 12:25pm

Edited: 02/11/2010 12:26pm

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" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

I replaced with

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

(As recommended by SilverStripe here http://doc.silverstripe.org/html)

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

Cool!

SSadmin

Community Member, 90 Posts

24 June 2011 at 10:39am

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?!

Cheeers.
Alex

Invader_Zim

Community Member, 141 Posts

25 June 2011 at 7:51am

Edited: 25/06/2011 8:12am

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.

Cheers
Christian

Return to top