How do I use the Slideshow Engine in the Community Content Portal?

To apply the slideshow panel to your page:

1. Open Panels tab for the page you want to add the slideshow to
2. Click the Community Content Portal button then search for “Slideshow Engine”
   • If you do not see the "Slideshow Engine" panel, contact us for assistance
3. Click “Add Panel to My Site”
4. Choose position in page where you want the slideshow to appear
5. To add slides to page contents, click the Templates button on the editor toolbar and add as many Promoter Slide templates as you need (It is probably a good idea to limit the slideshow to around 6 images though, especially if they are large)
6. Right click on the inserted slide picture to replace the image with one of your own
   Notes about image size:
   • The slideshow canvas area (which wraps around the images themselves) is initially set to be the width of 100% of the available space where it is placed and 200px in height.  In order to change this, you have to use the instructions below for "Customizing the Slideshow" and set the width and height options accordingly.
   • The promoter slide template images are set (in the Style field of the Advanced tab of the Image Properties window) to scale horizontally to be 100% of the available width and to have their height automatically adjust, proportionately to the calculated width.  The means that depending on where you place your slideshow (right or left column vs. content top or bottom), some of your images may appear grainy and/or have some portion of their lower edge cropped off.  You have three alternative options for handling the way your images are scaled within the slideshow canvas including:
     • Scaling in both directions - set width and height to 100% in the Style field
     • No Scaling - remove what's in the Style field completely
     • Scaling height only - set width to auto and height to 100%
7. Right click on the inserted image to edit the hyperlink
   • It is important that you never remove the link from the image even if you do not need for the image to be linked
   • If you do not need for the image to be linked, simply place the hash sign (#) in the URL field of the Link box (a link of some sort is required in order for the slideshow to work and the hash symbol just simply causes the current page to reload when the linked item is clicked)
   • If you accidentally remove the link and slide stops being included in the slideshow, you'll need to reinsert the link and then go to the Advanced tab of the Link window and put the word "promotion" in the Stylesheet Classes box.
8. To center the slideshow on your page:
   • Copy and paste the following code at the top of the source code view of the page or panel where the you have placed your slideshow (to center all slideshows on your site all the time, add this code to the Content Head area of the Home Page Settings tab instead):

     <style type="text/css">#rotator{margin:auto;}</style>
     

To customize the slideshow:

Replace steps 1-4 above with the following:

1. Create a new panel in your Panels manager containing the following code (using the Source button on the editor toolbar) or place the code directly in the source code of the page contents where you want the slideshow to appear:
   

   <script type="text/javascript" src="http://eridan.websrvcs.com/common/javascript/slideshow.asp"></script>
   <div id="rotator"></div>

   Add a "?" to the end of the source URL (after "...slideshow.asp") in the green section of the script above followed by any of the query strings below to change the parameters of the slideshow (separate multiple query strings with "&"):
   • cssID=masthead-image (where "masthead-image" is the CSS ID of the container on the page you want to replace with the slideshow – default is "rotator")
     • If you use this option, you can delete the section of the code above that is red
     • It is important to note that the entire contents of the referenced container will be replaced by the slideshow, so don't put anything in there you want to be visible along with the slideshow
     • If you use this option and are centering the slideshow (step 8 above), you must replace the word rotator in that code with your CSS ID
   • selectedbuttoncolor=blue (where "blue" can be any named color or hex color code with %23 in front – default is light gray (#aaa))
   • unselectedbuttoncolor=%23efefef (where "%23efefef" can be any named color or hex color code – default is a white)
   • duration=1 (where "1" is the number of seconds over which the fade transition should be conducted – the fade speed – as a general rule this should be around 1 or less for the smoothest transition – default is .5)
     • Note that the fade transition is only visible in IE10+, Firefox, Safari, and Chrome
   • speed=5 (where "5" is the number of seconds each slide should be shown – 3 seconds is good for image-only slides; 5-7 is good for slides containing text – default is 5)
   • height=310 (where "310" is the number of pixels high the show should be – default is 200px)
     • note that this value will NOT override the CSS that is set for the slideshow container (e.g. masthead height)
   • width=960 (where "960" is the number of pixels wide the show should be – default is 100%)
     • note that this value will NOT override the CSS that is set for the slideshow container (e.g. masthead width)
   • aligncontrols=left (where "left" is the place within the slideshow where the button controls should appear – choices are left, right, center – default is center)
     • controls=display:none; (to hide the controls completely)
     • If you want the control "buttons" to appear in the space below the slideshow images instead of on top of them you can set the slideshow height to a value that's 30px taller than the tallest image in the slideshow

Complete source URL example using all of the query strings above:

http://eridan.websrvcs.com/common/javascript/slideshow.asp?cssid=masthead&selectedbuttoncolor=blue&
 unselectedbuttoncolor=%23000066&duration=.3&speed=6&height=250&width=900&aligncontrols=left

*Troubleshooting note: If the slideshow does not work when previewing your site, change the server name in the slideshow engine source URL from "eridan" to "draco".

Previous Page