How to Create an Image Gallery

home | previous 

What is an image gallery?|
Preparing the images|
Reducing the physical size of an image |
Reducing the file size of an image |
Applying the code 


I: What is a image gallery ?

  1. Link to an example of a picture gallery.

  2. In this example of an image gallery, the user clicks on either the next or previous button in order to cycle through a series of images.

  3. The effect of cycling through the series of images is created by swapping through a list of images using JavaScript.

  4. The images must all have the same width and height.

  5. The first image in this example is the image titled gallery.gif which is the title "Page Designs".

  6. This effect can be positioned anywhere on the page. The default setting is upper left. The positioning is set by the placement of the table alignment. The buttons are positioned by the paragraph alignment.


    7.




II: Preparing the images for the gallery

  1. Each image must have the same width and height dimensions.

  2. If an image is smaller, it can be placed with a background the same color as the background color of the page so that the background has the same dimensions as the other images.

  3. The title image "Page Designs" is just some text created in Photoshop that is placed on a background where the dimensions are the same as the other images.

  4. These images were originally web pages that were designed for clients. I designed the pages in Photoshop using the safe working dimensions of 760 wide by 420 high for the original design of each page.

  5. Each image was reduced to 400 by 221, which is a proportional reduction of the original size. I knew that 400 wide would fit nicely on a page and be big enough to see without dealing with a heavy file size. (Remember the browser must load an images each time the button is clicked. In this case there are 9 images that are each 400 by 221.)





III: Reducing the Physical Size of the Image

  1. Open Photoshop. Go to File > Browse and navigate through the File Browser to the designated folder.

  2. Go to the Image menu at the top of the screen. Select Image Size from the drop down menu. This will open the dialog box.

  3. Under Pixel Dimensions you will find the physical size of the image in pixels (picture element" are units of measurement based on a single dot of color on a monitor.)

  4. Remember that no image should require scrolling.

  5. Make sure that Constrained Proportions is checked.

  6. Make sure that the resolution is set to 72 ppi( pixels per inch).

  7. When Photoshop reduces an image it tends to become blurred. To fix this: go to Filters > Sharpen > Unsharp Mask. This sharpens the image slightly.




IV: Reducing the File Size of the Image:

  1. Go to File > Save for Web. This opens a dialog page. Select the 2-up Tab at the top of the screen. This give you a view of the original image and a view of what the image will look like when it is compressed.

  2. The aim is to compress the image as much as possible while at the same time generating as little distortion to the image as possible.

  3. In the right side of the screen select Settings. If the image is a drawing with solid colors or line art select GIF. If the image is a photograph select JPEG. (Note: This is not always the case but it is a good generality.)

  4. Look at the original image and look at the compressed image. The file size is at the bottom left corner of each version. The original is can be several hundred kilobytes and the compressed image can be from 1 to 20 kilobytes.

  5. The total file size for a page (especially the first page) of a Web site should be from 40 - 60 k. This included all text and images.

  6. To fine tune the compression of the image adjust the numerical value under Optimized on the right side of the screen. You can also adjust the high, medium and low options under Settings.

  7. If you are using GIF compression and the image has a limited number of solid colors or is a black and white image, Reduce the number of colors from 256 to as low as 64.

  8. If the image is a line drawing or consists entirely of solid colors and you are using the GIF format, go to the Diffusion option and select No Dither from the drop down menu.

  9. When you are satisfied with the quality of the image and the reduction of the file size then Click OK. The prompt window will ask you where to save the image and what to name it. The file extension is already determined by what compression you initially selected. Name the file and save it directly into the images folder of your Web site directory.




V: Applying the Javascript Code

  1. Below is the JavaScript code for the image gallery

    2. <html>
    <head>
    <title>Image Slideshow</title>
    <script language=JAVASCRIPT type="TEXT/JAVASCRIPT">
    <!-- Hide script from old browsers
    myPix = new Array("image/gallery.gif","image/scythian.jpg","image/spinboutique.jpg",
    "image/curriculum.jpg","image/nature_tram.jpg","image/dragonmaker.jpg", "image/admissions.jpg","image/communications.jpg","image/contact_dragmkr.jpg")
    thisPic = 0
    imgCt = myPix.length - 1

    function chgSlide(direction) {
    if (document.images) {
    thisPic = thisPic + direction
    if (thisPic > imgCt) {
    thisPic = 0
    }
    if (thisPic < 0) {
    thisPic = imgCt
    }
    document.myPicture.src=myPix[thisPic]
    }
    }

    // End hiding script from old browsers -->
    </script>
    </head>

    <body bgcolor=black>
    <table align="center">
    <tr>
    <td>
    <p ><img src="image/gallery.gif" name="myPicture" width=400 height=221></p>
    <p align="center"><a href="javascript:chgSlide(-1)">&lt;&lt; Previous</a>&nbsp;&nbsp;<a href="javascript:chgSlide(1)">Next &gt;&gt;</a></p>
    </td>
    </tr>
    </table>

    </body>
    </html>

  2. The JavaScript appears in two places , the <head> portion and the <body> portion of the page.

  3. The <head> portion of the script sets up an array (list) of the images. What is great about this script is that you can keep adding images to the array without having to redo the script. The position of the images in the array determines when the image loads. The second image in the array is "image/scythian.jpg". It is the second image that loads after the user clicks the "Next" button.

  4. The <head> portion of the script also sets up the function chgSlid(direction).

  5. The <body> portion of the script also calls the function chgSlid(direction) when the user clicks either the Next or Previous buttons.

  6. click on the Link to copy the code.



Copyright © 2006, Christalene Loren. All rights Reserved.