SOFTWARE - Web session 3

Today's session is all about adding content like Image galleries and text. This is going to be the trickiest session yet and Simon is going to be taking it at our pace in order to learn how to do it all properly.

Last session we created a template DWT which is what you would do before creating the rest of your website. For our learning benefit we created our index html first and then converted it to a template DWT.

Possible content for websites:

- images
- text
- video
- audio
- animated gifs
- forms and fields (for users to enter text and information. These work with another scripting language)
- maps (on the contact page for example)

Last week we added an image to our website. The image is just a static image, it doesn't move or change, it's the size you want it and thats it.

You can download scripts and html code from the internet. It's best to go for the free ones as they are more editable than the ones you have to pay for which could have water marks.


Downloading lightbox.

The lightbox download gives you css, html and js (javascript).

Drag and drop the js folder into your root folder.

In the css folder there are 2 style sheets - lightbox and screen - these determine the look of lightbox on your website.

In the images folder it gives you the closedown button and the next and previous buttons. These can be edited and tailored to the look of your website.

How to use lightbox.

Copy and pasting the jquery scripts into the write place.

Make sure you fin the head tag and paste the script inside it. The easiest way is the find the head close tag because then you'll know you've pasted it inside the head tags.

We also need to include the css script, which we past in the same fashion.

Then you save the template file.

adding and image. First get your image and change the image size to the required size. Preferably not any bigger than your website. And save it as a jpeg to the quality you want (see last weeks session).

Then we need to create a thumbnail. This can simply be done by cropping the image then saving it as the same name as your other image file then writing 'thumb' after it.

Whenever you have some code in green it signifies that its a link to something else. Useful note.

The next step is to activate the lightbox with the next bit of script.

Once you've copied and pasted it into the editdable region you want to have the image you can change the content of the script. Such as, the image file, the thumbnail and weather or not you want to have a caption with your image.

You can also customise ever single way lightbox works. You can get rid of the white border, stop it from greying out the background and so on.

Adding the thumbnail image.

You can add more images and thumbnails simply by copying and pasting the same line of script and then changing the name on the images. This is where its made easier if you've named your images 'image1, image 2, image 3' and so on.

Grouping thumbnails together.

Slimbox and Fancybox are both free gallery scripts that you can use to include video on your website.

Flexslider is another image gallery that can let you scroll through your images directly on your website and it comes with 6 different ways of functioning.