HTML Image Sliding Gallery
This is a cool small image gallery that can be added to a page to show a small number (about 5-10) of photos without taking up a lot of space in the page.
You will need to know some html to use this, if you do not think you can do it, please submit a Graphic Request Form to have it done for you.
Directions:
- You will need to choose your images and resize them to the appropriate size as listed below. You can download this Photoshop file to help you with the size and to put the 1 pixel inner white line on the images. It's not needed, but maintains the design.
- Image size: 320 pixels wide by 240 pixels tall.
- Image size: 320 pixels wide by 240 pixels tall.
- Save your images as .JPG files with the names gal0.jpg, gal1.jpg, gal2.jpg......etc.
- Upload your images in Collage to your local images folder, the images folder must be in the same folder as the document you are adding the slideshow to, or you will have to change the links. If you don't have an images folder create one called "images" of the "images_fldr" type.
- Add the following code into your page, if you are using the Collage Internal Editor (as opposed to Dreamweaver) you will need to switch to the source code view and paste the code into the page where you want it to appear. You may want to add the slideshow code into a 1 colum, 1 row table to make it easier to move it around. You MUST have access to the source code view to do this, you cannot paste the code into the "edit mode." (If you don't have source code view, gather your images and fill out the Graphic Request Form) You can add or subtract the number of photos by adding or removing the list entries in the code, just number them higher as you add them.
- Now, when you go to preview mode the gallery should load your images and work, if not, check that you have uploaded the images properly with the right filenames. All of the animation and styling is handled by CSS styles in the master stylesheets for the entire site.
code:
<ul id="galleryslide">
<li><a href="#nogo">
<img src="images/gal0.jpg" alt="#1" width="320" height="240" title="#1" /></a></li>
<li><a href="#nogo">
<img src="images/gal1.jpg" alt="#2" width="320" height="240" title="#2" /></a></li>
<li><a href="#nogo">
<img src="images/gal2.jpg" alt="#3" width="320" height="240" title="#3" /></a></li>
<li><a href="#nogo">
<img src="images/gal3.jpg" alt="#4" width="320" height="240" title="#4" /></a></li>
<li><a href="#nogo">
<img src="images/gal4.jpg" alt="#5" width="320" height="240" title="#5" /></a></li>
<li><a href="#nogo">
<img src="images/gal5.jpg" alt="#6" width="320" height="240" title="#6" /></a></li>
<li><a href="#nogo">
<img src="images/gal6.jpg" alt="#7" width="320" height="240" title="#7" /></a></li>
</ul>