3212 Posts in 847 Topics by 809 members
|Go to End|
2 November 2010 at 10:34am Last edited: 2 November 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 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>.
Line: 1, Column: 432
<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></
Thanks in advance
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.
2 November 2010 at 12:25pm Last edited: 2 November 2010 12:26pm
Thanks for your reply Ryan.
The problem was with the doctype I had specified.
<?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">
I replaced with
(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.
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?
25 June 2011 at 7:51am Last edited: 25 June 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.
|Go to Top|