S5 Image and Content Fader
This tutorial will explain how to install and configure the S5 Image and Content Fader.
The S5 Image and Content Fader is responsive image fader that will display images in 2 different ways, Joomla articles or HTML with images from any url and user defined content in one of 4 effect transitions. The article method pulls in Joomla articles from categories you specify. Each slide will function just like a Joomla article. You can change order, display according to publish date, have unlimited number of slides, etc. The second way is HTML method. The fader includes many more options like choosing between actual size and stretch for your images and enter in pixels or percentages for your width, great for responsive/fluid websites! Powered by Mootools/Jquery but if you experience conflicts you can enable legacy S5 Effects mode (contains less features than Mootools/Jquery version and only works in HTML mode).
Note - Many of our club products contain specific styling for our extensions. These styles cannot be transferred from one product to another; they are integrated into the design. The same extension is used on all installations, the themes themselves contain the styling overrides. If a particular theme does not include unique styling for a particular extension, then the default style is used.
Be sure to read the tooltips and other descriptions in the backend of this extension. There are a lot of tips and further information found in these areas.
The first thing you'll need to do is install the module. Once you have it downloaded it just follow the below tutorial if you need help installing the module into Joomla. Refer to your template's module layout to determine the best position to publish this module to, some modules are designed for specific locations.
Next you'll need to decide which mode you want to the fader to operate in, article or HTML. Article will work off Joomla articles you add display the intro image as the fader image. HTML will just be a limited amount of slides with content you enter in the module admin.
2a. HTML method - Enter Your Image URLs
In the backend of the module you will need to enter in URLs to images you have either uploaded to your server or are linking to from another website, under the "Image Settings" tab. You can enter a full URL such as "http://www.yoursite.com/imagename.jpg" or a relative URL such as "images/imagename.jpg". The number of slides is determined by how many images you add. So if you just want 2 slides to show, then just enter in 2 image URLs:
You can enter an optional href hyperlink in this same area. This hyperlink will be used if the user clicks on the image.
2b. HTML method - Give Each Slide Some Content
If you have disabled "slide text" you can skip this text. Now for this next step we'll enter in the text for each slide. Remember from above that the visible slides are determined by the images URLs so if you only entered in 2 URLs then only 2 slides will show. This means that if you enter in slide text for 5 slides only the first 2 slides of text will show.
Below is a screenshot of where you will enter in your text under the "Text/HTML Settings" tab. There are 2 areas and you can leave either blank or fill both in. We designed the top to act as a title for the slide with a description below it. These areas can handle plain text and custom HTML markup.
3a. Article method - Select Category
If you want to pull in Joomla articles and display them in the module you'll first need to create some article categories. Once you do this go to the backend of the module and you'll be able to select the category or categories you created. In these categories you will publish articles with intro images and these are what will rotate in the image fader.
3b. Article method - Add Intro Image
In the backend of the each article you'll need to add in an intro image. This is the image that will show in the slider. You can then also add a title and description text in the article body if you so wish to include these too.
4. Next you will need to setup the options in the admin
In this last step you'll need to go through all the options on the main tab and decide how you want the image fader to function. Make sure you have a pixel height set (ie 250px) or the image fader may not operate properly, this setting will be used for smaller screens on responsive sites. To enable responsive functionality set "Image Sizing" to "Stretch To Fit" and make sure the module width is set to 100%
Below is a complete list of all the settings on the main "Module" tab. Typically the default settings here work well, the most common settings to change are: Width, Height and Image Sizing.
- Pre-Text - This text will show right before the module, it is not used very often.
- Module Class Suffix - If your template has any compatible module classes you can supply that here.
- Background - This controls the background color of the module and only shows when the images are loading.
- Width - If this is a responsive site 100% width should be used. A px width should only be used if the size of the module will remain constant.
- Height - Be sure to read the full description on this field in the tooltip. If Image Sizing is set to "Stretch to Fit" the height will be automatic and this setting will only be used for smaller screen sizes.
- Image Sizing - This determines the size of the images and whether they will stretch for responsive sites. Please read the full detailed description in the setting's tooltip.
- Disable Stretching - This disable image stretching at the specified screen width.
- Mobile Height - This forces the module to a specific height for smaller screen resolutions.
- Mobile Height Trigger - This is the trigger point at which the Mobile Height setting takes effect.
- Zoom Effect - This feature will slowly zoom in on the image. The speed and size of the zoom are controlled by the settings below it.
- Effect - This is where you set the transition effect such as: Slide Left, Fade, Continuous Horizontal, etc.
- Drop Tab Text - This is the text that will show in the gallery drop down if it is enabled.
- Visible Time - This is how long each slide is visible for on the screen.
- Hide Time - This is how long the transition effect takes to complete.
- Opacity Time - This is how long it takes each slide to transition from 0% opacity to 100% when it transitions in as the active slide.
- Slide Opacity - This controls the opacity of the entire text area.
- Full Screen Height - This forces the module to visible height of your browser.
- Pause Rotation on Hover? - When you mouse over the module this feature will causes the transitions to pause.
- Navigation Carousel - Enabling this feature will show a thumbnail navigation carousel of each slide. Note - many of our templates override this feature and show buttons instead of images.
- Thumbnails Sizes - This controls the size of the thumbnails for the carousel.
- Layout - This determines if the carousel will be in a horizontal or vertical layout.
- Navigation Arrows - Here you can enable or disable the left and right arrows that transition between each slide.
- Slide Text - With this setting you can enable or disable the slide text.
- Slide Title - With this setting you can enable or disable the slide titles.
- Images - With this setting you can enable or disable the images. If they are disabled only text will show if you have it enabled.
- Randomize Slides - This puts the slides in a random order, which is set on page load.