extensions development for Joomla!™

 

JProEasySliders

User's guide for

JProEasySliders

JProEasySliders allows you to render responsive easy and beautifully simple sliders system on your Joomla!™ 3 website. The module auto fits even on mobile devices, without loosing any functionality and can be integrated inside your Joomla!™ articles*!

extension name: JProEasySliders
current version: 3.0.0
previous versions: 1.3.0
languages: en-GB
included in package: n/a
demos: demo one,
type: module
release date: January 2012
updated on: August 04, 2013
compatibility: Joomla!™ 3 R3EADY!
min. requirements: Joomla!™ 3+
bootstrap framework
Gantry framework ready
download : JProEasySliders
 

Listed on Joomla!™ official Extensions Directory here.

 

Introduction

What is JProEasySliders

JProEasySliders is a Joomla!™ 3+ R3EADY! module

JProEasySliders allows you to render responsive easy and beautifully simple sliders system on your Joomla!™ 3 website. The module auto fits even on mobile devices, without loosing any functionality and can be integrated inside your Joomla!™ articles*!

JProEasySliders is prepared to display up to 30 sliders with full html content. Using the sliders id's, it can be used for alphabetic or numeric listings. Specifically developed to work on Joomla!™ 3 with twitter Bootstrap framework. JProEasySliders is packed with a myriad of options that can be set on your Joomla!™ 3 back-end, allowing you the freedom to customize your module.

Installation, updates and upgrades

How to install the JProEasySliders module

The installation process is the standard Joomla!™ installation procedure and no special requirements are needed to perform a successful module installation.

Administration

Configuring the backend options

JProEasySliders allows you to perform basic and advanced configuration on your Joomla!™ modules administration area.

There are eight configuration tabs:
Details | Basic options | Sliders content 1 | Sliders content 2 | Sliders content 3 | Advanced styling | Advanced options | Menu assignment. Although there's only need to configure the basics (and adding your sliders content...) and important Menu assignment and module position (as in any other Joomla!™ module), you may want to do other configurations and every configurable option has a description of it, as you hover your mouse over the field label.

In the Details tab you have the following module specific options:

  • Status - If published, this module will display on your site frontend or backend depending on the module.
  • Title - The module title.
  • Show title- Show/Hide module title on display. Effect will depend on the chrome style in the template.
  • Position- You may select a module position from the modal display of pre-defined positions where you can filter by type and template, or enter your own module position by typing the name in the field and Save.
  • Access - The access level group that is allowed to view this module.
  • Ordering - The module ordering in relation to other modules in the same position.
  • Start publishing - An optional date to Start Publishing the module.
  • Finish publishing - An optional date to Finish Publishing the module.
  • Language - Language that ca be assigned to the module.
  • Note - An optional note to display in module list.

In the Basic Options tab you have the following module specific options:

  • Max. sliders - Select how many sliders you wish to use (maximum is 30, minimum is 1). If you wish to use random sliders, leave this setting at 30. Default is 30.
  • Use thumbnail - Use this field to add a thumbnail before the heading of each slider.
  • Thumbnail width - If using a thumbnail on the slider heading, you may define here the maximum width in pixels. Default is 36 (pixels).
  • Slider offset - Select which slider should be auto opened. Default is 0 (first slider panel)
  • Start transition - Select how the transition should be handled. No, means no transition start, Yes means that the transition will start for the default active slider. Default is Yes.
  • Transition duration - Select the transition duration in milliseconds. Default is 300 (milliseconds).
  • Use cookie - Select if you wish to use cookie. If Yes, the sliders will open in the last position registered. Default is No.
  • Opacity transition - Select if you wish to enable the opacity transition between sliders. Default is Yes.
  • Allow all close - Select if you wish to allow all the sliders to be in the closed state (note: this option is still pending a bug fix in Joomla!™ platform). Default is No.
  • Pre text - Text to be displayed before the module body.
  • Pos text - Text to be displayed after the module body.
  • Hide JPro Extensions link - Set Yes to hide the JPro Extensions link (target new window). Thank you if you decide to keep it visible. Default is Show.

In the Sliders content 1,2 and 3 tabs you have the following options:

  • Slide 1* thumbnail - Use this field to add a thumbnail before the heading of each slider.
    * the number here corresponds to the slider order, and it ranges from 1 to 30.
  • Slide 1(A)* Heading - Type the text that will be use as the heading or link to open the slider.
    * the number here corresponds to the slider order and the letter is its equivalent alphabet position, and it ranges from 1 to 30 and A to z plus AA, BB, CC and DD.
  • Slider 1* Content - Use the editor in this area to type the inner content (body) of each slider. You can add html content here.
    * the number here corresponds to the slider order, and it ranges from 1 to 30.
    TIPs:
    - to add modal behavior to images, add the class "modal" in your editor or in the source code add class="modal" to the image and link. Example:
<a href="/images/your_image.jpg" class="modal">
<img src="/images/your_image.jpg"/>
</a>

- to add tooltip behavior to images and/or text, add the class "hasTooltip" in your editor or in the source code add class="hasTooltip" and title="Your tooltip text" to the image or text. Example:

<span class="hasTooltip" title="Your text goes here">the text<span>
<img src="/images/your_image.jpg" class="hasTooltip" title="Your image text"/>

 

In the Advanced Styling tab you have the following options:

  • Use css updates - Select Yes to use the updates css file(s) and leave your custom css file untouched. Default is No.
  • Heading font size - You may customize the font size of the heading text. Default is 18 (pixels).
  • Heading text color - Use the color picker field to style the non active slider's tabs headings. By default it will assume your template color for the tag used or #0088CC.
  • Active heading text color - Use the color picker field to style the active (the one selected) slider's tabs headings. By default it will assume your template color for the tag used or #408df7.
  • Frame border color - Use the color picker to select the border color for the frame style. Default is #b1bafc.
  • Tab background color - Use the color picker to override the tab background color. Default is white (#FFFFFF)
  • Sliders pane background color - Use the color picker to override the sliders pane background color. Default is white (#FFFFFF)
  • Main panels background color - Use the color picker to override the sliders main panels (where the content is rendered) background color. Default is white (#FFFFFF)
  • Add class thumbnail - This is a very useful feature if you add images to the slider content that need to be dynamically resized for responsive templates. Set No if you do not want to use this feature. Default is yes.
  • Show slider id - Select if you want to show the ordering/indexing on the right side of each slider header. Choose between Don't show, Show Numbers, Show Letter or Show Letter in Uppercase. Default is Letter Uppercase.
    TIPs: This option allows you to identify or index each tab and if you skip, for instance tab 2, by adding content to tabs 1 and 3 the system will skip the tab 2. This results in the tabs in the front end to be displayed 1, 3 (...). So tab 2 will be skipped. Imagine you have an alphabetical listing but not all letters have content. You'll only render the tabs that actually have content.
  • Outer frame borders - Optionally you may control here the outer frame of the sliders, and override the stylesheet. Default is Rounded.
  • Inner frame style - Optionally you may control here the inner frame of the sliders, and override the stylesheet. Default is Normal.

In the Advanced Options tab you have the following module specific options:

  • Alternative layout - Use a different layout from the supplied module or overrides in the templates.
  • Module class Suffix - A suffix to be applied to the CSS class of the module. This allows for individual module styling.
  • Caching - Select whether to cache the content of this module.
  • Cache time - The time before the module is reached.
  • Module tag - The HTML tag for module
  • Bootstrap size - An option to specify how many columns the module will use.
  • Header tag - The HTML tag for module header/title.
  • Header class - The CSS class for module header/title.
  • Module style - Use this option to override the template style for it's position.

In the Menu assignment tab you have the following module specific options:

  • Module assignment - Set where the module will be rendered.
  • Menu selection - Set the specific menu items that will trigger the module to be displayed.

Front-end

Rendering JProEasySliders in your front-end Joomla!™ site

After configuring the backend options, including the basic menu assignment, position, and publishing it, the JProEasySliders 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/Cloning the JProEasySliders module

The JProEasySliders module can be duplicated. A very useful feature if you want to add multiple and different sliders sets to your content.

Tips & Tricks

A few simple tips and tricks

* To add sliders inside your articles, you need to have installed the JProLoadModArticles plugin. This way, you'll be able to build sliders and add them inside your articles.

License

Please read the LICENSE.TXT that ships with the JProEasySliders module package

Miscellaneous

None

 

Translations

The module ships with the default English (en-GB) translation files that are located in the following directory in your Joomla!™ website:

  • /language/en-GB/

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.

 

Related Information


Shopping cart

The cart is empty
Extension added to cart! x
Back to Top