HD-Responsive Slideshow Module for Joomla 3.5

A jQuery powered responsive image slideshow for Joomla 3.5. This module scales the images to fit the screen and caters for different browsers and mobile devices.

What is this?

HD-Responsive Slides is a lightweight jQuery based image slideshow module for Joomla 3.5.

What is different about it?

It is was built primarily to be used on responsive templates, meaning it can resize the images depending on which screen it is viewed on. It also includes a browser/device sniffer function so you can select which device or browser it should appear on (iphones, Android devices, ipads, etc). More importantly, it's a very easy to use image slideshow.

What to do after installing?

Install the zip file via the administration install manager as per any other module. Once it has installed go to the module manager and select HD-Resp Slides.

Adding Images

To add an image simply use Joomla's standard Media Manager to upload your images to the main "images" folder. Then in the Module Manager, when selecting an image, the drop down selection will display ALL the image files from your images folder. Simply select your newly uploaded files.

There are spaces for up to 10 images in the slideshow module, each has an ALT tag option (it is recommended to use this to describe each image). Any image set to "default" will not be included.

Widths & Heights

This module was intended for responsive templates (templates that adapt to the width of the device it is used on). If the main width value in the module manager is set to 100% then the image will be scaled to display as large as possible (this is determined by your template and the width of the module position). The height is always calculated in relation to the width.

If you are not using a responsive template (or would prefer to have control over your image display sizes) then simply change the width value to your desired width in pixels.

You can also state the speed of the slideshow and the duration of the fade effect in milliseconds.

Additional CSS

There is a section in the module to add any additional CSS stylings you may require. The main container for the slideshow is wrapped in a div with the ID "hd-rs". By default the CSS included is...

#hd-rs {background-color: black; padding: 5px;}

... which applies a black background colour with 5px of padding. This, of course, can be deleted and replaced with your own CSS code.

Browser Sniffer

Under the advanced parameters section of the module is a "browser sniffer". This functions allows you to only render the module to the screen if the viewer's browser (or device) matches that specified in your module. This means you can target something to appear on an iPad that won't appear on a desktop.

There's also a URL sniffer, which allows you to render the module on a specific URL page. Click here for more information about URL sniffing.