The buttons below will redirect you to another website displaying demos of the extension.

Demo 1 Demo 2 Demo 3 Demo 4

How it works

The Pop Image Slider extension consists of one module and one plugin:

• The module is useful for displaying the slider in the Joomla frontend.
• The plugin is useful for being able to have easy on-click updates of the extension through the Extensions Update page in the Joomla backend. The use of the plugin is not mandatory.

But where are the slider images defined?

The images for each slider are defined using the articles of Joomla. One article represents one image in the slider. Please look at the following section "Add images to the slider" to find out how to add images in order to be displayed in the slider.

Why not use a component to define the images?

Older versions of Pop Image Slider used to have a component for defining the images for each slider. There are at least three reasons for using articles instead of a component:

1. A new philosophy, which comes mainly with Joomla 4, is the attempt to use as few additional extensions as possible and to use more of Joomla's core features.
2. Following this philosophy, the Joomla articles can be the items of the slider. If, for example, we have a category of articles about news, these articles can be displayed in a slider easier and faster and by clicking the images of the slider the full articles will display.
3. The administrator does not need to learn one more component but can use the already known fields and features of the articles.

Ιnstallation

The installation steps for Joomla 4 and 5 are:

1. Download Pop Image Slider version 5.0.0.
2. In the Home Dashboard of the Joomla administration select "System" and then in the "Install" section select "Extensions".
3. In the Upload Package File section, click Browse for file and locate the file "pop-image-slider-5.0.0.zip".
4. Congratulations, the extension is installed.

Image configuration

One article represents one image in the slider. In order to add, for example, 15 images in the slider, we need to create 15 articles. All these articles must belong to a category and no other articles should belong to that category. This category will be selected later on the module in order to fill the slider with images.

The characteristics of the article correspond to the characteristics of the slider as follows:

• The "Title" of the article is the title of the image.
• The "Content" of the article is the description of the image.
• The "Intro Image" of the article is the main image that will appear in the slider.
• The "Full Article Image" of the article is the secondary image that will appear in the slider.
  The secondary image appears:
  • a) when the cursor is over the main image and the "Secondary Images" option is enabled and/or
  • b) in a modal/new window if the "Links" option is enabled and the "Links Source" is set to "Full Article Image".
• The title, publish date, creation date and custom ordering of the articles can be used for ordering the images in the slider.
• The full article, the intro image, the full article image and the links A, B and C can be used to open as links of the images in the slider.
• The featured articles can be included or excluded in the slider.

Don't forget to always optimize your images before you upload them to the website by using tools like TinyPNG or Squoosh.

Module configuration

The Pop Image Slider module includes 72 fields just for configuring the slider to your needs. These options are grouped in the following 7 groups: Articles, Images, Titles, Descriptions, Links, Buttons, Slider.

Below you can see all the module fields with their explanation and the available options:

• Articles
  • Articles Category
    Description:Select the category containing the articles to be included in the slider.
    Values: Any category.
  • Articles Sort
    Explanation: Select the way the images of the articles will be sorted in the slider.
    Values: Title - Ascending, Title - Descending, Created - Ascending, Created - Descending, Publish Up - Ascending, Publish Up - Descending, Ordering - Ascending, Ordering - Descending, Random.
  • Articles Maximum Number
    Explanation: The maximum number of the article images to be displayed in the slider.
    Values: An integer number.
  • Featured Articles
    Explanation: Set if the featured articles will be included. Select 'Yes' to include the featured articles together with the normal articles. Select 'No' to not the include featured articles and include only the normal articles. Select 'Only' to include only the featured artiles and exclude the normal articles.
    Values: Yes, No, Only.
• Images
  • Images Height on XXL Screens
    Explanation: Set the height in pixels of each image when the slider is displayed on extra extra large screens (greater or equal to 1400 pixels).
    Values: An integer number.
  • Images Height on XL Screens
    Explanation: Set the height in pixels of each image when the slider is displayed on extra large screens (greater or equal to 1200 pixels and smaller than 1400 pixels).
    Values: An integer number.
  • Images Height on L Screens
    Explanation: Set the height in pixels of each image when the slider is displayed on large screens (greater or equal to 992 pixels and smaller than 1200 pixels).
    Values: An integer number.
  • Images Height on M Screens
    Explanation: Set the height in pixels of each image when the slider is displayed on medium screens (greater or equal to 768 pixels and smaller than 992 pixels).
    Values: An integer number.
  • Images Height on S Screens
    Explanation: Set the height in pixels of each image when the slider is displayed on small screens (greater or equal to 576 pixels and smaller than 768 pixels).
    Values: An integer number.
  • Images Height on XS Screens
    Explanation: Set the height in pixels of each image when the slider is displayed on extra small screens (smaller than 576 pixels).
    Values: An integer number.
  • Images Magnification
    Explanation: Set the percent magnification of the images when the cursor is over them. Left edge means no magnification and right edge means 50% magnification.
    Values: From 0% to 50% with a step of 5%.
  • Images Space
    Explanation: Set the space between the images in the slider.
    Values: An integer number.
  • Images Background Color
    Explanation: Set the background color of the images. This is only useful when using images with trasnparency. Also, if you apply border on the images, it is recommended to use the same color here as the border.
    Values: An RGB color.
  • Images Border Width
    Explanation: Set the border width in pixels of each image in the slider.
    Values: An integer number.
  • Images Border Color
    Explanation: Set the border color of each image in the slider.
    Values: An RGB color.
  • Images Border Style
    Explanation: Set the border style of each image in the slider.
    Values: Dashed, Dotted, Double, Groove, Outset, Revert, Ridge, Solid
  • Images Rounded Corners
    Explanation: Set the size in pixels of the rounded corners of each image in the slider.
    Values: An integer number.
  • Images Shadow
    Explanation: Set the image shadow of each image in the slider. Left edge of the range means no shadow and right edge of the range means large shadow. This will add space around each image equal to the shadow size. If you use the shadow, probably you would like to remove the space between the images in the 'Images Space' parameter.
  • Images Filters on Mouse Out
    Explanation: Select the filters to apply to the images when the mouse is not over them.
    Values: Blur, Dark, Grayscale, Sepia.
  • Images Filters on Mouse Over
    Explanation: Select the filters to apply to the images when the mouse is over them.
    Values: Blur, Dark, Grayscale, Sepia.
  • Images Lazy Loading
    Explanation: This enables the browser native lazy loading of the images. Lazy loading can also be enabled through a third extension.
    Values: Yes, No.
  • Images Decoding
    Explanation: This allows images to be uploaded synchronously or asynchronously with the rest of the content.
    Values: Auto, Synchronously, Asynchronously.
  • Secondary Images
    Explanation: The full article image will show up, taking the place of the intro image, when the mouse is over.
    Values: Yes, No.
• Titles
  • Enable Titles
    Explanation: Set if the titles of the aricles will be displayed as titles of the images.
    Values: Yes, No.
  • Titles Size
    Explanation: Set the size in pixels of the titles of the images.
    Values: An integer number.
  • Titles Color
    Explanation: Set the color of the titles of the images.
    Values: An RGB color.
  • Titles Weight
    Explanation: Set the weight of the titles of the images.
    Values: Normal, Bold, 100, 200, 300, 400, 500, 600, 700, 800, 900.
  • Titles Transform
    Explanation: Transform the text case of the titles.
    Values: None, Lowercase, Uppercase.
  • Titles Align
    Explanation: Set the alignment of the titles of the images.
    Values: Center, Left, Right.
  • Titles Visible on Screens
    Explanation: Set on which screen sizes the titles will be visible.
    Values: XXL, XL, L, M, S, XS.
• Descriptions
  • Enable Descriptions
    Explanation: Set if the article texts will be displayed as descriptions of the images.
    Valus: Yes, No.
  • Descriptions Size
    Explanation: Set the size in pixels of the descriptions of the images.
    Values: An integer number.
  • Descriptions Color
    Explanation: Set the color of the descriptions of the images.
    Values: An RGB color.
  • Descriptions Weight
    Explanation: Set the weight of the descriptions of the images.
    Values: Normal, Bold, 100, 200, 300, 400, 500, 600, 700, 800, 900.
  • Descriptions Align
    Explanation: Set the alignment of the descriptions of the images.
    Values: Center, Left, Right.
  • Descriptions Transform
    Explanation: Transform the text case of the descriptions.
    Values: None, Lowercase, Uppercase.
  • Descriptions Visible on Screens
    Explanation: Set on which screen sizes the titles will be visible.
    Values: XXL, XL, L, M, S, XS.
• Links
  • Enable Links
    Explanation: Set if the images will be links.
    Values: Yes, No.
  • Links Source
    Explanation: The source of the link.
    Values: Article, Intro Image, Full Text Image, Link A, Link B, Link C.
  • Links Target
    Explanation: Set how the links will open.
    Values: Modal Window, Same Window, New Window.
  • Modal Max Width
    Explanation: Set the maximum width in pixels for the modal window. Set it to zero for no limit.
    Values: An integer number.
  • Modal Max Height
    Explanation: Set the maximum height in pixels for the modal window. Set it to zero for no limit.
    Values: An integer number.
• Buttons
  • Show Buttons
    Explanation: Set if the left and right buttons will be displayed.
    Values: Yes, No.
  • Buttons Background Color
    Explanation: Set the background color of the left and right buttons.
    Values: An RGB color.
  • Buttons Arrow Color
    Explanation: Set the arrow color of the left and right buttons.
    Values: An RGB color.
• Slider
  • Slider Background Color
    Explanation: Set the background color of the slider.
    Values: An RGB color.
  • Slider Rounded Corners
    Explanation: Set the size in pixels of the rounded corners of the slider.
    Values: An integer number.
  • Slider Top Padding
    Explanation: This is the minimum padding in pixels at the top side of the slider. The top padding can be bigger than this value depending on the image magnification.
    Values: An integer number.
  • Slider Bottom Padding
    Explanation: This is the minimum padding in pixels at the bottom side of the slider.
    Values: An integer number.
  • Slider Left Padding
    Explanation: This is the minimum padding in pixels at the left side of the slider. This is useful for adjusting the first image in the slider when magnified. The left padding can be bigger than this value depending on the first image magnification.
    Values: An integer number.
  • Slider Right Padding
    Explanation: This is the minimum padding in pixels at the right side of the slider. This is useful for adjusting the last image in the slider when magnified. The right padding can be bigger than this value depending on the last image magnification.
    Values: An integer number.
  • Slider Scrollbar
    Explanation: Show scrollbar at the bottom of the slider.
    Values: Yes, No.
  • Slider Speed
    Explanation: Set the speed of the images going left and right on mouse movement. Left edge means slow and right side means fast.
    Values: A value of a range.
  • Slider Rewind
    Explanation: Clicking the right button when on last image will slide to the first image and clicking the left button when on first image will slide to the last image. The rewind mode is working when using the buttons, the drag and the autoplay but it doesn't work when using the mouse.
    Values: Yes, No.
  • Initial Position
    Explanation: Set the position of the images in the slider.
    Values: Left, Center, Right.
  • Auto Play
    Explanation: Set if the slider will slide automatically.
    Values: Yes, No.
  • Slider Auto Play Delay
    Explanation: Set the delay in seconds between the transitions.
    Values: An integer number.
  • Disable Slider Auto Play On Interaction
    Explanation: The slider will not play automatically after the user has interacted with it.
    Values: Yes, No.

Demo settings

In order to configure the slider to be like one of the four demos please use the corresponding image showing the configuration of the module.

• Demo 1 - Simple - Settings (image height: 200 pixels)
• Demo 2 - Blue - Settings (image height: 200 pixels)
• Demo 3 - Persons - Settings (image width: 124pixels,  image height: 124pixels)
• Demo 4 - Clothes - Settings (image width: 300 pixels, image height: 400 pixels)

Auto update

In order to be able to easily update the extension through the update system of Joomla, you need:

• Your membership ID. This can be found in the email you received with the subscription information of this extension or in your profile in this website.
• An active subscription of this extension. You can see your subscriptions in your profile as well.

Having the above fullfilled, do the following on Joomla 4 or 5:

• Select "System".
• Select "Plugins" in the "Manage" section.
• Locate in the list the line with name "Installer - Pop Image Slider" where the column 'Type' is equal to 'Installer' and click to it.
• Fill in your membership ID in the parameters, enable the plugin and save.

Now you will be able to update the extension through the Joomla update system. But if you want, you can do it manually by downloading the latest version from this website.

Links

Pop Image Slider allows the images to be links to images, articles, Youtube and URLs. These links can open in the same window, new window or modal window.

Secondary images

Pop Image Slider allows the images to change by showing a secondary image when the cursor is over them.

Compatibility with previous versions

Version 3.2.x or later does not support Phoca Gallery and K2.

Version 3.2.x or later is not compatible with the old version 3.1.x. The update from PIS 3.1.x to PIS 3.2.x or newer is not alowed. You need to completely uninstall 3.1.x first and then install 3.2.x or newer. But uninstalling the old 3.1.x version means that the image setup of the sliders, though the component, will be lost. So if you want to keep them, you have to "copy" the slides created in the old PIS component as Joomla articles.

Uninstall from Joomla

1. Select "System".
2. Select "Extensions" in the "Manage" section.
3. Locate in the list the line with name "Pop Image Slider" where the column 'Type' is equal to 'Package'.
4. Check the line and click "Uninstall". This will uninstall completely the extension.

• Extension version: 5.0.0
• Extension type: Module
• Extension technologies: PHP, vanilla Javascript
• Compatible image types: jpg, gif, png, webp
• Compatible Joomla version: 4.x and 5.x
• Compatible browsers: Chrome, Firefox, Opera, Edge, Safari 

• 5.0.0:
  • Compatible with Joomla 4 and Joomla 5 only. Not compatible with Joomla 3.
  • Update of the library for the slider.
  • Fix of minor incompatibilities.
• 3.2.0 / 4.0.0:
  • Compatible with Joomla 3 and Joomla 4.
  • Rewritten code using the new features of Joomla 4.
  • Better responsive and mobile friendly behaviour with multiple options.
  • Available as module. Use of articles, instead of component extension, in order to define the images.
  • No jQuery or Bootstrap needed.
  • Inline title and description per image.
  • More sliding possibilities.
  • Image loading performance.
  • Accessibility (a11y).
  • No support for K2 and Phoca Gallery.
• 3.1.2:
  • Fix of cross-origin limitation between http and https.
• 3.1.1:
  • Fix of warning message in component administration.
• 3.1.0:
  • Auto update support.
  • Update of lightbox (PrettyPhoto).
  • Update in the administration.
• 3.0.5:
  • Fix about SEO to the urls of the images created from K2.
• 3.0.4:
  • Small fix to the url of the secondary image on front-end.
  • Small fix to the images grouping on back-end.
  • Other small fixes on front-end (lightbox, magnification).
• 3.0.3:
  • Fix to the module parameter "Content Only".
• 3.0.2:
  • Support for RTL direction.
• 3.0.1:
  • 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.
• 3.0.0:
  • Available as component and module.
  • Rewritten Javascript code using jQuery.
  • 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.
• 2.0.2:
  • Bug fix for IE8.
• 2.0.1:
  • Valid as XHTML 1.0 Transitional.
• 2.0.0:
  • 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.
• 1.1.7:
  • Auto slide is deactivated when mouse is over the buttons for manual sliding.
• 1.1.6:
  • Fix: Flash video (flv) and mp3 are working with SEF urls.
• 1.1.5:
  • 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.
• 1.1.4:
  • Automatic slide support.
• 1.1.3:
  • 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.
• 1.1.2:
  • 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.
• 1.1.1:
  • Improvement in movement and effects of images.
• 1.1.0:
  • The Mootools technology is used for the image effects instead of the Flash technology.
• 1.0.0:
  • First release of the Pop Image Slider module.