Create a Photo Gallery
Creating a Photo Gallery is easy, after you have resized the images.You have an original image of about 5482px wide and 3648px high, has a huge file size of 6.57Mb. Both are not manageable on the basis of the image width exceeding the screen with of about1440px and the file size is huge.
If you resize that exact same image to 1280px wide x 853px high, the file size reduces to 3.12Mb and is more manageable.
So to create your gallery, first you need to select your images: Anything from 20 up, but the number must be dividable by four.
If you may decide to title each image. This is all good, you just need to double the table row number.
Say you have 40 images. That represents 10 rows x four images wide in a table with thumbnail support.
Image Resize all the original images to 1280px wide. They all need to be the same width and height. They should also be horizontal. If your have vertical images, they are okay, but must also be divisible by four, to sit in a whole table row. When your resize the larger 1280px images to 200px thumbnails, rename the thumbnail image the original filename, with an 's' at the end, before the file designator .jpg (never after the .jpg), as it will change the file specs and the image won't load.
Next to open Dreamweaver and use your template page.
Insert a table 800px wide, thew number of rows depends on the number of images divided by four, then the table width is four.
Insert individually all your thumbnail images in the order your want them to be in.
All inserted, then hyperlink each image individually to the 1280px larger image.
You may decide to title each image. This is all good, you just need to double the table row numbers.
The example below shows four images with titles. The titles are centered for a balanced design layout.
Sunrise off the Island An orange - golden sunrise Sunrise south of Lighthouse Island Sunrise through the clouds To add rows to the table, you can use the Properties dialogue window in HTML mode or you can use the tab key placed in column four to add a row.
Preview the gallery using the File preview in browser command or function key F12, to see the larger images, just like clicking in Google images. A pop up could appear 'allow blocked content', select 'allow'.
You can also use a Mouseover21 photo gallery - see the link here. The gallery shows the images differently, but requires more image resizing for the main gallery, to fit the screen.
Beginning Visual Design Images Links Pages Creating Page Links Insert Movie Photo Gallery More Design Ideas Home
