Stunning functionality, amazing simplicity, RokSlideshow....

RokSlideshow Overview

The Ultimate JavaScript Powered Slideshow

Joomla 1.0 / 1.5 Modules v. 3.0.3 Free

Introduction

RokSlideshow can be either used as Joomla! or a Standalone / JavaScript plugin.

In this documentation it will be explained how Joomla! and Standalone versions work and the meaning of all parameters that you can use.

Joomla! Module

The RokSlideshow script itself is configured as a Joomla! module. What this means to you and me is that it's installed as a simple bundle via the Joomla! Installer, then is configured for use in your Joomla! site via the Module Manager

Being a module means that you can assign the RokSlideshow module to a module position in your template/layout or you can use the handy module plugin (mosloadposition for Joomla! 1.0, or loadposition for Joomla! 1.5) to display the module inline in your content.

If you want to use the module inline in your content with the type syntax. Make sure you have published your module in a position called slideshow and it's set to display on ALL pages. Also ensure the module itself is published.

Module Configuration

To configure RokSlideshow you must first navigate to the module properties:

  • J! 1.0: Modules → Site Modules → RokSlideshow
  • J! 1.5: Extensions → Module Manager → RokSlideshow

Module Class Suffix: the string that gets appended to the module if you want to assign more specific, individual styling.

Width: The width of the slideshow in px.

Height: The height of the slideshow in px.

Images Directory: The directory where the slideshow will find the images. This should be relative from the root of your Joomla! install.

Loading Progress Bar: Boolean to toggle of the loading bar should be shown as the images are loaded into the browser.

Show Text Captions: Boolean to toggle if the animated text captions should be shown even if matching .txt files exist for the images.

Show Title Captions: Boolean to toggle if the animated title captions should be shown even if matching .txt files exist for the images.

Show Captions: Wheter or not RokBox should show the links captions. If enabled, and a link doesn't have the caption in it, caption won't appear also.

Captions Height: Height of the captions area in px.

Title Size: The size as a css value for the font size of the title.

Title Color: The color as a css value for the font color of the title.

Description Size: The size as a css value for the font size of the description.

Description Color: The color as a css value for the font color of the description.

Sort Criteria: How the images should be sorted. Choices are Alphabetical or by Creation Date

Manual Sort Order: Comma seperated list of images that describe the order - Example: image3.jpg,image2.jpg,image1.jpg - this will override Sort Criteria if set.

Dynamic Image Resizing: If you are experiencing problems with zooming and other effects, try setting this to False.

Image Duration: The duration each image is show for in milliseconds.

Transition Duration: The time it takes to transition between images in milliseconds.

Transition Type: Type of transition. Options are Fading, Zooming, Panning, Combo - Ken Burns Effects, Push, and Wipe.

Pan Percent: The amount of panning for Panning or Combo type transitions. Valid value are 0 - 100.

Zoom Percent: The amount of zooming for Zooming or Combo type transitions. Valid value are 0 - 100.

Transition for Push/Wipe: Choice of any of the mootools transition effects.

Standalone Version

To use RokSlideshow in any non-Joomla! environment, there are few steps to follow. First of all you need to consider that RokSlideshow requires mootools to work. You can either use the RokSlideshow Standalone version from download section which comes along with mootools in it, or download it from the official home page.

Once you've unzipped RokSlideshow Standalone in your root home page, every page that you want RokSlideshow to work must contain in its <head>:

  1. <script type="text/javascript" src="rokslideshow/mootools.js"></script>
  2. <script type="text/javascript" src="rokslideshow/rokslideshow.js"></script>

src and href in the above example are for example purpose, you may want to change those paths to fit your site structure.

Once you've included the above files into the head tag, you need to add a custom script tag also, that let's you initialize and configure RokSlideshow. Right below the script tag that loads rokslideshow.js (line 2 of above code), add the code:

  1. <script type="text/javascript">
  2.  
  3.     window.RokSlideshowPath = '';
  4.     window.addEvent('load', function(){
  5.       var imgs = [
  6.       {
  7.         file: '1.jpg',
  8.         title: 'Audi RS8 V-12 TDI LeMans Concept - Front Angle View',
  9.         desc: 'V-12 Diesel concept version based on the LeMans winning V-10 race car.',
  10.         url: '#'
  11.       },{ 
  12.         file: '2.jpg',
  13.         title: 'Audi RS8 V-12 TDI LeMans Concept - Back Angle View',
  14.         desc: 'More aggressive body panels gives this concept a mean look',
  15.         url: '#'
  16.       },{
  17.         file: '3.jpg',
  18.         title: 'Audi RS8 V-12 TDI LeMans Concept - Side View',
  19.         desc: 'THe unique orange/grey color scheme makes this concept stand out from the crowd.',
  20.         url: '#'
  21.       },{
  22.         file: '4.jpg',
  23.         title: 'Audi RS8 V-12 TDI LeMans Concept - Front View',
  24.         desc: 'Any lower and this RS8 would be scooping up tar as it drives down the road.',
  25.         url: '#'
  26.       },{
  27.         file: '5.jpg',
  28.         title: 'Audi RS8 V-12 TDI LeMans Concept - Front View',
  29.         desc: 'Notice the roof mounted cooling for the mid-engine configuration',
  30.         url: '#'
  31.       }];              
  32.  
  33.       var myshow = new Slideshow('slideshow', { 
  34.         type: 'combo',
  35.         showTitleCaption: 1,
  36.         captionHeight: 45,
  37.         width: 450, 
  38.         height: 300, 
  39.         pan: 20,
  40.         zoom: 30,
  41.         loadingDiv: 1,
  42.         resize: true,
  43.         duration: [2000, 9000],
  44.         transition: Fx.Transitions.Expo.easeOut,
  45.         images: imgs, 
  46.         path: '/images/stories/rs8/'
  47.       });
  48.  
  49.       myshow.caps.h2.setStyles({
  50.         color: '#fff',
  51.         fontSize: '13px'
  52.       });
  53.       myshow.caps.p.setStyles({
  54.         color: '#ccc',
  55.         fontSize: '11px'
  56.       });
  57.     });
  58.   </script>

The above example is using values as for demostration, make sure to change at least the path value (line 46)

Last step is to include in your page, where you want RokSlideshow to appears, a placeholder that will get populated once the page load. So, edit your page, move at the place you want RokSlideshow to appear and write:

  1. <div id="slidewrap">
  2.     <div id="slideshow"></div>
  3.     <div id="loadingDiv"></div>
  4. </div>

Configuring Your Images and Descriptions

The module uses a very simple process to display your images as a slideshow. As part of the configuration, you provide a path to the images you want to display. This means that you should separate your images into their own subdirectory specifically for the use of the slideshow. For the demo shown in the Overview we created a directly called rs8 in the images/stories/ folder of Joomla!. We then uploaded all the images into that directory.

The RokDownloads module will find all the images in your directory that it supports (png, gif, jpg) and use those for the slideshow. If you want to have titles, captions, and links for a particular image, you just create a simple text file with the name name as the image except with a .txt extension rather than the image extension. An example is shown below:

Filename: 1.txt
Audi RS8 V-12 TDI LeMans Concept - Front Angle View
http://www.rocketwerx.com/forum
V-12 Diesel concept version based on the LeMans winning V-10 race car.
  • Line 1 - The title of the image
  • Line 2 - The URL to link to, use # if you don't need a link
  • Line 3 - The description of the image. This can be rather long but will only display as much as the caption area can fit. Adjust the caption height if you need more room.
2008 RocketWerx, LLC - All Rights Reserved