Pop Image Slider v.3.1.1

Impressive image viewer extension for Joomla! 3.

Many appearance parameters, multiple instances per page, unlimited uses to unlimited websites/domains.

Joomla! 3.x Component + Module

Pop Image Slider Sample

LIVE DEMO    BUY

Pop Image Slider provides an impressive and interactive way to view images. The images slide left and right according to the cursor movement and when cursor is over an image, the image is magnified. The images are also links to urls specified by you. These links may open using the lightbox effect or in parent or blank window. Also the links may refer to web pages or file types such as image, video, sound, flash.

Now there is no need to edit images in order to style them. Styles like border, shadow, rounded corners, gap between images can be achieved though the module parameters.

The height and the width of the images, in normal and zoomed state, are automatically calculated based only on two parameters: a) the height in normal state and b) the percentage of the magnification.

The users of the extension asked for more features (like Phoca Gallery support, image swap on mouse over, endless sliding etc.) and now these features are supported.

Pop Image Slider v.3.1.1 has more features and improvements!

  • Rewritten code and better performance.
  • Responsive design.
  • Available as component and module.
  • jQuery support.
  • In cooperation with Phoca Gallery and K2 extensions.
  • Multiple instances per page.
  • Images can have different width.
  • New lightbox version with many themes.
  • Endless sliding.
  • Image swap on mouse over.
  • Title and description per image.
  • Styled tooltips.
  • Support for RTL direction.
  • Better administration.
  • More parameters.
  • CSS3 features.
  • Even better motion and effects.
  • Demo of Pop Image Slider
  • Buy Pop Image Slider
  • Documentation of Pop Image Slider
  • Technical Information of Pop Image Slider
  • Change Log of Pop Image Slider

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

Demo 1 Demo 2 Demo 3 Demo 4 Demo 5

Read More

You don't have any active subscription.

  • Pop Image Slider

    Pop Image Slider

    Select this subscription in order to download Pop Image Slider.
    18€ 6 months of access to download. Unlimited installations. Support for a single website.
  • 1

Subscription Instructions

In order to download the extension you have to subscribe to the above subscription. The subscription process requires from you:

  1. To create an account or to login using an existing one if you already have.
  2. To be redirected to PayPal for the payment.

After you return to this website from PayPal, you will be already logged in and you will receive an email with information about your subscription.

Being logged in with your account you will be able to download the extension a) through the page of the extension or in the 'Downloads' area or from your account by selecting 'My Downloads'.

As long as the subscription is active, you will be able to log in and download any possible updates of the extension from this website.

Read More

Ι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.
Read More
  • Extension version: 3.1.1
  • Extension type: Component, Module
  • Extension technologies: PHP, jQuery
  • Compatible image types: jpg, gif, png
  • Compatible Joomla version: 3.1.5 or later
  • Compatible browsers: Chrome, Firefox, Opera, Edge, IE10, IE9, Safari

 

New Pop Image Slider v.3.1.1 available as component and module.

The configuration is more easy now. The component is responsible to create the collection of the images with their links, titles and descriptions. The module is responsible to configure the operation and styling of the slider.

Pop Image Slider is already configured to work with sample images. What you only have to do after the installation is to enable the module and you will be able to see it in action.

Pop Image Slider is using prettyPhoto.
prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It’s a full blown media lightbox.

Read More
  • 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.
Read More