Table Graphics and Clients Images

As a group we have discussed, how we are going to display the client’s images on our background tables. We can up with several ideas:

1. Have several images, on the table and then have the rest in boxes underneath the table to show the rest.
2. The next was to have a categories table underneath, that when you click on a category, such as colour, then the images of the category would appear on the table. And when you clicked on a different category, then the images of that category would appear and the others would disappear. Then as you hover the images on the table they would grow and have a lightbox affect on them.
3. The other idea that I had was to have a CSS scroller underneath the table to display all of the images, and then on the background table have a few images defining the category. The customer looking at the site would then be able to scroll through the images and select the one they want.

As a collective group we have decided to go with idea, two, and have the table with a few images on the background table and then have a categories table underneath with the different categories, such as: colour, design, size.

When you hover then image on the background table then there would be a lightbox affect that appears around the image and increases the size of the image to give customers a better look.

We will achieve this affect by:

- content DIV
- lightbox DIV
- background_table DIV
- table_image DIV

Having the content DIV, with the lightbox DIV, this is set to display none and has a background of transparent black. This then has a DIV in it which is the background table, and the client’s images will be put into UL (unordered list).

The images on the table will be set to a size percentage and then on hover the lightbox DIV display will be set to true showing it, and the client’s image percentage will increased in size and will be wrapped by the lightbox DIV.

We will get the background or the lightbox DIV by, creating a small Photoshop file with a fill of black with a opacity of 40% and then save this file as a .png which supports the transparency and then this will be repeated through CSS to cover the whole DIV

Lightbox {
Background: url(../images/ lightbox_bg.png) repeat-x;
Width: 000px ;
Padding: 0px 0px 0px 0px;
Margin: 0px 0px 0px 0px;
}