amandawhite.ajw Posted May 17, 2010 Report Share Posted May 17, 2010 Hi, I am new to dreamweaver and I am having trouble with the lightbox I am using on my site. I am using the "lightbox gallery" that I found on Adobe Exchange (http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1744525). It is easier for me to show you what is happening instead of explaining the problem, here is the link to my site http://www.guyveeboxing.com/gallery.html. I did not change any of the settings for the light box except to center it on the site, but when you click on an image, something is definitely wrong. If anyone could help me out with this I would greatly appreciate it! I can post up any coding needed. THANKS! Quote Link to comment Share on other sites More sharing options...
virtual Posted May 17, 2010 Report Share Posted May 17, 2010 The link to your site doesn't work Quote Link to comment Share on other sites More sharing options...
amandawhite.ajw Posted May 17, 2010 Author Report Share Posted May 17, 2010 Thanks Lynne. I just saw that. I am trying to fix that as we speak! Quote Link to comment Share on other sites More sharing options...
amandawhite.ajw Posted May 17, 2010 Author Report Share Posted May 17, 2010 The link is working again! Thanks for your patience. Quote Link to comment Share on other sites More sharing options...
asdfghjkl Posted May 18, 2010 Report Share Posted May 18, 2010 May be your coding mistake. You post it. Quote Link to comment Share on other sites More sharing options...
amandawhite.ajw Posted May 18, 2010 Author Report Share Posted May 18, 2010 Source Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>GALLERY</title> <link href="Guy Vee.css" rel="stylesheet" type="text/css" /> <style type="text/css"> a:link { color: #EEE; text-decoration: none; } a:visited { color: #FFF; } a:hover { text-decoration: none; color: #c02f1c; } a:active { text-decoration: none; color: #EEE; } #apDiv4 { left:25px; top:3px; width:100%; height:65px; z-index:2; background-color: #555; text-align: center; padding-top: 1px; padding-bottom: 8px; vertical-align: middle; } </style> <script src="scripts/jquery.js" type="text/javascript"></script> <script src="scripts/lightbox.js" type="text/javascript"></script> <link href="css/lightbox.css" rel="stylesheet" type="text/css" /> <link href="css/sample_lightbox_layout.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="apDiv4"><p id="apDiv3" style="font-size:18pt; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;"><!-- #BeginLibraryItem "/Library/nav.lbi" --><a href="Index.html">HOME</a> <a href="About.html">ABOUT</a> <a href="gallery.html">GALLERY</a> <a href="pricing.html">PRICING </a> <a href="schedule.html">SCHEDULE</a> <a href="contact.html">CONTACT</a><!-- #EndLibraryItem --></div><br /> <p style="font-size:18pt; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;"> <div id="gallery1" class="lbGallery"> <ul> <li> <a href="In The Ring.jpg" title=""> <img src="in_the_ring_SM.jpg" width="72" height="72" alt="" /> </a> </li> <li> <a href="Kids_1.jpg" title=""> <img src="Kids_1_SM.jpg" width="72" height="72" alt="" /> </a> </li> <li> <a href="Kids_2.jpg" title=""> <img src="Kids_2_SM.jpg" width="72" height="72" alt="" /> </a> </li> <li> <a href="Kids_3.jpg" title=""> <img src="Kids_3_SM.jpg" width="72" height="72" alt="" /> </a> </li> <li> <a href="Workout_1.jpg" title=""> <img src="Workout_1_SM.jpg" width="72" height="72" alt="" /> </a> </li> <li> <a href="Workout_2.jpg" title=""> <img src="Workout_2_SM.jpg" width="72" height="72" alt="" /> </a> </li> <li> <a href="Workout_3.jpg" title=""> <img src="Workout_3_SM.jpg" width="72" height="72" alt="" /> </a> </li> <li> <a href="Workout_4.jpg" title=""> <img src="Workout_4_SM.jpg" width="72" height="72" alt="" /> </a> </li> <li> <a href="Workout_5.jpg" title=""> <img src="Workout_5_SM.jpg" width="72" height="72" alt="" /> </a> </li> <li> <a href="Equipment.jpg" title=""> <img src="Equipment_SM.jpg" width="72" height="72" alt="" /> </a> </li> <li> <a href="Speedbag.jpg" title=""> <img src="Speedbag_SM.jpg" width="72" height="72" alt="" /> </a> </li> </ul> </div> <script type="text/javascript"> // BeginWebWidget lightbox_gallery $(function() { $('#gallery1 a').lightBox(); }); // EndWebWidget lightbox_gallery </script> <p style="font-size:18pt; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;"><br /> </body> </html> Quote Link to comment Share on other sites More sharing options...
BeeDev Posted May 18, 2010 Report Share Posted May 18, 2010 (edited) There's something very wrong with the Lightbox.css Here's what you need to do: 1) Open css/lightbox.css 2) Go to Line 14 and on the declaration "#jquery-overlay" add property: position: absolute; 3) Go to Line 21 and on the declaration "#jquery-lightbox" add property: position: absolute; z-index: 5000; 4) Go to line 29 and on the declaration "#lightbox-container-image-box" add property: margin: 0 auto; This makes it closer to what it should be, the only gimmick being the next & previous buttons are outside the image-box. In my opinion, don't use the adobe stuff Instead of doing the above steps you can just download & replace the lightbox.css with the one from the author's website: http://leandrovieira.com/projects/jquery/lightbox/ Good luck Edited May 18, 2010 by BeeDev Quote Link to comment Share on other sites More sharing options...
falkencreative Posted May 18, 2010 Report Share Posted May 18, 2010 You do have unnecessary/unclosed "<p style="font-size:18pt; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;">" tags in your code, but that itself isn't the source of your problem. Like BeeDev said above, it has to do with your stylesheet somehow... I'd suggest probably going back to the original Adobe link and re-download the lightbox stylesheet. Quote Link to comment Share on other sites More sharing options...
amandawhite.ajw Posted May 18, 2010 Author Report Share Posted May 18, 2010 Thanks to all! Quote Link to comment Share on other sites More sharing options...
amandawhite.ajw Posted May 18, 2010 Author Report Share Posted May 18, 2010 Here is the final product! Thanks for your help. http://www.guyveeboxing.com/Index.html Any feedback on the formating of the schedule/pricing pages would be appreciated. When I viewed it on the PC I have at my house, the formating was off! (Format is good on my mac) All the best! Amanda Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.