This tutorial is going to explain you how to manage “Image Swoop” module settings in Joomla 3.x.
Image Swoop module is a combination of default Joomla Articles newsflash module and Camera Slideshow jQuery plugin. And it automatically updates with Joomla platform keeping your configuration options safe. This module has many useful features:
32 color skins;
more than 30 configuration options;
10 image overlay patterns;
32 easing effects;
24 animation types;
unlimited number of slides;
assigning links to slides;
setting animation types separately for desktop and mobile devices;
slider dimensions can be set in pixels or percents;
caption display and animation.
To change slider settings you should perform the following steps:
In your Joomla admin panel go to Extensions -> Module Manager menu. In the list of modules find Image Swoop module and open it:
In the Details tab you can edit module title, position, status, ordering, language and so on (common module settings):
The Options tab consists of 3 sections:
Basic options section contains settings for slider categories and its articles. Here you can select any category that contains articles with images for the slider, show/hide "Read more" buttons on the slider, select number of the articles (images) you want to display in the slider and order them, add links to slider titles and so on:
Advanced Options section contains the module layout settings. Here you can apply a CSS class suffix to the module for individual module styling, control module caching, change bootstrap size (how many columns the module will use), edit module header/title HTML tag and CSS class and so on:
Image Swoop Settings section contains all slider module settings. Let’s take a closer look at them.
Theme. Select Image Swoop styling. To use "Custom" option you should have camera.css style placed to your template CSS directory.
Color skin. Choose the desired color from the drop-down list for the slider elements.
Script. Select the script you want to load. To use "Custom" option you should have camera.js file located in the templates/your_template/js directory.
Load easing library. Set false if it is loaded from the template files.
Load jQuery mobile. Set false if it is loaded from the template files.
We performed some changes in the Image Swoop layout settings on our test site. You can see the results on the screenshots below:
1) Theme – Default; 2) Color Skin – magenta.
1) Theme – Custom.
Alignment. Select slider alignment on the page.
Advance. Select it if you want to enable or disable automatic slides change (slider autoplay function).
Mobile Advance. Advance option for mobile devices.
Height. Insert the desired slideshow height value (you can use pixel (px) or percentage (%) value).
Min height. Insert the desired slideshow min height value (in px or %).
Overlayer. Decide to put a layer on the images to prevent users grab them simply by right-clicking the images.
Overlay image. Select overlay image from the drop-down list.
Portrait. Select it if your slider is in portrait format.
We performed some changes in the Image Swoop general settings on our test site. You can see the results on the screenshot below:
1) Alignment – topCenter; 2) Height – 30%; 3) Overlayer – true; 4) Overlay image – pattern_7; 5) Portrait – true (it affects the image width).
Note: General settings (except advance and height options) will work with the default Image Swoop theme only.
Loader. If you want to add a loader to your slider, select slideshow loading icon type from the drop-down menu (Pie or Bar).
Pie diameter. Set pie loading icon diameter.
Pie position. Select pie loading icon position.
Bar direction. Select loading bar animation direction.
Bar position. Select loading bar position.
Loader color. Select loading icon color.
Loader BG color. Select loading icon background color.
Loader opacity. Set loading icon opacity.
Loader padding. How many empty pixels you want to display between the loader and its background.
Loader stroke. The thickness both of the pie loader and the bar loader. Remember, for the pie, the loader thickness must be less than a half of the pie diameter.
We performed some changes in the Image Swoop loading settings on our test site. You can see the results on the screenshot below:
1) Loader – pie; 2) Pie diameter – 50; 3) Pie position – rightBottom; 4) Loader color – #00F5B8; 5) Loader BG color – #FF7094; 6) Loader opacity – .6; 7) Loader padding – 2; 8) Loader stroke – 7.
Cols. Set animation columns number.
Rows. Set animation rows number.
Sliced cols. Set sliced animation columns number. If you set 0, slideshow uses the value of the Cols option.
Sliced rows. Set sliced animation rows number. If you set 0, slideshow uses the value of the Rows option.
Easing. Select easing animation effect. The best way to understand how an easing will affect the slideshow animation is to see the equation graphed over time. See for a graph of all animations available via the following link.
Mobile Easing. Select easing animation effect for mobile devices.
FX. Select FX animation effect. You can also use more than one affect, just separate them with commas, for example, "simpleFade, scrollRight, scrollBottom".
FX Mobile. Select FX animation effect for mobile devices. Leave empty if you want to display the same effect on mobile devices and on desktop etc.
Grid difference. To make the grid blocks slower than the slices, this value must be smaller than Transition period.
Opacity on grid. Decide to apply a fade affect to blocks and slices: if your slideshow is fullscreen or simply big, we recommend to set it False to have a smoother effect.
Time. Milliseconds between the end of the sliding effect and start of the next one.
Transition period. Define transition duration in milliseconds.
Navigation and controls settings:
Pause on Hover. Pause on state hover. Not available for mobile devices.
Navigation and controls. Select it if you want to display navigation buttons.
Navigation on hover. Select it if you want to display navigation only on hover.
Navigation on hover (Mobile). Display navigation only on hover for mobile devices.
Pagination. Select it if you want to display slider pagination.
Play/pause. Select it if you want to display play and pause buttons.
Pause on click. Select it if you want to stop slider clicking on it.
Thumbnails. Select it if you want to display slider thumbnails. Uploaded XSmall images will be displayed as slider thumbnails.
Display Caption. Select it if you want to display slider caption.
Caption Animation. Choose caption animation.
This is the end of the tutorial. Now you know how to manage “Image Swoop” module settings in Joomla 3.x.