Help | Sign In
myPanel Home Join Chat Forums Inbox Groups Search Music Videos
Christian Forums
Welcome, Guest
Please Login or Register.    Lost Password?
Lightbox (1 viewing) (1) Guest
Go to bottom Post Reply Favoured: 0
TOPIC: Lightbox
#429572
MisterNathan (Admin)
Admin
Posts: 10160
graphgraph
User Offline Click here to see the profile of this user
Lightbox 4 Years, 7 Months ago Rating: 59  
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
 
Report to moderator   Logged Logged  
  The administrator has disabled public write access.
#429580
serfofChrist92 (Admin)
Admin
Posts: 7292
graphgraph
User Offline Click here to see the profile of this user
Re:Lightbox 4 Years, 7 Months ago Rating: 30  
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/
 
Report to moderator   Logged Logged  
  The administrator has disabled public write access.
#429581
serfofChrist92 (Admin)
Admin
Posts: 7292
graphgraph
User Offline Click here to see the profile of this user
Re:Lightbox 4 Years, 7 Months ago Rating: 30  
Blasted BBCode loses the code formatting.

The key line in the ready function to look at:
$("a#pic" ).fancybox({
--changes to--
$(".pic" ).fancybox({
 
Report to moderator   Logged Logged  
 
Last Edit: 2010/03/15 19:21 By serfofChrist92.
  The administrator has disabled public write access.
#429606
MisterNathan (Admin)
Admin
Posts: 10160
graphgraph
User Offline Click here to see the profile of this user
Re:Lightbox 4 Years, 7 Months ago Rating: 59  
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.
 
Report to moderator   Logged Logged  
 
Last Edit: 2010/03/16 00:18 By MisterNathan.
  The administrator has disabled public write access.
#429664
serfofChrist92 (Admin)
Admin
Posts: 7292
graphgraph
User Offline Click here to see the profile of this user
Re:Lightbox 4 Years, 7 Months ago Rating: 30  
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/
 
Report to moderator   Logged Logged  
  The administrator has disabled public write access.
#429665
serfofChrist92 (Admin)
Admin
Posts: 7292
graphgraph
User Offline Click here to see the profile of this user
Re:Lightbox 4 Years, 7 Months ago Rating: 30  
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/
 
Report to moderator   Logged Logged  
  The administrator has disabled public write access.
#429673
MisterNathan (Admin)
Admin
Posts: 10160
graphgraph
User Offline Click here to see the profile of this user
Re:Lightbox 4 Years, 7 Months ago Rating: 59  
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).
 
Report to moderator   Logged Logged  
  The administrator has disabled public write access.
#429674
MisterNathan (Admin)
Admin
Posts: 10160
graphgraph
User Offline Click here to see the profile of this user
Re:Lightbox 4 Years, 7 Months ago Rating: 59  
On second thought, jQuery has a noConflict code.

http://docs.jquery.com/Using_jQuery_with_Other_Libraries
 
Report to moderator   Logged Logged  
  The administrator has disabled public write access.
#429677
MisterNathan (Admin)
Admin
Posts: 10160
graphgraph
User Offline Click here to see the profile of this user
Re:Lightbox 4 Years, 7 Months ago Rating: 59  
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.
 
Report to moderator   Logged Logged  
  The administrator has disabled public write access.
#429680
serfofChrist92 (Admin)
Admin
Posts: 7292
graphgraph
User Offline Click here to see the profile of this user
Re:Lightbox 4 Years, 7 Months ago Rating: 30  
ah, I had forgotten about the compatibility stuff. Yay for working scripts! Glad to be of service. And the site is looking good!
 
Report to moderator   Logged Logged  
  The administrator has disabled public write access.
Go to top Post Reply
Powered by FireBoardget the latest posts directly to your desktop
 
  Latest Blogs   Contact Us   Store   Privacy   About   Promote   Contact
© MyPraize - Christian Social Network and Christian Videos
Created By ETHODE