PDA

View Full Version : Confuse with layout and photo gallery


Chapo
01-15-2009, 02:13 AM
Ok, maybe its a newbie question.... i want to create a photo gallery with lightbox in every photo-icon. The trick is how to build it in a dynamic way. I have 30 photos in the layout, about 5 per row. I want that row to be more or less photos depending on the browser. If you expand it, you could have more than 5 photos in that row, if you contract the browser it could go down to 3 or 4 photos per row. Here is a perfect example of what i want, go to the gallery to see what i'm talking about:
http://www.armadiclosets.com/

Are those photo-icons inside of a table ?
Are they floating ?
How can i build that photo-icon gallery with the lightbox ?

Cary
01-15-2009, 03:26 AM
They are just a bunch if images within the same div. Styling gives them their spacing, and their positions reflow as the div narrows or widens with the width of the browser.

This is using PopBox (http://www.c6software.com/Products/PopBox/). Lightbox (http://www.huddletogether.com/projects/lightbox2/) has the advantage of making the large images accessible even if javascript is turned off. Its site has the instructions for using it with thumbnail links.

Chapo
01-15-2009, 03:42 AM
So there is no need to add a table inside the DIV for the images ?
CSS takes care of the spacing and positions ?

Cary
01-15-2009, 04:02 AM
In the case of the gallery you pointed to, yes.

Chapo
01-15-2009, 11:27 PM
Cary.... the yes is for adding a table inside the DIV or yes that CSS takes care of positioning and spacing ? Sorry my dumbness

Cary
01-16-2009, 05:44 AM
No problem. This is sample html for a bunch of thumbnail image links:

<div id="gallery">
<a href="images/1.jpg"><img src="images/s1.jpg" width="125" height="105" alt=""></a>
<a href="images/2.jpg"><img src="images/s2.jpg" width="125" height="105" alt=""></a>
<a href="images/3.jpg"><img src="images/s3.jpg" width="125" height="105" alt=""></a>
<a href="images/4.jpg"><img src="images/s4.jpg" width="125" height="105" alt=""></a>
<a href="images/5.jpg"><img src="images/s5.jpg" width="125" height="105" alt=""></a>
<a href="images/6.jpg"><img src="images/s6.jpg" width="125" height="105" alt=""></a>
<a href="images/7.jpg"><img src="images/s7.jpg" width="125" height="105" alt=""></a>
<a href="images/8.jpg"><img src="images/s8.jpg" width="125" height="105" alt=""></a>
<a href="images/9.jpg"><img src="images/s9.jpg" width="125" height="105" alt=""></a>
<a href="images/10.jpg"><img src="images/s10.jpg" width="125" height="105" alt=""></a>
<a href="images/11.jpg"><img src="images/s11.jpg" width="125" height="105" alt=""></a>
<a href="images/12.jpg"><img src="images/s12.jpg" width="125" height="105" alt=""></a>
</div>

That code by itself will give you a "table" of image links where the number of images per row varies with the width of the browser.

To center the images within their rows and remove the link borders you could use styling like this:

#gallery {
text-align:center;
}
#gallery a img {
border:none;
}

In the case of the galleries you linked to, they basically used this styling for the images:

#gallery a img {
border:1px solid #ccc;
margin: 7px;
}

Chapo
01-17-2009, 02:54 AM
Thanx Cary... ill give it a try