TTUHSC Information Technology
HomeInformation TechnologyInformation ServicesIS TrainingOU Campus CMSEditing Content

Snippet Examples

Caption Slider Snippet


There are several steps in order to make the slideshow snippet work on a web page such as creating a new scripts folder, uploading images and creating a customized java script file (fadeshow1.js).

  1. Create a scripts folder in your website in OU Campus by choosing New>>New Folder in the interface.
  2. Create the java script file (fadeshow1.js) from using one of the two options listed below.
    1. Click on the link and do a File>>Save As>>fadeshow1.js in your browser.  (The file should default to the .js extension during the Save As process.)
    2. Click on the link, copy the text, paste into Notepad and Save As fadeshow1.js.
  3. Upload the file into the scripts folder that was created in step 1.
  4. (optional) Create a slideshow sub-folder in the images folder of your website in OU Campus. (The images can actually be uploaded to the images folder without creating a new sub-folder.)
  5. Upload the web-ready images into the images folder or slideshow sub-folder. In order for the slideshow to be uniform, all images should be the same size. The snippet images are 700 x 300. If you want a smaller slideshow be sure and adjust the width and height in the java script file, (fadeshow1.js) to the same size as your images.
  6. Customize the java script file (fadeshow1.js) by adding your image URL's, captions, size, speed etc. Links can also be added by putting the URL in the second set of double quotes in the javascript file. The fields for the image array are as follows:
    ["path_to_image", "optional_url", "optional_linktarget", "optional_description"]
  7. Insert the snippet into your page by placing the cursor where the slideshow will be located and insert the snippet (Javascript Slider with Captions) using the Insert Snippet widget in the WYSIWYG editor.
  8. Publish both the java script file (fadeshow1.js) and the page containing the snippet.

Depending on where your scripts and images (slideshow) folders are located, you may need to change the javascript files. If this needs to be changed, it will have to be done using the HTML widget in the WYSIWYG editor.

If you have any questions about using this snippet please contact Information Services by email at