Login

Lightbox

MisterNathan

14 year(s) ago

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. :P 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

serfofChrist92

14 year(s) ago

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] [/code] Should be changed to: [code] [/code] Then change your ready function to the following: [code] $(document).ready(function() { $(".pic").fancybox({ 'titleShow' : false, 'transitionIn' : 'elastic', 'transitionOut' : 'elastic' }); }); [/code] http://api.jquery.com/class-selector/

serfofChrist92

14 year(s) ago

Blasted BBCode loses the code formatting. The key line in the ready function to look at: $("[color=red]a#pic[/color]" ).fancybox({ --changes to-- $(".pic" ).fancybox({

MisterNathan

14 year(s) ago

No luck. :( Well, I say no luck. Instead of 'invalid function' I just get '$(".pic" ) is null' now. :P 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. :P

serfofChrist92

14 year(s) ago

OK...copied your source locally and tried my own debugging. When I remove this: [code][/code] 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/

serfofChrist92

14 year(s) ago

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/

MisterNathan

14 year(s) ago

Well dadgum. Well, at least this gives me a project to occupy myself for another weekend. Well. Part of a weekend. :P Thanks, man! The compatibility crossed my mind, but I dismissed it as preposterous (read: I didn't want it to be so).

MisterNathan

14 year(s) ago

On second thought, jQuery has a noConflict code. :D [url]http://docs.jquery.com/Using_jQuery_with_Other_Libraries[/url]

MisterNathan

14 year(s) ago

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. :P

serfofChrist92

14 year(s) ago

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

XS (Extra Small) SM (Small) MD (Medium) LG (Large)