How to build unusual photo gallery thumbnail grid

Hello all,

I’m attempting to build an unconventional thumbnail grid for a photo gallery.

See the layout here. http://oadesign.net/echodesign/gallerytest.jpg

Rather and reinvent the wheel, I wanted to see if anyone has done something similar before or had any suggestions or tips on how to implement such a thing.

My first though was (dare I say it?) nested tables. But then I thought that I could do much better. Maybe a system of nested DIVs? Or should I go old school and just create and img map?

Any suggestions will be greatly appreciated. :slight_smile:

I also wanted to be clear that I’m not looking for some one to code this thing for me… Although it would be nice gesture :wink:

At best just some practical theory and maybe a snippet of code?

I was thinking a series of nested divs absolutely positioned.

So for example: a wrapper div set to position:relative with a set height and width.

Then take each nested div and set position:absolute. Rinse and repeat until I get the desired look.

I also had the idea to take each thumb image and set display:block so that I may add margins and absolute positioning.

Hi,

Assuming the blocks are matching heights as shown in your diagram then just float them into position.

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.wrap {
    width:290px;
    margin:auto;
}
.box1 {
    width:88px;
    height:88px;
    border:1px solid #000;
}
.box2 {
    width:188px;
    height:88px;
    border:1px solid #000;
}
.box3 {
    width:88px;
    height:188px;
    border:1px solid #000;
}
.boxleft {
    float:left;
    width:190px;
}
.boxright {
    float:right;
    width:90px;
}
.fl {
    float:left;
    margin:0 10px 10px 0;
    display:inline;
}
.fr {
    float:right;
    margin:0 0 10px;
    display:inline;
}
.fn {
    float:none;
    margin:0 0 10px;
    display:block;
}
</style>
</head>
<body>
<div class="wrap">
    <p class="box1 fl">1</p>
    <p class="box2 fr">2</p>
    <div class="boxleft">
        <p class="box2 fn">3</p>
        <div class="fl">
            <p class="box1 fn">5</p>
            <p class="box1 fn">7</p>
        </div>
        <p class="box3 fr">6</p>
    </div>
    <div class="boxright">
        <p class="box3 fn">4</p>
        <p class="box1 fn">8</p>
    </div>
</div>
</body>
</html>



That’s basically how I’d do it anyway :slight_smile:

You could put your images inside those p elements to keep things tidy but you could apply the styling direct to the images themselves.

Um yeah…

Thanks! that is the solution. Your a hero today! I really appreciate it.

Where is your paypal /donate button? I’d like to buy you a cold one.

Thank you sir!

Glad it helped :slight_smile: No need for a donation, just glad to help when I can.