JQuery Novice to Ninja - Problem with (lightBox) example code


I have been reading the book JQuery N2N and following along with the example without a problem until I got

to Chapter 4’s Lightbox section.

I am unable to get the lightboxes to display correctly i.e. I get the grayed DIV to display when I select a picture

from the table, but the photo will not display.

This is using the example code from the book.

I tried troubleshooting the script.js file using alerts for doc ready, click event handler

example :
function positionLightboxImage() {
var top = ($(window).height() - $(‘#lightbox’).height()) / 2;
var left = ($(window).width() - $(‘#lightbox’).width()) / 2;
alert(‘I have been called !’)
‘top’ : top + $(document).scrollTop(),
‘left’ : left

The index.htm trigger:

<td>Johny Stardust (<a href=“images/surfing1.jpg” class=“lightbox”>pic</a>)</td>

Scripts, etc.:

<link rel=“stylesheet” href=“css/base.css” type=“text/css” media=“screen” charset=“utf-8” />
<link rel=“stylesheet” href=“css/LtBox.css” type=“text/css” media=“screen” charset=“utf-8” />
<link rel=“stylesheet” href=“css/navigation.css” type=“text/css” media=“screen” charset=“utf-8” />
<script src=“jquery-1.6.4.min.js” type=“text/javascript” charset=“utf-8”></script>
<script src=“script.js” type=“text/javascript” ></script>

When I click this alert I get the background div.

What am I missing here ?

Thanks for any insights !


I found a better way to debug my jquery script.

See page 97 “Troubleshooting with console.log” in JQuery Novice to Ninja.

I know, I should have read a little bit further in the book.

This prompted me to look for a Firebug video.

Here is a pretty good video, although it uses an earlier version of FB :


So now I am better equipped to discover my JQuery bug.

I will report back when I get to the bottom of my problem.

Thanks !


It happens even to the best of us. Well done :wink:

Closing the thread since it has been aswered… by the opener himself :smiley: