Image gallery
- Download lightbox, copy the JS and CSS in to root folder (but don't replace images folder, put files in existing ones - also can combine css sheets with existing one)
- Activate lightbox on template page, before the closed head tag
- Open up your image in photoshop, need to create two images
- Image -> Image size -> 72 ppi -> Re-size image as smaller file size so the page is quick to load -> Save for web
- Now need to create the thumb nail lightbox will use to show the images (100x100px)
- Use the marquee tool and change style to fixed size and choose area of the image to have as a thumbnail
- Then crop and save as thumbnail for web
- Back to dreamweaver, open the html document you want this lightbox to be on, go the editable region
- Paste the link code in to this region
- Title is for caption under large image
- Click on link :
- Lightbox css stylesheet can be edited to change the settings of how it looks, e.g. changing overlay colour, delete borders, change opacity etc...
- Title is for caption under large image
- Click on link :
- Can customise aspects of how lightbox works rather than sticking with default - e.g. change the close and left and right buttons
- Place the thumbnail in the link
- To get them all to work as a set, give all the images a group name in this tag, and you will see you can use the arrows to get through.
- Variations of lightbox (for example if you want to use video in this context) include: slimbox. fancybox.
- Lightbox css stylesheet can be edited to change the settings of how it looks, e.g. changing overlay colour, delete borders, change opacity etc...
- Starting to look a bit more like a website ...
***************
Image slideshow
