Documentation of Pop Image Slider

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?

The older version 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:

A new philosophy, which comes mainly with Joomla 4, is to try to use for a new feature as few components, modules and plugins as possible and to rely more on the basic features of Joomla.
With this method, the real / existing articles of a category (e.g. news) can be displayed in a slider easier and faster and by clicking the images of the slider the full articles will display.
The administrator does not need to learn one more component but can use the already known fields and characteristics of the articles.

Ιnstallation

Joomla 3

Download Pop Image Slider version 3.2.0.
In the Control Panel of the Joomla administration select: "Extensions" > "Extension Manager".
In the Upload Package File section click Browse for file and locate the file "pop-image-slider-3.2.0-j3.zip".
Congratulations, the extension is installed.

Joomla 4

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

See the installation in YouTube

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.

See the image configuration in YouTube

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.

See the module configuration in YouTube

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:

Joomla 3:
1. Select "Extensions > Plugins".
2. Locate in the list the line with name "Installer - Pop Image Slider" where the column 'Type' is equal to 'Installer' and click to it.
3. Fill in your membership ID in the parameters, enable the plugin and save.
Joomla 4:
- 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.

See the auto update configuration in YouTube

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.

See how to use links in YouTube

Secondary images

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

See how to show secondary images in YouTube

Compatibility with previous versions

The new versions 3.2.x for Joomla 3 and 4.x for Joomla 4 do not support Phoca Gallery and K2.

The new version 3.2.x for Joomla 3 is not compatible with the old version 3.1.x.

In Joomla 3, the update from PIS 3.1.x to PIS 3.2.x is not alowed. You need to completely uninstall 3.1.x first and then install 3.2.x. 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 create the new image setup using the articles by copying the setup created in the PIS component.

Pop Image Slider and Joomla upgrade from 3.x to 4.x

If you use Joomla 3 then you have to install Pop Image Slider 3.2.0.

If you use Joomla 4 then you have to install Pop Image Slider 4.0.0.

You can upgrade from Joomla 3 to 4 while having Pop Image Slider 3.2.0 because the version 3.2.0 will work in Joomla 4 as well.

After you upgrade to Joomla 4, you can upgrade Pop Image Slider to version 4.0.0 because this version has some benefits that 3.2.0 doesn't have.

Uninstall from Joomla

Joomla 3:
1. Select "Extensions > Manage > Manage".
2. Locate in the list the line with name "Pop Image Slider" where the column 'Type' is equal to 'Package'.
3. Check the line and click "Uninstall". This will uninstall completely the extension.
Joomla 4:
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.

See the uninstall in YouTube