Lightbox Slide Show Element Tutorial

Share

Today’s tutorial is about the new Slide Show custom element.  This element lets you quickly and easily make a JavaScript lightbox slide show, like the one here: http://www.ecu.edu/cs-training/hallwa/Emirati-Money.cfm (opens in a new window). To make a slideshow like this, just follow these few steps:

  1. 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).
  2. 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.
  3. Add a Slide Show Custom Element (listed under the Custom Elements) to a CommonSpot page.
  4. Use the “Click here to define custom element data” link.
  5. Fill in the appropriate boxes in the form.
    1. Show Name is the display name that will appear on the page. Required.
    2. Image Folder is the name of the folder that contains your slide show images. Required.
    3. Description is free space to put whatever information you want.  This will appear above the thumbnails of your slides.  Optional.
    4. 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.
    5. Duration is the number of second to pause between slides if the “Advance Photos Automatically” option is picked.
  6. Click Finish.

ss_sc_01

The element will automatically create 60 pixel high thumbnails for you and write all the CSS and JavaScript to render the slide show.  The thumbnails are located in a subfolder of your image folder named “tn”, so do not delete this folder or the images within without reason.

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.

ss_sc_02

A pull down will appear with a list of all the folder sin your tools page.  Pick the folder that contains your images.  The page will create a web form, load the images and give you a text box next to each.  Enter the text to accompany each image. (If you have already created text for your show, then the boxes should contain that text so that you can edit it).  Simple HTML for formatting is ok (BR, HR, STRONG, EM, etc) but more advanced  tags like links or styles can break the JavaScript that displays your show.

ss_sc_03

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.

One thought on “Lightbox Slide Show Element Tutorial

  1. Pingback: Tech Tips » Tutorial Tuesday – Use CommonSpot to Make a Slide Show

Leave a Reply