Ιnstallation

  1. Download Pop Image Slider.
  2. In the Joomla control panel select: "Extensions" > "Extension Manager".
  3. In the Upload Package File section click Browse and locate the file "pop-image-slider-3.1.1.zip".
  4. Then click Upload File & Install to upload the file and complete the installation.

Configuration

For your convenience Pop Image Slider is already parameterized to work with sample images. So, after the installation, the only thing you have to do is to go to the Pop Image Slider module and a) publish it, b) select a module position and c) assign it to a page of the menu. Save the module and check the page.

To configure Pop Image Slider and add your images, you have to use a) the component in order to create the group and add the images to it and b) the module in order to define which group and how it will show the images of this group. In particular go to the Joomla control panel and do the following:

  1. Select "Components" > "Pop Image Slider" > "Groups".
  2. Click "New", fill in the title and save.
  3. Then click to "Images".
  4. Click "New". You can do many things here. The most important is to know what the "Source" field is doing. (For more details look below at the "Parameters" section.)
    • Set "Source" = "Media" to add a single image from the Media Manager. You can define a link, title, description etc for this image.
    • Set "Source" = "Media Folder" to add all the images of a folder from the Media Manager. Notice that all these images will have the same link, title, description etc.
    • Set "Source" = "Article" to add an article to the slider as image. As image will be used the "Intro Image" of the article, as title of the image will be used the title of the article, as description of the image will be used the intro text of the article and as link of the image will be the link to this article.
    • Set "Source" = "Article Category" to add all articles of an article category to the slider as images. As images will be used the "Intro Image" for each article, as title of each image will be used the title of each article, as description of each image will be used the intro text of each article and as link of each image will be the link to each article.
    • Set "Source" = "Phoca Gallery Image (ID)" to add a single image from Phoca Gallery. As title of the image in the slider will be used the title of the image in Phoca Gallery, as description of the image in the slider will be used the description of the image in Phoca Gallery and as link of the image in the slider will be the link to this image.
    • Set "Source" = "Phoca Gallery Category" to add all the images from a category in Phoca Gallery. As title of each image in the slider will be used the title of each image in Phoca Gallery, as description of each image in the slider will be used the description of each image in Phoca Gallery and as link of each image in the slider will be the link to this image.
    • Set "Source" = "K2 Item" to add a K2 item to the slider as image. As image will be used the "Image" of the K2 item, as title of the image will be used the title of the K2 item, as description of the image will be used the (intro) text of the K2 item and as link of the image will be the link to this K2 item.
    • Set "Source" = "K2 Category" to add all the K2 items to the slider as images. As images in the slider will be used the "Image" of each K2 item, as title of each image in the slider will be used the title of each K2 item, as description of each image in the slider will be used the (intro) text of each K2 item and as link of each image will be the link to each K2 item.
  5. Then select select: Extensions > Module Manager. Locate Pop Image Slider in the list and click it.
  6. In the module configuration, the most important is to set the parameter "Images Group" and select the group you just created in step 2.
  7. Of course you have to publish the module, select a position and assign it to a menu page through the "Menu Assignment" tab.
  8. Save the module and check the page containing Pop Image Slider.

Important Notes

1. In order Pop Image Slider to work in Joomla 3.x you must have version 3.1.5 or later.

2. 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.

Screenshots of Configuration

Component

Component Parameters

Module

Module Parameters

Parameters

The Pop Image Slider component has the following parameters:

  • Source: The source from which the image will be taken.
  • Image: The image file in the Media Manager that will be added to the slider. [Can be used when "Source" = "Media"]
  • Image Folder: All the images in this folder of the Media Manager will be added to the slider. [Can be used when "Source" = "Media Folder"]
  • Article: The Joomla article from which the image will be added to the slider. [Can be used when "Source" = "Article"]
  • Article Category: The Joomla articles from which the images will be added to the slider. [Can be used when "Source" = "Article Category"]
  • Image ID: The ID of the image in Phoca Gallery to be added in the slider. [Can be used when "Source" = "Phoca Gallery Image"]
  • Category: All the images in this category of Phoca Gallery will be added to the slider. [Can be used when "Source" = "Phoca Gallery Category"]
  • K2 Item: The K2 item from which the image will be added to the slider. [Can be used when "Source" = "K2 Item"]
  • K2 Category: The images of the K2 items in this category will be added to the slider. [Can be used when "Source" = "K2 Category"]
  • Secondary Image: The image file in the Media Manager to be used as secondary image. The secondary image will be visible when mouse is over the primary image. [Can be used when "Source" = "Media"]
  • Link: An address (Url) to be followed when image is clicked. Can be an address to a different image, video, flash, web page or other site. If not defined then the same image will open as link. Fill in "#" (without the quotes) in order to disable the link for the specific image. [Can be used when "Source" = "Media" or "Source" = "Media Folder"]
  • Title: The title of the image. [Can be used when "Source" = "Media" or "Source" = "Media Folder"]
  • Description: The description of the image. [Can be used when "Source" = "Media" or "Source" = "Media Folder"]
  • Group: The group this image belongs.
  • Order: The order of the image among the other images in the group.

The Pop Image Slider module 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.x): 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.

Automatic 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:

  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.

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.

Uninstall from Joomla

  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.