JSE Horizontal Accordion Slider

From Joomseller Wiki
Jump to: navigation, search

Introduction

Purpose

This document supports Joomseller’s customers in using JSE Horizontal Accordion Slider module.

Scope

Definitions, Abbreviations and Acronyms

No.
Name
Description
1.

Joomla

The most popular Open Source Content Management System, written by PHP.

2.

Module

A type of Joomla’s extension. Modules are lightweight and flexible extensions used for page rendering.

3.

Joomseller

Joomseller Solutions is a team of smart, experienced and professional Joomla!® / PHP developers. Started 5 years ago, JoomSeller has been provided high quality extensions and become a trusted Joomla extension provider.

4.

Horizontal Accordion

A horizontal accordion is a horizontal stacked list of items (e.g. labels or thumbnails). Each item can be "expanded" or "stretched" to reveal the content associated with that item.

5.

Title

Title is the text displayed when slide is closed. Default style is H1.

6.

Caption

Caption is the text which will be displayed when slide is open.

7.

Description

General information of slide. Displays below slide.

Overview

What is JSE Horizontal Accordion Slider?

JSE Horizontal Accordion Slider is a module used to display images in accordion style. This is an excellent accordion slide from JoomSeller. Why? You can use this module to presence your gallery with Title, Caption and Description. Besides, this module allows you to use multiple links inside a slide or use the whole slide as a link.

Especially, Slide Horizontal Accordion is responsive and totally flexible. You can play the slide on mobile devices like tablet, smartphones and on any browser. With Slide Horizontal Accordion you can easily change the displaying interface to suit with your site’s design through 4 themes: Horizontal Accordion Default, Horizontal Accordion With Button, Horizontal Accordion With Control Panel, Horizontal Accordion With Title.

JSE Horizontal Accordion Slider will surely satisfy your need & can bring to your site a fascinating and unique element.

Why using JSE Horizontal Accordion Slider?

Features:

  • Support Joomla 2.5 and 3.0.
  • Responsive with beautiful design.
  • Unlimited slide with multi-upload and drag&drop to order (from version 2.1.0).
  • Gorgeous accordion effect.
  • Compatible with Tablet, Smart phone
  • Support all modern browsers (IE 7+, FireFox, Chrome, Opera, Safari…).
  • Provide various themes: Horizontal Accordion Default, Horizontal Accordion With Button, Horizontal Accordion With Control Panel, Horizontal Accordion With Title.
  • Allow multiple links: full image link and/or link inside description.
  • Flexible Configuration.
  • Support jQuery noConflict.

Screenshot

Backend

  1. Basic Options
    Mod slide horizontal accordion Basic-Option.png
  2. Slides Gallery
    Mod slide horizontal accordion-Slides-Gallery.png
  3. Advanced Options
    Mod slide horizontal accordion Advance-Options.png

Frontend

Mod slide horizontal accordion frontend.png

Configuration

JSE Horizontal Accordion Slider Installation

Requirements

Server Requirements

Our extension has several system requirements as follow:

You have to ensure that your system has already installed, XML and Zlib-Support built into your PHP.

PHP should be compiled with support for https (openSSL) and cURL.

PHP Safe Mode should be turned off.

Client Requirements

This module can run well on major browsers such as: Internet Explorer (version 7+), Firefox, Chrome, Opera 9+, and Safari. JavaScript must be activated

Installation

Download

After purchased our product, you’ll see the download link at Slide Horizontal Accordion product page:

Joomseller – Slide Horiazontal Accordion

Package Preparation

Unpack the installation package that you downloaded to your computer. You we’ll see these files:

licence.txt

readme.txt

Modules

mod_slide_horizontal_accordion xxx.zip

Slide Horizontal Accordion module Installation

Go to Administrator site => “Extension” => “Extension Manager” in the Top Menu. In “Upload Package File” block, please Upload & Install our extensions:

  • mod_slide_horizontal_accordion x.x.x.zip

Manage JSE Horizontal Accordion Slider module

Basic Options

Edit basic functions for slide: select theme for module, set transition time(ms).

Select Theme

Support 4 themes:

  • Horizontal Accordion Default: Default theme for Slide
  • Horizontal Accordion With Button: Support additional buttons for slide (Next or Prev)
  • Horizontal Accordion With Control Panel: Display control panel
  • Horizontal Accordion With Title: Support better display for Title

Auto play

Select Yes/No to automatically play slides or not.

Interval time (ms)

This option is only available when you select YES for Auto play. You can specify the number of milliseconds for each slide.

Pause On Hover

Autoplay is paused when cursor enters accordion's direct slide.

Keyboard Navigation

Enables / Disables using of arrow keys to control the active accordion.

Spacing

Space (in pixels) between each slide.

Slides Gallery

  • Select Folder: Select folder to gallery display images in folder and can upload, delete or drag & drop to order images for slider.

Option: With each slide, you have the same options. They are:


  • Title: Input Slide’s Title. Title is the text displayed when slide is closed. Default style is H1.
  • Caption: Input Slide’s Caption. Caption will be shown when slide is open.
  • Caption Size: Font’s size of caption with option: H1, H2, H3.
  • Caption Top: Caption’s position from top.
  • Caption Left: Caption’s position from left.
  • URL: URL address for Image or Caption.
  • URL Display: Select where to link (none, image or caption).
  • Description: General information of Slide. You can easily use HTML tags such as: <a>, <i>, <br>… For example: Description of Slide. Visit Joomseller: <a href=’http://jooseller.com/’> Joomseller.com<a><br><p> Thank you!</p>

Mod slide horizontal accordion Slides-Details-Lightbox.png

Advanced Options

This section provides extended options for you to configure slide.

Option:

  • Module Class Suffix: A suffix to be applied to the CSS class of the module. This allow for individual module styling.
  • Activate Slide by URL: Enable/Disable opening appended slide when click on that slide's link. If set it Disable, defaul Slide 1 will be opened after clicking on any slide's link.
  • Target URL: Enable/ Disable opens the slide's link in new window. Default is leave 'No' to opens in current window.
  • Bottom Shadow: Use image for Bottom shadow
  • Enable JQuery: On/Off jQuery loader. Turn it off if your site already have jQuery loaded.
  • Enable noConflict: On/Off noConflict. Turn it on to prevent conflict with Joomla’s Mootools.

User Manual

Change JSE Horizontal Accordion Slider information and options

Go to Extensions => Module Manager

Mod manager slide horizontal accordion Module-Manager.png



And then, change the Module’s information and options:


Mod manager slide horizontal accordion information-accordion.png

Tips

In this section, we’ll provide the configuration of our Demo site. You can use it as example for your site.

Basic Option

  • Select Theme: Horizontal Accordion Default
  • Auto Play: Yes
  • Interval time(ms): 5000

Slides Gallery

Step 1: Select "Edit Icon" button.
Step 2: Enter slide's details.
Step 3: Click "Update" button to save information for each slide.
Final: Click "SAVE" button of Joomla to update all information for Slider.

EX:
Mod slide horizontal accordion Slides-Details-Lightbox.png

Image 1

  • Select Image: Select favorite images to show
  • Title: Slide Horizontal Accordion
  • Caption: An excellent accordion slide from JoomSeller.
  • Caption Size: H1
  • Caption Top: 3%
  • Caption Left: 3%
  • URL: http://joomseller.com/
  • URL Display: Image
  • Description: <h1>You can use this module to display images of articles, product…</h1> by using multiple links inside a slide or using the whole slide as a link (as demonstrated on this slide). Links of inactive slides are disabled so nothing happens when you click a link in an active slide. You can of course disable this functionality for the whole accordion or for particular links. Especially, it’s responsive and with support of allow/not allow to automatically play accordion, we can bring to your site fascinating and unique element.

Image 2

  • Select Image: Select favorite images to show
  • Title: Hai Hoa Beach
  • Caption: Hai Hoa Beach
  • Caption Size: H1
  • Caption Top: 3%
  • Caption Left: 3%
  • URL: http://en.wikipedia.org/wiki/H%E1%BA%A3i
  • URL Display: Caption
  • Description:

<h1>Slide's description. </h1>You can use simple tag: inside the description: “</h1><bold><a><br/>”. You can also use multiple links inside a slide, as for Caption and Description (as demonstrated on this slide) or use the whole slide as a link (see the prev slide).

<br>For example:<br>

Visit Joomseller Solution <a href='http://joomseller.com'>Jomseler.com</a>. And our Facebook <a href=”https://www.facebook.com/JoomSeller”>Jomseller Solution.</a>

Image 3

  • Select Image: Select favorite images to show
  • Title: Luong Son Sand Hill
  • Caption: Luong Son Sand Hill at Phan Thiet Beach<br> Binh Thuan Province.
  • Caption Size: H3
  • Caption Top: 3%
  • Caption Left: 40%
  • URL:
  • URL Display:None
  • Description:

Image 4

  • Select Image: Select favorite images to show
  • Title: Dawn of the Countryside.
  • Caption: Dawn of the Countryside.
  • Caption Size: H1
  • Caption Top: 3%
  • Caption Left: 3%
  • URL:
  • URL Display: None
  • Description:

Image 5

  • Select Image: Select favorite images to show
  • Title:
  • Caption:
  • Caption Size: H1
  • Caption Top: 3%
  • Caption Left: 3%
  • URL:
  • URL Display: None
  • Description:

Advanced Option

  • Module Class Suffix:
  • Activate Slide by URL: No
  • Target URL: No
  • Bottom Shadow: No
  • Enable JQuery: Yes
  • Enable noConflict: Yes

Result for Frontend:

Mod slide horizontal accordion frontend.png