Jump to content
Killersites Community
amandawhite.ajw

Lightbox Trouble!

Recommended Posts

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!

Share this post


Link to post
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">

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

Share this post


Link to post
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:

http://leandrovieira.com/projects/jquery/lightbox/

 

Good luck :lol:

Edited by BeeDev

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×