Web workshop three.

A single image displayed is called a static image. 

Lightbox

Once you've downloaded lightbox these are the files you need to drag across from the lightbox download to our website folder. 

In the 'how to use' section on the lightbox website you need to copy the code across, the code needs to be copied into the 'head' on the template. 

Paste the next code from the website into the head below the first. 

In photoshop you set up your image you'd like to place on your website and then create a thumbnail of it to using the box crop tool. You can determine the size of this in the settings area above. 

You then take the next bit of code off the lightbox website and pasted this in the area show above on the page you would like it to be on for example 'about'. 

When you've copied the code you need to make it relevent to your own image so type the title of your image in the first blue set of text and where it says 'my caption' you can type in any text you'd like under your image if any at all. 

Once you've done this and saved it then previewed it, you should get this on the page you've applied it!

You then insert an image in the end bit of the code and the thumbnail should show up when you preview it in the browser. 

To add more images and thumbnails just copy and paste the first code from your first image and then make the changes so each code has different content and will show a different image. 

This is what it should look like now. 

So that you can choose the left and right arrows on the images you have to give them a group name in square brackets where it says 'lightbox'. 

Another website similar to lightbox is flexslider, it works in a similar way but slides your images to one side. There are various different options for how this works depending on what you're working with and how you'd like it to look. 

With lightbox if you click on 'lightbox.css' in dreamweaver you can alter the colours and fonts etc to suit the style of the website you are designing.