Jump to:

3445 Posts in 1031 Topics by 872 members

Template Questions

SilverStripe Forums » Template Questions » jQuery lightbox not playing nicely???

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

Page: 1
Go to End
Author Topic: 2503 Views
  • SheaDawson
    Community Member
    45 Posts

    jQuery lightbox not playing nicely??? Link to this post

    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

    Re: jQuery lightbox not playing nicely??? Link to this post

    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
    45 Posts

    Re: jQuery lightbox not playing nicely??? Link to this post

    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.


  • SSadmin
    Community Member
    90 Posts

    Re: jQuery lightbox not playing nicely??? Link to this post

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


  • Invader_Zim
    Community Member
    141 Posts

    Re: jQuery lightbox not playing nicely??? Link to this post

    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.


Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.