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 up to 10 images with HTML and images from any url and user defined content in one of 4 effect transitions. 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 plugins. 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 widget. Once you have it downloaded it just follow the below tutorial if you need help installing the widget into WordPress. Refer to your theme's widget layout to determine the best position to publish this widget to, some widgets 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 WordPress 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 widget admin.
2a. HTML method - Enter Your Image URLs
In the backend of the widget 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.
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 widget width is set to 100%
Below is a complete list of all the settings on the main "Widget" 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 widget, it is not used very often.
- Widget Class Suffix - If your theme has any compatible widget classes you can supply that here.
- Background - This controls the background color of the widget 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 widget 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 widget 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 widget to visible height of your browser.
- Pause Rotation on Hover? - When you mouse over the widget 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 themes 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.