Notice: Don't forget to unzip the downloaded file. In this you will find two versions of Pop Image Slider, one for Joomla 2.5.x and a second for Joomla 3.x.
- Download Pop Image Slider.
- In the Joomla control panel select: "Extensions" > "Extension Manager".
- In the Upload Package File section click Browse and locate the "pkg_popimageslider.zip" file.
- Then click Upload File & Install to upload the file and complete the installation.
In order to configure Pop Image Slider go to the Joomla control panel and select: Extensions > Module Manager. Locate Pop Image Slider in the list and click it. You can see the Parameters of the module as below:
1. Joomla 2.5.x is not loading jQuery by default. So, if your website is not already loading jQuery you have to enable the last parameter of the module "Load jQuery".
2. In order Pop Image Slider to work in Joomla 3.0 you must have the version 3.1.5 or later.
3. If you enable both tooltips and lightbox then the description of the images is not visible in the lightbox. You have to disable tooltips in order to see the description in the lightbox window.
Pop Image Slider has the following parameters:
- Module Class Suffix: A suffix to be applied to the CSS class of the module. This allows for individual module styling.
- Module Width (px or %): The width in pixels or percent of the module. Examples: 100%, 55%, 900px, 355px etc. The percent width will work correctly depending from the css style of the parent container.
- Module Background Color: The background color of the module (e.g. '#343434'). Leave empty for transparent background.
- Module Rounded Corners (px): The size in pixels of the rounded corners for the module background. Set it to zero (0) for square corners.
- Images Group: The images group created in the component.
- Images Height (px): The height in pixels of each image (when cursor is not over).
- Images Magnification (%): The percentage of the image magnification when cursor is over. A value between 15 and 40 is the most appropriate.
- Images Random Order: Order the images randomly.
- Images Space (px): The space in pixels between the images.
- Images Shadow (px): The shadow in pixels behind images.
- Images Rounded Corners (px): The size in pixels of the rounded corners of the images. Set it to zero (0) for square corners. CAUTION: Rounded corners and border together are not supported by all broswers.
- Images Border Width (px): The size in pixels of the images border. Set it to zero (0) for no border. CAUTION: Rounded corners and border together are not supported by all broswers.
- Images Border Color: The color of the images border. Example: #FFFFFF.
- Grayscaled Images: Images are in grayscale in small size (when cursor is not over them). The images become colored when cursor is over them. CAUTION: In order this feature to work, the images must be in the same domain with the website. Also use absolute paths to the images e.g. 'http://www.domain.com/images/stories/image.jpg'.
- Show Titles: Show a title below every image.
- Titles Font Size (px): The font size of the tiles below the images.
- Titles Font Color: The font color of the tiles below the images. Example: #000000.
- Titles Bold Fonts: Enables or not bold fonts in the titles below the images.
- Show Description: Show title and description when mouse is over an image in a special place below all images.
- Description Font Size (px): The font size of the infobar text.
- Description Font Color: The font color of the infobar text. Example: #FFFFFF.
- Show Tooltips: Show styled tooltip when cursor is over an image.
- Tooltips Style: The style of the tooltip.
- Tooltips Font Size (px): The font size in pixels of the text in the tooltips.
- Tooltips Without CSS (Only in Joomla 3.0): Enable this option if your template has defined CSS for tooltips.
- Auto Slide: Images slide automatically left and right when cursor is not above them.
- Auto Slide Speed: The speed of the images when they slide automatically.
- Auto Slide Start Delay: The time in seconds to wait after the webpage is loaded and before the auto slide start.
- Show Buttons: Show buttons to slide the images left or right.
- Buttons Style: The buttons style.
- Show Separators: Show separators at the left and right edges of the module where the images appear or disappear.
- Separators Style: The style of the separators.
- Separators Color: The color of the separators.
- Link Action: The way images links open on click. If you want to use the PrettyPhoto lightbox but the Joomla's default lightbox (BoxPlus) is also active, then go to the advanced tab of the plugin 'Content - Multimedia display - boxplus' and set the option 'Strict mode' to 'Yes'.
- Lightbox Style: The style of the lightbox.
- Slide Speed: The images sliding speed. Slowest='1', Fastest='99'.
- Initial Position: The position of the slider starting to show images.
- Content Only: Show only the article content without the menus, modules etc.
- RTL Direction: Support for right to left direction.
- Load jQuery: Load the jQuery library in case Joomla is not loading it.
- Support for RTL direction.
- Fix to the ordering of the image categories of Phoca Gallery and K2.
- Fix to the lightbox (BoxPlus and PrettyPhoto).
- Fix to the detection of K2 component.
- Available as component and module.
- In cooperation with Phoca Gallery and K2.
- Endless sliding.
- Performance improvement in motion.
- Image swap on mouse over.
- New lightbox version (prettyPhoto) built on jQuery.
- Bug fix for IE8.
- Valid as XHTML 1.0 Transitional.
- The code is written from the start.
- Responsive design.
- Multiple instances per page.
- Images can have different width.
- New lightbox version (mediaboxAdvanced) with many themes.
- Better design.
- a. New position of the buttons.
- b. Seperators at the left and right of the images.
- Styled tooltips.
- Improved administration panel.
- Support for only Joomla article content in the lightbox.
- Auto slide is deactivated when mouse is over the buttons for manual sliding.
- Fix: Flash video (flv) and mp3 are working with SEF urls.
- New HTML5 effect. Images are in grayscale in small size (when cursor is not over them). The images become colored when cursor is over them.
- Automatic slide support.
- Great improvement in the motion of the images.
- Text (title and description) added beside the images.
- More module parameters to customize the appearance.
- Image styling capabilities support: border, shadow, rounded corners, gap between images.
- Buttons support as alternative way to slide the images.
- Absolute (in pixels) or relative (percent) width support of the module.
- Improvement in movement and effects of images.
- Shuffle images support.
- Easier administration. Easier module parameters.
- Links open in the same window, new window or using the lightbox effect.
- Improvement in movement and effects of images.
- The Mootools technology is used for the image effects instead of the Flash technology.
- First release of the Pop Image Slider module.
For your convenience the module is already parameterized to work with sample images.