Jump to content

Lightbox Trouble!


Recommended Posts



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.



Link to comment
Share on other sites

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">


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<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 {






background-color: #555;

text-align: center;

padding-top: 1px;

padding-bottom: 8px;

vertical-align: middle;



<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" />




<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">


<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>



<script type="text/javascript">

// BeginWebWidget lightbox_gallery


$(function() {

$('#gallery1 a').lightBox();




// EndWebWidget lightbox_gallery


<p style="font-size:18pt; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;"><br />



Link to comment
Share on other sites

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 :P Instead of doing the above steps you can just download & replace the lightbox.css with the one from the author's website:



Good luck :lol:

Edited by BeeDev
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...