Adding a jQuery-powered image slideshow module
Slideshow is one of my favorite effects, and there are many Joomla! modules available to achieve this effect. For example, take a look at AJAX Header Rotator, which is available at http://extensions.joomla.org/extensions/photos-a-images/images-rotators/10036.
Note
Or, you can simply perform a search in the Joomla! Extension Directory (JED) for "AJAX header rotator" and download the module—do so now, so that you can follow the example. After downloading the ZIP file, go to Extensions | Install/Uninstall, select the file, and click on Upload File and Install. After installing the file, on navigating to Extensions | Module Manager you will see that the AJAX Header Rotator module is still not enabled, so we will enable it.
Next, we are going to upload some images. You can upload any image whose
dimensions are 587 x 257 px. However, if you wish, you can use
image_3.png and image_4.png provided in the code
bundle.
Navigate to the Media Manager, then to
the stories folder, create a folder called
module_1, and upload the images to this folder. After uploading the
images, we can return to Extensions | Module
Manager and open our AJAX Header
Rotator module. Here you will see the module parameters, as shown in
the following screenshot:
Let's go through these parameters:
Unique ID for this AJAX Header Rotator—is important if we need more than one instance of this module.
Image Folder path—is a very important parameter as it indicates the location of the folder where the images are placed. The images that we place in this folder will be the ones used by the module. In our example, we are going to use
images/stories/module_1as the path.Rotation speed and Rotation timeout—will control the speed between image fades and the time for which each image is being shown. It's stated in milliseconds.
Image width and Image height—well, these are very self explanatory; we will go for 587 x 257px as the size of the images in our example. That is also the size of our module in the template. However, we could state any dimensions that we need in these parameters.
For now, we are not going to use links in the images, so leave the other parameters at their default values. Before saving these changes, remember to select the module position value to module_1, as we will use this in our example.
On refreshing our site, you will see something similar to the following screenshot:
I've tried to capture the very moment of the transition between two images. However, you will surely see it better on your own Joomla! installation, so why don't you try it?
Some other modules to try
Let me suggest some slideshow modules in case you would like to try them out. You can find all of them by searching the JED:
RokSlideshow—is one of my favorite modules. Although it uses MooTools instead of jQuery, it has more effects and transitions. You should really try this module.
ImageSlideShow—works in the same way as the module that we have seen in our example.
JT SlideShow —isalso jQuery-based, but also offers some nice features, such as pause-on-hover, auto-stop, auto-fit, before/after callbacks, and also some transitions to choose from.
