- Category: Modules
- Last Updated: Friday, 14 February 2014 19:05
- Published: Friday, 25 January 2013 17:27
- Hits: 533
User's guide for
JProPhotoSlidesPlus module, allows you to display slideshows of photos or images containing information to your users/customers, with responsive html, on the front-end of your website. It's Joomla!™ R3ADY!
|previous versions:||1.3.0 > 3.0.2|
|included in package:||n/a|
|release date:||January 2013|
|updated on:||November 07, 2013|
|min. requirements:||Joomla!™ 3+
Gantry framework ready
Listed on Joomla!™ official Extensions Directory here.
What is JProPhotoSlidesPlus
JProPhotoSlidesPlus module allows you to display slideshows of photos or images containing information to your users/customers, with responsive html, on the front-end of the website. It's Joomla!™ R3ADY!
JProPhotoSlidesPlus is an advanced version of the free JProPhotoSlides module and is loaded with an additional set of configurable options. JProPhotoSlidesPlus is highly customizable, and has the ability to be cloned and displayed several times in the same page, allowing this module to server different purposes and with different pre-defined styles.
The latest version includes now several important features to know:
- Keyboard navigation (previous/next) in the front-end;
- Slide or Fade images with advanced CSS3 and jQuery;
- A special unobtrusive modal that put the images in a 3D like display;
- Faster rendering of the content with several enhancements in the business logic of the extension.
- In the back-end, a completely new redesigned interface, allows you to configure JProPhotoSlidesPlus with fun and intuitively.
- No guessing, as the system validates most of the fields and most of them are now HTML5 fields.
- The new administration system is also faster, lightweight and user friendly.
Installation, updates and upgrades
How to install the JProPhotoSlidesPlus module
The installation process is the standard Joomla!™ installation procedure and no special requirements are needed to perform a successful module installation. During the installation, the system automatically creates a directory - "photoslidesplus" inside your default Joomla!™ images folder, with a few sample images, and from here you can use this "photoslidesplus" or any other directory inside your images folder. This new feature allows you a better control over the images you wish to display, by using your Joomla!™ media manager.
Configuring the backend options
JProPhotoSlidesPlus allows you to perform basic and advanced configurations on your Joomla!™ modules administration area.
There are three main tabs in the configuration area - Details | Options | Menu assignment. JProPhotoSlides installs with the most common parameters set as default, but if you want or need to customize the module, the options and their meanings are described below.
In the Details tab you have, basically, the standard Joomla!™ module options:
- Updates information - On the right side, the extension version and available updates are displayed. The system automatically searches for new releases, and if found, a button with the Download link appears.
- On the top navigation bar, you'll find the "Help" button that opens inside a modal window, the latest version of this document.
- Title - The module title;
- Show title - Select if you wish to show the module title. Options are Show and Hide;
- Position - Very important this option is where you set the module position in your template. Do not forget to set this option or your module will not be visible in the front end;
- Status - Select the publishing status of your module - Published, Unpublished and Trashed;
- Access - Select the access level, i.e., which groups can view the module. Default is Public;
- Ordering - Select the module ordering related to the template position;
- Start publishing - Very useful option that may allow you to schedule the module to display on a specific day and time;
- Finish publishing - Very useful option that may allow you to schedule the module to be hidden on a specific day and time;
- Language - Select the language you wish to use in case you have a translated file;
- Note - You can add a note to your module for your reference in the administration area;
The Options tab is subdivided in four easy usage accordion tabs - Basic Options | Photo Captions and Links | Controls & Styles | Advanced Options with the main functional and cosmetic configuration settings as described bellow.
- Source folder - Select from the drop-down, the folder where the images are located in you images directory. Default is the "photoslidesplus" directory inside your images folder;
- Transitions speed - 3000 is the default. The higher the value, the slower the transition (1000 = 1 second);
- Transition - Select to slide or fade the photos. Default is Slide;
- Transition easing - elect the photos transition (css based). Default is Ease-In-Out;
- Hover pause - Select if slideshow should pause on mouse over. Default is Yes;
- Max. photos to show - Enter the maximum number of photos to include. Min is 2, max is 30 and default is 5;
- Module style - Select a style for your JProPhotoSlidesPlus module. Default is Shadow. Simple is the most basic. You can also set your style in the Advanced Options tab in Page Class Suffix;
- Dimensions unit - Pixel or Percentage as the unit for the photos/module dimensions. Note: Selecting the width in pixels may produce undesired results in responsive layouts. For responsive layouts, use Percentage as unit. Default is Percent;
- Overall width - You may select (force) a maximum width for the module, although it is not recommended if you're using a responsive template.;
- Overall height - You may select (force) a maximum height for the module, although it is not recommended if you're using a responsive template.;
- Display/selection ordering - Select random for Random selection of images from directory, else, selection will be natural ascending from directory
- Note: From version 3.0.0 onwards, the available captions are now synchronized with the images, even in random display.
- If you want to use the module heading and captions (by typing in the data in the Advanced Options area) for each image, leave this setting as "Normal";
- Pre text - Text or images or both to be displayed before the module body (html allowed);
- Pos text - Text or images or both to be displayed after the module body (html allowed);
- Use minified script - Select Yes to use the minified version of the module jQuery plugin. Increases speed and security. Default is Yes;
- Use css updates - Select Yes to use the css update files. When updating the module, your previous original css will be ket untouched. Default is No;
- Hide link - Allows you to hide the tiny little small link that links to JPro Extensions website. Thank you if you let it be here!;
Photo Captions and Links:
- Links target - Select the target for the links from the following options: No Links, Same window, _blank, _parent, Top, Fancy Modal, Modal). The Modal link allows you to zoom the image or, if Global link is set, to open a website or page. The Fancy Modal is a nice way to use an unobtrusive modal style to comfortably browse the images. Default is Modal;
- Modal width - You can override the default modal dimensions, in this case, the maximum width. Default is 767px;
- Modal width - You can override the default modal dimensions, in this case, the maximum height. Default is 500px;
- Use Global link - If you wish to link all images to the same link, for instance a page on your website, choose this setting. This will override all individual links;
- Show captions - Select yes to show the Captions and Headings. This option dynamically provides a intuitive way to know how to correctly use this system. Default is Yes;
- Use image metadata - Select yes to read image metadata and display as heading and caption, or No to use the additional fields or none if left empty.Note: Only JPEG/Exif, TIFF, JPEG2000 or Portable Network Graphics (png) file formats support IPTC metadata.;
- Photo headings - You can write headings for up to 10 images;
- Photo captions - - You can write captions for up to 10 images;
- Links - Enter a url to link the image to another page or website. Note: If you need to link to an external content, link must start with http://. These are individual links.
Controls and Styles:
- Prev/Next controls - Allows you to disable or enable the Prev < and Next > slider controls;
- Show Indicators - Select Yes to use the sequence indicators links below the slides (little rounded links). Default is Show;
- Indicator normal - Set the color for the rounded indicators links in normal state mode. Default is #0f0f0f;
- Indicator active - Set the color for the rounded indicators links in active state mode. Default is #1e1e1e;
- Indicator normal (modal) - Set the color for the rounded indicators links in normal state mode for the modal. Default is transparent;
- Indicator active (modal) - Set the color for the rounded indicators links in active state mode for the modal. Defaults is #ffffff;
- Captions control button - Default is Yes, to display the Show/Hide captions link in the module footer. Select No if you want to always show the captions;
- Button style - You may select from 6 different styles for the captions control button, or None and display a normal link if the above setting is set to Yes.;
- Button size - You may select from 6 different sizes (from large to micro) for the captions control button, or None and display a normal button size;
- Button block style - You may select to display a normal auto width button or the block button (100% module width) for the captions control button;
- Link color - You may use the color-picker to set the button/link text color;
- Headline size - Allows you to select the headline text size in the captions div;
- Headline font color - You may use the color-picker to set the headline text color;
- Captions font color - You may use the color-picker to set the captions text color;
- Photos style - This option allows you to use some fancy corners - options are: normal square, rounded corners and Circle image (heavy rounded corners;
- Color / Black & White photos - This option allows you to display your images in black & white without needing to convert them previously. Note: this option might not work in all browsers;
- Caption div style - You can define here additional styling for the captions div. Default is normal style;
- Module class Suffix - Optionally add a css class to be added to the module style;
- Module tag - The html tag for the module. This is a Joomla!T default setting;
- Bootstrap size - Specify how many columns the module will use on your template. This is a Joomla!T default setting;
- Header tag - The html header tag for the module title. This is a Joomla!T default setting;
- Header class - The css class for the module header title. This is a Joomla!T default setting;
- Module style - You can override the default template overall modules styles. This is a Joomla!T default setting. This is not the JProPhotoSlidesPlus module style setting;
In the Menu Assignment tab you have the following module specific options:
- Module assignment - Select where and which pages/menus the module will be visible (assigned);
- Menu selection - Select the menus the module will be visible (assigned);
Rendering JProPhotoSlidesPlus in your front-end Joomla!™ site
After configuring the backend options, including the basic menu assignment, position, and publishing it, the JProPhotoSlidesPlus module will automatically render on the pages and positions selected, so there's no need to do any other configurations. It's ready to use!
Duplicating the JProPhotoSlidesPlus module
The JProPhotoSlidesPlus module can be duplicated (cloned) if you need and want to display more than one slideshow module on each page.
Tips & Tricks
A few simple tips and tricks
Overriding language tags
To override language tags, you can follow Joomla!™ language overriding instruction or, more easily, just use the new Language Overriding component in your Joomla!™ administration.
Overriding the module
Just in case you want to change the look and feel of the JProPhotoSlidesPlus module, it is highly recommended that you do an override of the default view to your template, so that in case of any updates, you'll not loose your personal settings/code/markup. To do this, follow the following steps:
1. create a directory with the module name in your default template html directory (the path should look like the following - yoursite/templates/your_template/html/mod_jprophotoslidesplus/.
2. copy the two files - default.php and index.html, inside the mod_jprophotoslidesplus tmpl directory to the directory you've created in your template (you should have now those two files inside the yoursite/templates/your_template/html/mod_jprophotoslidesplus/). Don't copy the tmpl directory. This is just to be used by the platform in the modules directory and not inside the templates html!
3. Now that you have the default.php file, you can do your templating on this file, without affecting the core one.
- any templating might change the module behavior, so test it before you take it live. In case something goes wrong, you can still copy the original file again and start over.
- JProPhotoSlidesPlus module is packed with sample images and you agree that those images are to be used solely for main installation and preview, and not to be used in your final module rendering, nor in any other medium.
Please read the LICENSE.TXT that ships with the JProPhotoSlidesPlus module package
The module ships with the default English (en-GB) translation files that are located in the following directory in your Joomla!™ website:
You can check our GitHub page and see if there are already other community translations for the component and the language you want. If not, you can create your own following Joomla!™ translation guidelines that you can read here.
Then, if you wish, you can contribute to the community and fork our translations repository from GitHub and make a pull request.