- Login to your tools page and create a new folder that will contain your slide show images. This folder must be directly within your tools page (i.e. it cannot be a subfolder of another folder).
- Upload your images to the folder. The images do not have to be the same type or size, so it is fine if you want to have a 1000×500 JPG, 200×400 GIF , and a 250×250 PNG all in the same show.
- Add a Slide Show Custom Element (listed under the Custom Elements) to a CommonSpot page.
- Use the “Click here to define custom element data” link.
- Fill in the appropriate boxes in the form.
- Show Name is the display name that will appear on the page. Required.
- Image Folder is the name of the folder that contains your slide show images. Required.
- Description is free space to put whatever information you want. This will appear above the thumbnails of your slides. Optional.
- Advance Photos Automatically. If checked, then the slides will change automatically, though the user will still be allowed to pause the show as well as move forward or back manually.
- Duration is the number of second to pause between slides if the “Advance Photos Automatically” option is picked.
- Click Finish.
At any time you can delete or add photos to your image folder. If you add photos, be sure to view the page on author to generate thumbnails for the new images. If you delete photos, you probably also want to delete the associated thumbnails, though this is not strictly necessary.
The order in which the images appear is alphabetical based on the file names, so you can determine the order of the images by renaming the files.
Another option to enhance your slide show is to have each slide have individual text associated with it. For example, the sample show linked to above has a short paragraph describing each note.
To do this, go to your tools page. You should have a link named “Slide Show Text Editor”. Click that.
When you submit the form, it will create a text file in your image directory named “content.ini” that the show will use to include your text. Do not delete this file from your tools page unless you want to remove your text from the slide show.
Lastly, the element has applied CSS classes to many of the elements so that you can add some custom styles by including a style sheet if you wish:
- The entire element is contained in a div with a class named “slideShowDiv”.
- The show title has a class named “slideShowTitle”.
- The show description has a class named “slideShowDescription”.
- The photos are contained in a div with a class named “slideShowPhotosContainer”.
I hope that this element will be useful. As always, if you have any questions or suggestions, please let me know.