If you are looking to add a bold visual aspect to your homepage, installing a slideshow is a great idea and will instantly make your content more appealing to visitors checking out your website. In this tutorial, we will show you, in the simplest way possible, how to get a slideshow up and running.
The easiest way to add a slideshow to your website is using an extension. There are several good tools out there to help you do this, but the one we like best is the new OSShow module by OSTraining. These guys make a number of excellent Joomla extensions that are all free and all designed to make life easier for the user and OSShow is one of them.
To get OSShow up and running on your site, you will firstly need to head over to OSTraining and download the appropriate version of the module (2.5 or 3.x).
Once you’ve done this, log in to your Joomla admin area and go to Extensions > Extension Manager. From here navigate to the Upload Package File tab, click on Choose File and locate OSShow from your local computer.
Complete the installation by clicking on Upload & Install.
With the module installed, you can now be configuring it to suit your needs. You can do this by going to Extensions > Module Manager and selecting OSShow from the list of installed modules.
On the module page, you will be presented with a vast range of options that can be configured to set up a tailored slideshow.
The official OSTraining documentation lists these options as:
- Module Class Suffix: A suffix to be applied to the CSS class of the module, this allows individual module styling
- Images path: A relative path to the location of images to show
- Transition Time: The time it takes to fade from one image to the next in milliseconds
- Delay Time: The time delay between picture fades in milliseconds
- Web Links Category ID: If this value is populated, the links in the Web Links Category specified will be used in anchor tags for the images displayed in the module
- Default Link: If this value is populated, this link will be used for any image that does not have an associated Web Link
- Container Width: The width for the container div
- Container Height: The height for the container div
- Start Image: This determines which image to show the user first. First will always show the first image, random will randomly pick an image, and last seen will store a cookie on the user’s browser and always start at the last one they were shown
- Image Order: This determines the order in which to show images. Forward will show them forward in the order they are found on the server, Backward shows them in the reverse of that order, and Random will randomly pick the next image to show
- Ping Pong: If this is checked, the show will start with the image order selected above and reverse when it hits the end of the image list
- Image Scale Mode: This determines how the image height and width are set
- Image Vertical Align: This determines how the image is aligned vertically
- Image Horizontal Align: This determines how the image is aligned horizontally
- Delay Image Loading: Set this to ‘Yes’ if you want to wait until domready to set your image sources
- Play Count: This is the number of times to play through the image list. If this is set to 0, it will repeat forever
With the options set as required, simply assign a position for OSShow (preferably just below the site header) and enjoy your new slideshow.