Tag Archives: JavaScript

Tuesday Tutorial: Rotating Images with the Cycle Element

5 Replies
Share

The newest Custom Element is Cycle Images.  This element uses the Jquery Cycle plugin to create a rotating images effect.  The element has 12 different transition effects.  Several examples of the effects that this element can perform can be seen here: http://www.ecu.edu/cs-training/hallwa/Rotating-Images.cfm.

To use the element, you just need a collection of identically sized images.  The element takes all those images, lets you specify a duration and effect and then creates all the JavaScript and HTML for you.

First, log into your tools page and create a new folder.  For this example, I named my folder rotatingImages.  Then upload as many identically sized images as you want into that folder.  The images can be different types (jpegs, gifs and pngs are all allowed) but for the element to display the images properly, they must all be the same size.  For my examples, I used images 770 pixels wide and 170 high.

Next, add a Cycle Images Custom Element (listed under Custom Elements) to your page.  Then click the “Click here to define the custom element data” link.  A popup window will launch.  Fill in the appropriate fields, like so:

  • Image Directory – the folder name where you uploaded the file.  Required.
  • Time to display – the the length of time in seconds to display each image before the transition effect takes place.  Required.  Must be a number, and  decimals are valid, so you can put 3.5 to display each image for three and a half seconds.
  • Change Duration – The length of time in seconds that the transition should take.  Required.  Must be a number, decimals are valid.  In my opinion, all the effects except the Fade effect look best with short (i.e. less than one second) durations.  The fade effect looks very nice with relatively long (5 seconds or more) durations.
  • Transition Effect – the visual effect that you want as the images change.  The option are:
    • Fade – The current image fades out and the next image fades in at the same time.
    • Cover – The current image remains in place and the next image moves in from the left to cover it.
    • ScrollDown – The current image moves down and at the same time the next image moves down to replace it.
    • ScrollUp – The same as ScrollDown but upward instead of downward.
    • ScrollLeft – The same as ScrollDown but the direction is to the left.
    • ScrollRight – The same as ScrollDown but the direction is to the right.
    • SlideX – The current image appears to fold in to the left and the next image folds out to the right.
    • Turndown – Simulates somewhat the effect of turning a photocube downward.
    • CurtainY – The current image folds in toward the middle and the next folds out from the middle.
    • Wipe – The current image remains in place and the next image is revealed from the top left diagonally to the bottom right.
    • Toss – The current image moves off screen to the right, revealing the next image beneath.
    • Shuffle – The current image moves off to the left and then moves behind the next image.
  • Height – The height of the images in pixels.  Required.
  • Width – The width of the images in pixels.  Required.
  • Margin – The CSS margin desired for the element.  Optional, by default is set to 0.  When using the element as a replacement for the header image, then 0 is what you want.  If you are using the element anywhere else on a page and want to have the image use all the width of the page, you need to set this to -10 (negative 10) to compensate for the inherited properties.

cycledImages

Two final caveats:

  1. If you try to put two of these on a page, only the first will work.  This is because the JavaScript works by identifying the element by its id, and these must be unique.
  2. If you copy a page that this element is on, then if you change anything in this element, it will be changed on both pages, since those pages will be sharing one instance of the element.  You can copy the page and then remove the element and add a new one however to prevent this from happening.

As always, if you have questions, comments or suggestions, please let me know.  And be sure to check out the ITCS Learning Center for lots more information about how to use CommonSpot more effectively.

Tuesday Tutorial: Multiple Tab Element

2 Replies
Share

Today’s post is about the relatively new  Tabbed Interface Element.  This element let’s you easily make a multiple tab display on any of your CommonSpot pages.  An example of the element can be seen here: http://www.ecu.edu/cs-training/hallwa/Multiple-Tabs.cfm.

To put the element on a page, click the “Click to insert new element” link on your page, then choose “Tabbed Interface Element” listed under Custom Elements.  Then click the “Click here to defined the custom element data” link to open the popup  window that will let you put your content in the element.

Choose how many tabs you want to have, 2, 3, or 4.  Pick the background color for the active and inactive tabs.  With a purple background, the text will be gold, with a gold or white background, the text will be purple and with a gray background, the text will be white.

multi-tabs_0

Then click on the “Tab One” tab to define the content of your first tab.  You must have a Tab Label (the text that will appear on the tab) and content.  Then do the same for each of the other tabs.  You only have to complete as many tabs as you specified that you wanted.  You can put content in more tabs than you specified in the first step, but the element will only display the content in the number that you specified.

multi-tabs_1

Click Finish when all your desired tabs are populated.  The element will write all the CSS and JavaScript for you to display your content.  And if the user has a browser that does not use JavaScript, the element will still display all the content in your element, displaying them down the page in order.

As always, check out the ITCS Learning Center for more information about CommonSpot and other computer topics.

Tutorial Tuesday – Lightbox Slide Show

1 Reply
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.