Club Free

Joomla Extensions

FREE

RokSlideshowLatest Version: 4.2

RokSlideShow
Joomla 1.5

Advanced Image Rotation RokSlideshow is a mootools powered JavaScript slideshow that allows you to quickly and easily display a selection of images and transition between them. The slideshow itself is very flexible and easily customizable and offers a great alternative to flash-based solutions.

The slideshow comes in 3 formats. A standalone HTML/JavaScript solution for inclusion in any website or page; A Joomla 1.0 module, and a Joomla 1.5 module. We highly recommend using RokSlideshow in Joomla 1.5 for optimal performance and ease of use.

NOTICE: The Joomla 1.0 module for RokSlideshow is not supported. Development for the module has stopped, although you can still download it if needed. We strongly recommend upgrading to Joomla 1.5 to take advantage of the Joomla 1.5 module which is more advanced than its 1.0 counterpart.

List of Features

  • Mootools v1.11 compatible
  • 6 Customizable Transition Type: Fading, Zooming, Panning, Combo (Ken Burns Effect), Pushing, Wiping.
  • 30 Customizable Wipe and Push transitions including bounce, linear, exponential, etc.
  • Support for hyper-linked images.
  • Alphabetical, Creation Date, Random, and Manual order modes.
  • Support for Image captions below the slideshow including support for titles and descriptions.
  • Customizable title, description font color and sizes with no extra css files.
  • Completely customizable transition and image durations as well as Pan and Zoom values.
  • Internationalization via JoomFish support.

Screenshots

RokSlideshow

History

RokSlideshow is a Joomla! module was originally inspired by Slideshow by Aeron Glemann but rewritten from scratch by Olmo Maldonado. Since then it has been updated and modified by Djamil Legato.

Installation

Installing RokSlideshow can be completed in a few minutes. RokSlideshow comes in Joomla 1.0, Joomla 1.5 and also a stand-alone JavaScript form for use with any system.

For a detailed instructions on all the options and features, please read the RokSlideshow Documenation.

Joomla! 1.5

You can install RokSlideshow for Joomla! 1.5 in few steps, just go into your Joomla! Administrator panel and:

  • Select from the top menu: Extensions -> Install/Uninstall.
  • Click on Upload Package File button.
  • Select mod_rokslideshow_j15.zip from your local drive.
  • Click Upload & Install button.

RokSlideshow is now installed. You must now edit the module to configure it. See the RokSlideshow Documenation. for more information.

Joomla! 1.0

You can install RokSlideshow for Joomla! 1.0 in few steps, just go into your Joomla! Administrator panel and:

  • Select from the top menu: Installers -> Modules.
  • Click on Upload Package File button.
  • Select mod_rokslideshow_j10.zip from your local drive.
  • Click Upload & Install button.

RokSlideshow is now installed. You must now edit the module to configure it. See the RokSlideshow Documenation. for more information.

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

Image

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>:

<script type="text/javascript" src="/rokslideshow/mootools.js"></script>
	<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:

<script type="text/javascript">

			window.RokSlideshowPath = '';
			window.addEvent('load', function(){
				var imgs = [
				{
					file: '1.jpg',
					title: 'Audi RS8 V-12 TDI LeMans Concept - Front Angle View',
					desc: 'V-12 Diesel concept version based on the LeMans winning V-10 race car.',
					url: '#'
				},{ 
					file: '2.jpg',
					title: 'Audi RS8 V-12 TDI LeMans Concept - Back Angle View',
					desc: 'More aggressive body panels gives this concept a mean look',
					url: '#'
				},{
					file: '3.jpg',
					title: 'Audi RS8 V-12 TDI LeMans Concept - Side View',
					desc: 'THe unique orange/grey color scheme makes this concept stand out from the crowd.',
					url: '#'
				},{
					file: '4.jpg',
					title: 'Audi RS8 V-12 TDI LeMans Concept - Front View',
					desc: 'Any lower and this RS8 would be scooping up tar as it drives down the road.',
					url: '#'
				},{
					file: '5.jpg',
					title: 'Audi RS8 V-12 TDI LeMans Concept - Front View',
					desc: 'Notice the roof mounted cooling for the mid-engine configuration',
					url: '#'
				}];              

				var myshow = new Slideshow('slideshow', { 
					type: 'combo',
					showTitleCaption: 1,
					captionHeight: 45,
					width: 450, 
					height: 300, 
					pan: 20,
					zoom: 30,
					loadingDiv: 1,
					resize: true,
					duration: [2000, 9000],
					transition: Fx.Transitions.Expo.easeOut,
					images: imgs, 
					path: '/images/stories/rs8/'
				});

				myshow.caps.h2.setStyles({
					color: '#fff',
					fontSize: '13px'
				});
				myshow.caps.p.setStyles({
					color: '#ccc',
					fontSize: '11px'
				});
			});
		</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:

	<div id="slidewrap">
			<div id="slideshow"></div>
			<div id="loadingDiv"></div>
	</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 RokSlideshow 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.

Frequently Asked Questions

The slideshow is not working, period.
The most likely issue is a javascript conflict. Ensure you have only one mootools.js javascript enabled, and ensure it's being called before any script that requires it. The safest approach is to disable the JS in the module, and put the javascript element in the <head> of the template file. In Joomla 1.5, the default Joomla mootools library should be used and this should not be a problem unless some 3rd party extension is loading a conflicting library.
How can I change the caption font size and color?
These elements are now configurable via the module parameters. You can change the size and color of both the title and the description.
My description is to large to fit in the caption area, what can I do?
In version 3.0 of RokSlideshow we added a Caption Height module property. Just increase this number to give yourself more room for descriptions
When using the Combo - Ken Burns Effect transition type, the images are jumpy.
It often takes some playing and tweaking of the pan and zoom values in order to produce the best result. Also the size of the images and the size of the module viewport (set via the module properties) often have a huge impact on the end result. Try playing with these values as well as the Dynamic Image Resizing property.
My images look pixelated in Internet Explorer
Alas, this is a limitation in the image manipulation capabilities of Internet Explorer. Firefox and Safari do a much better job.
How can I set a manual order for my images
To set the order manually, you need to edit the module parameters and use the following format in the Manual Sort Order field: image1.png,image3.png,image2.png
Can I set a random sort order?
Yes, you can set the Sort Order from the module params.

Changelog

This is a changelog for RokNewsFlash, inclusive of alpha, beta and release candidate versions.

Legend:

* -> Security Fix
# -> Bug Fix
+ -> Addition
^ -> Change
- -> Removed
! -> Note

-------------------- 4.1 Release [26-Jun-2009] --------------------

26-Jun-2009 Djamil Legato
# Removed possible error for PHP4

-------------------- 4.0 Release [24-June-2009] --------------------

24-June-2009 Djamil Legato 
# Issue on the path when site living in sub directories
# In certain scenarios RokSlideshow script was loading before MooTools Behaviour
# Cleanup of the code.
# JS is now loading properly and it is now compatible with RokGZipper 
+ You can now decide if links should open in the same page or externally

-------------------- 3.0.3 Release [07-July-2008] --------------------

07-Jul-2008 Djamil Legato 
# Joomla 1.5 SEF
# Ken Burns animation
# Calculation of Width/Height. 
+ Ability to show/hide titles
+ Progress bar showing image loading status
# Other minor fixes 

-------------------- 3.0 Release [06-April-2007] --------------------