Skip navigation
jlkappler
Currently Being Moderated

Lightbox js not activating.

Mar 30, 2013 4:03 PM

I have reviewed code till I am blue in the face.  Here is the webpage in question: http://www.thinkingkapsites.com/gallery_jimcofluid.htm The lightbox was working wonderful until I included into the main template the

 

. Don't know if it has anything to do with lightbox not working but I could stand a little second eye on this. Thanks so much and happy easter.

 
Replies
  • Currently Being Moderated
    Mar 30, 2013 6:36 PM   in reply to jlkappler

    Seems OK in FF, but kind of wonky in IE8

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 31, 2013 1:09 AM   in reply to jlkappler

    Hello,

     

    may I put in my two cents too?  My IE10 and my FF19.0.2 show your website so too in the right manner, when I call http://www.thinkingkapsites.com/gallery_jimcofluid.html. (See your link from above without a "l".

     

    And naturally it's no offense: In your menu bar I noticed that all first menu items are highlighted with a link too. We usually let the first point blank, the sign for the "missing link" is "#".

     

    Hans-Günter

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 31, 2013 5:28 AM   in reply to Ken Binney

    As Ken says, you need to repair the errors reported by the W3C validator.

     

    I haven't looked at everything in detail, but two problems immediately jump out that might affect the lightbox:

     

    1. There are spaces in the filename of an image on line 171.
    2. You have used the ID colorchange multiple times. Reusing an ID frequently prevents JavaScript from working correctly. Replace it with a class of the same name, and change the style rule accordingly.

     

    Another problem that needs to be fixed, although it shouldn't affect the lightbox is the <meta> tag on line 10, which looks as though it has been accidentally copied from a PHP script:

     

    <meta http-equiv="Content-Type"$message ='MIME-Version:1.0'."\r\n">

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 31, 2013 5:57 AM   in reply to jlkappler

    Hello,

     

    you are welcome and please no frustration! I said in another thread, what I am in DW I owe the people here ... and I'm learning every day by an attentive following the questions and answers here. What concerns IE10, here is a link (you would have found it of yourself, I'm sure ):

     

    http://windows.microsoft.com/en-us/internet-explorer/downloads/ie-10/w orldwide-languages

     

    Since working with it, a very interseting world has opened, one of it are these "exclusions". Here I tried (use IE10 to see it): http://hansgd.de/DWTest/TextUmfliessenSS/TextUmfliessenCSSWINOrig.php. You will find the MS guidelines here: http://msdn.microsoft.com/library/ie/hh673558(v=vs.85).aspx.

     

    Hans-Günter

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 31, 2013 9:12 AM   in reply to jlkappler

    Oh my gosh. Trying to read that code without any line breaks is enough to give anyone a headache.

     

    I've just tested your live page in Chrome Developer Tools. On line 127 of your HTML, you're using the jQuery on() event handler, which is available only in jQuery 1.7 or later. The version of jQuery in your jquery.js file is jQuery 1.2.3.

     

    Update to the latest version of jQuery, and then go enjoy your Easter eggs.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 31, 2013 10:39 PM   in reply to jlkappler

    Can you try calling your jQuery1.9.1.min.js script before calling Lightbox.js script? Re-arrange it in your <head> tag to see if that helps.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 1, 2013 2:56 AM   in reply to Sudarshan Thiagarajan

    Sudarshan is right. Replace the link to jquery.js on line 15 with a link to jquery-1.9.1.min.js, and remove the link to jquery-1.9.1.min.js on line 97.

     

    If that doesn't solve the problem, one other suggestion is to delete $(function(){ on line 173. Also delete the closing }); on line 187. You're already running a document-ready function for the image maps on lines 113 to 119. I'm not sure whether jQuery allows you to run a document-ready function more than once. You certainly can't do it with standard JavaScript.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 1, 2013 7:16 AM   in reply to jlkappler

    Hhm,

     

    although your menu is not ready,

    drLightb01.JPG

     

    your lightbox is running now:

     

    drLightb02.JPG

     

    Actually I wanted to propose earlier that you build lb completely new. Using only these files

     

    js/jquery-1.7.2.min.js (no jquery-1.9.1.min.js necessary, I tried it out)
    js/lightbox.js
    css/lightbox.css
    images/close.png
    images/loading.gif
    images/next.png
    images/prev.png

     

    and advices from

     

    http://lokeshdhakar.com/projects/lightbox2/ ("How to use")

     

    Hans-Günter

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 1, 2013 9:02 AM   in reply to David_Powers

    I guess OP has moved the lightbox.js after jquery.js which is still fine. It's working now on the URL he had shared earlier.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 1, 2013 9:23 AM   in reply to jlkappler

    Gratulation! And maybe you should use - despite all the success a validation:

     

    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.thinkingkapsites.co m%2Fgallery_jimcofluid.html&charset=%28detect+automatically%29&doctype =Inline&group=0

     

    Not so much mistakes, but it might be recommended.

     

    Hans-Günter

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points