So, I've never used Lightbox before but I decided I'd have some fun and use a variant for a small online portfolio I'm creating called 'Fancybox'. Thus far it's going great except for the fact that it isn't working.

It may or may not have something to do with the fact that I'm looking at this at 3:30am, but I can't figure out what's up. I even ended up copy and pasting code from their sample to make sure I wasn't being retarded (which is still entirely possible, I'll admit) but alas, no cigar. I don't suppose anyone here has a suggestion (and by suggestion, I mean tell me I'm a n00b and here's what to do)?
http://misternathan.com

It looks like your giving each picture the id "pic"...and when every element has the same ID it confuses the browser and just doesn't work at all.

Try changing your id to a class, and then using the class selector in jquery to select the elements instead of the ID.

Example:

Code:

<a id="pic" href="/p-images/French_Toast_shirt.jpg"><img src="/p-images/thumbs/French_Toast_shirt_t.jpg" alt=""/></a>

Should be changed to:

Code:

<a class="pic" href="/p-images/French_Toast_shirt.jpg"><img src="/p-images/thumbs/French_Toast_shirt_t.jpg" alt=""/></a>

Then change your ready function to the following:

Code:

$(document).ready(function() { $(".pic").fancybox({ 'titleShow' : false, 'transitionIn' : 'elastic', 'transitionOut' : 'elastic' }); });

http://api.jquery.com/class-selector/

Blasted BBCode loses the code formatting.

The key line in the ready function to look at:
$("a#pic" ).fancybox({
--changes to--
$(".pic" ).fancybox({

No luck.

Well, I say no luck. Instead of 'invalid function' I just get '$(".pic" ) is null' now.

To top it off, I'm entirely exhausted tonight, so I'm not really gonna focus on it lest I worsen the issue. I did, however, remove all save one picture just to keep it simple while I figure it out. Thanks, btw.

OK...copied your source locally and tried my own debugging.

When I remove this:

Code:

<script type="text/javascript" src="mootools.svn.js"></script>

your script works. When I put it back in, it stops working. I'm guessing mootools and jquery aren't compatible. Is mootools what you're using for the automatic scrolling effect? I'd try to find a jquery alternative to accomplish the horizontal scrolling. a quick search yielded this tutorial: http://valums.com/scroll-menu-jquery/

This might be of some use as well...Lightbox is listed here but there are some others as well. http://blueprintds.com/2009/01/20/top-14-jquery-photo-slideshow-gallery-plugins/

Well dadgum. Well, at least this gives me a project to occupy myself for another weekend. Well. Part of a weekend.

Thanks, man! The compatibility crossed my mind, but I dismissed it as preposterous (read: I didn't want it to be so).

On second thought, jQuery has a noConflict code.

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Aaaand it worked like a charm. Only issue I've had now is incorporating a few lines that disables right click over the Fancybox image (although it's not all that important to me). Firebug keeps telling me that I'm missing a '}' regardless of that fact that I'm not. Either way, it doesn't work. But MooTools and jQuery are playing nice now, so I'm happy enough.

Now the main thing is getting all my other work off my old hard drive so I don't only have 20 images.

ah, I had forgotten about the compatibility stuff. Yay for working scripts! Glad to be of service. And the site is looking good!