Lightbox - 3 Rows with center row not "center justified"

spe1542 · #1 04-11-2008, 06:09 AM

I am having some trouble with Lightbox. Everything went well, until i noticed the center row of pictures on the following site was not center justified:

http://www.joshbensonphotography.com/portraitella.html

As you can see, theres a large gap between the bottom row and middle row, while the top and center and very close together. I checked the Lightbox properties, and both vertical and horizontal are set to center justified. I've tried re-doing the page several times, and have had no luck. Can anyone give me some ideas as to where i should go from here.

Images are .jpg format.

Thanks!

[IMG]file:///C:/DOCUME%7E1/Owner/LOCALS%7E1/Temp/moz-screenshot.jpg[/IMG]

pioneerVicki · #2 04-11-2008, 12:17 PM

Have you tried the option of showing the photo name to see how that looks?

LadyEye · #3 04-11-2008, 12:26 PM

if you tick all thumbnails to be 90 x 90 or 120 x 120 .. as opposed to random, this should correct this issue ..

spe1542 · #4 04-11-2008, 03:16 PM

Thank you for the responses.

I have tried adding the file name and this does nothing. The file name only appears when the lightbox is expanded showing the larger image. I however do not like having any text below them, and would like to keep it this way.

As for changing the size of the images from variable, to something more fixed, this is how it turns out:

http://www.joshbensonphotography.com/portraitella.html

The site is now updated with images in Lightbox set to 180x180. As you can see, the images reduced in size, however the positioning of the middle row is still not centered. I've tried un-checking "maintain aspect ratio", and though it does line all images up, it also distorts the images, as they are not perfect boxes with the same width as height. Here is a copy of the current HTML from the page. Maybe someone who understands it a little more clearly might see something in the programming that is creating this problem:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Portaits - Ella</title>
<body style="background: #666666 url('templatecopy.jpg') no-repeat top center fixed">
<meta name="GENERATOR" content="Created by BlueVoda">
<style type="text/css">
div#container
{
width: 800px;
position: relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
body
{
text-align: center;
margin: 0;
}
</style>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox.js"></script>
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
</head>
<body bgcolor="#666666" text="#000000">
<div id="container">
<img src="templatecopy1.jpg" id="Image1" alt="" align="top" border="0" width="800" height="820" style="position:absolute;left:0px;top:0px;width:80 0px;height:820px;z-index:0">
<div id="bv_" style="position:absolute;left:127px;top:173px;widt h:552px;height:552px;z-index:1" align="left">
<table width="100%" border="0" cellpadding="0" cellspacing="3">
<tr>
<td align="left" valign="top" width="180" height="180"><table border="0" cellpadding="0" cellspacing="0">
<tr><td align="center" valign="center" width="180"><a href="kim&ella2.jpg" rel="lightbox[id1]"><img border="0" alt="" title="" src="kim&ella2.jpg" width="120" height="180"></a></td></tr></table>
</td>
<td align="left" valign="top" width="180" height="180"><table border="0" cellpadding="0" cellspacing="0">
<tr><td align="center" valign="center" width="180"><a href="ella1.jpg" rel="lightbox[id1]"><img border="0" alt="" title="" src="ella1.jpg" width="120" height="180"></a></td></tr></table>
</td>
<td align="left" valign="top" width="180" height="180"><table border="0" cellpadding="0" cellspacing="0">
<tr><td align="center" valign="center" width="180"><a href="ella3.jpg" rel="lightbox[id1]"><img border="0" alt="" title="" src="ella3.jpg" width="120" height="180"></a></td></tr></table>
</td>
</tr>
<tr>
<td align="left" valign="top" width="180" height="180"><table border="0" cellpadding="0" cellspacing="0">
<tr><td align="center" valign="center" width="180"><a href="ella2.jpg" rel="lightbox[id1]"><img border="0" alt="" title="" src="ella2.jpg" width="180" height="120"></a></td></tr></table>
</td>
<td align="left" valign="top" width="180" height="180"><table border="0" cellpadding="0" cellspacing="0">
<tr><td align="center" valign="center" width="180"><a href="ella6.jpg" rel="lightbox[id1]"><img border="0" alt="" title="" src="ella6.jpg" width="180" height="120"></a></td></tr></table>
</td>
<td align="left" valign="top" width="180" height="180"><table border="0" cellpadding="0" cellspacing="0">
<tr><td align="center" valign="center" width="180"><a href="ella7.jpg" rel="lightbox[id1]"><img border="0" alt="" title="" src="ella7.jpg" width="180" height="120"></a></td></tr></table>
</td>
</tr>
<tr>
<td align="left" valign="top" width="180" height="180"><table border="0" cellpadding="0" cellspacing="0">
<tr><td align="center" valign="center" width="180"><a href="kim&ella1.jpg" rel="lightbox[id1]"><img border="0" alt="" title="" src="kim&ella1.jpg" width="120" height="180"></a></td></tr></table>
</td>
<td align="left" valign="top" width="180" height="180"><table border="0" cellpadding="0" cellspacing="0">
<tr><td align="center" valign="center" width="180"><a href="ella4.jpg" rel="lightbox[id1]"><img border="0" alt="" title="" src="ella4.jpg" width="120" height="180"></a></td></tr></table>
</td>
<td align="left" valign="top" width="180" height="180"><table border="0" cellpadding="0" cellspacing="0">
<tr><td align="center" valign="center" width="180"><a href="ella5.jpg" rel="lightbox[id1]"><img border="0" alt="" title="" src="ella5.jpg" width="120" height="180"></a></td></tr></table>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>

spe1542 · #5 04-11-2008, 03:27 PM

here is a screen shot of what everything in bluevoda looks like when settings are set to both vertical and horizontally centered along with another screen shot of the actual settings:

http://www.joshbensonphotography.com/screenshot.html

As i adjust the settings to either have them top justified or bottom justified, they move with this in bluevoda, but stay top justified when previewing and publishing the page. Any thoughts?

CarbonTerry · #6 04-11-2008, 04:26 PM

Use an additional LightBox and place it where it will align as you need it.

spe1542 · #7 04-11-2008, 06:21 PM

So what you're saying is to make multiple lightboxes on one page, when all that's needed is one? Seems ridiculous that i'm having to do more work, when the program should take care of it all for me. Little counter-productive if you ask me...

CarbonTerry · #8 04-11-2008, 06:29 PM

Just a suggestion to get past your problem. The choice is yours. I volunteer my time and have nothing to do with BV or the software.

spe1542 · #9 04-11-2008, 09:01 PM

Sorry, didn't mean to come off harsh. I appreciate your feedback. I'm just hoping to resolve this problem with an efficient solution, especially if i'm having to upload photos on a regular basis. It'd be nice to do it all at once, rather then generating 3 seperate lightboxes per page.

Collectors-info · #10 04-12-2008, 05:27 AM

Hi, go to the properties & as Lady eye mentioned, set to 120 x 120, but also un-check the maintain aspect box. It will distort the images a bit, but you cant do anything about this when using 2 different aspects.
With light box, you can also type in your own thumbnail size if you wish in the Thumbnail size field. IE: 300x200

zuriatman · #11 04-14-2008, 04:49 PM

Hi,
Use the pix resizer and resize all your photos to one height and leave the width free. It will make the thumbs look more even.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)