Client: Gallery

To display a range of photographs taken by photographer of each shop interior I have created a Gallery. These can be navigated to from 'Wild' and 'Wilder' pages.

I have used inline Javascript to toggleDiv. This fades out the background image and displays a grid of images.

Each image's opacity increases slightly when hovered over and links toLightbox.

The Lightbox version I have used fades outthe background again and allows you to view all images by clicking 'next' and 'prev'.

The images displayed are extracted from the database

and so the client can change the selection of images by removing images and inserting new ones.

Client Project: Menu bar

I have chosen this kind of 'bar style' navigation for wildandwilder.com and I wanted each bar to grow when the mouse hovers over the link.
CSS only allows the bar to be one size when the mouse is hovered over the link (a:hover) and another size when the mouse is off the link (a:link) so I have opted for a Javascript alternative that animates a div's size. I found an example of growing and shrinking a div and by changing a few values and altering the CSS I have managed to create an animated menu using javascript.