Themeslider Configuration Manual

JSN ImageShow Theme Slider
Configuration Manual

JSN ImageShow Theme Slider Configuration Manual © http://www.joomlashine.com
Follow us on Twitter http://www.twitter.com/joomlashine
Find us on Facebook http://www.facebook.com/joomlashine

Table of Contents
JSN ImageShow Theme Slider.......................................................................................................................... 1
Configuration Manual .......................................................................................................................................... 1
Table of Contents ............................................................................................................................................. 2
Introduction........................................................................................................................................................ 3
Theme’s Parameters ....................................................................................................................................... 4
Image Panel .................................................................................................................................................. 5
Caption Panel ............................................................................................................................................. 14
Thumbnail Panel ........................................................................................................................................ 15
Toolbar Panel.............................................................................................................................................. 17
Slideshow Panel ......................................................................................................................................... 18
Visual Preview ................................................................................................................................................ 19
What’s next? ................................................................................................................................................... 20
Give feedback ............................................................................................................................................. 20
Check for updates ...................................................................................................................................... 20

2


Introduction
Theme Slider is a newly-added feature in JSN ImageShow v4. This non-flash based theme uses purely
the jQuery Library. With 30+ simple and effective transition parameters, Slider allows you to create stunning
photo galleries which run well on computers and iPhone, iPad devices.
The showcase theme settings are divided into 2 areas

Showcase settings page
1. Parameters - The place to configure 18 parameters
2. Preview - See how your slideshow looks like when parameters are configured.

3


Theme’s Parameters
In JSN ImageShow Theme Slider, there are in total 5 parameter groups located in the tabs as follows:

 Image Panel – to set image’s transition effect.

 Caption Panel – to set caption panel, title, description and link

 Thumbnail Panel – to set the configuration related to image thumbnail.

 Toolbar Panel – to set the presentation of the gallery including next arrow, previous arrow, pause, play

 Slideshow Panel – to set the gallery behavior when it plays the slideshow.
For information about each parameter group read the relevant chapter of the manual.

4


Image Panel
 Transition Effect – Defines the image transition type.
 Cube - Separate cubes of a new image move from right to left continuously until they cover the
current image completely.

Cube transition
 Cube Random - Separate cubes of the new image fly smoothly from left to right until they cover the
 Block - Separate blocks of a new image move from right to left continuously until they cover the

Block transition
 Cube Stop - Separate cubes of the current image fly out until the new image is completely revealed.

5

Cube Stop transition
 Cube Hide - Separate cubes of the current image fade out until the new image is completely
revealed.

Cube Hide transition
 Cube Size - Separate cubes of the current image collapse until the new image is completely
revealed.

Cube Size transition
 Horizontal - Separate small blocks of a new image move continuously from right to left until they
completely cover the current image.

Horizontal transition

6

 Show Bars - Separate bars of a new image slide continuously from left to right until they cover the
current image.

Show bars transition
 Show Bars Random - Separate bars of a new image fade in vertically in a random order.

Show bars random transition
 Tube - Vertical tubes of the new image appear in a fast and strong way with an elastic vibration until
they cover the current image.

Tube transition
 Fade - As the current image fades out, the new image fades in.

7


Fade transition
 Fade Four - The current image fades out and a new image fades in quickly.

Fade four transition
 Parallel - Separate small bars of a new image start dropping down from the top center and
simultaneously spread to the left and right until they cover the current image.

Parallel transition
 Blind - Separate small blocks of a new image start appearing from the center and simultaneously
spread both left and right until they cover the current image.

8


Blind transition
 Blind Height - Separate small blocks of a new image drop down from the left to right.

Blind Height transition
 Direction Top - Separate big bars of a new image move up vertically from left to right until they
cover the current image.

Direction top transition
 Direction Bottom - Separate big bars of a new image move down vertically from left to right.
 Direction Right - Separate big bars of a new image move horizontally from left to right until they

9


Direction right transition
 Direction Left - Separate big bars of a new image move horizontally from right to left.
 Cube Stop Random - Separate cubes of a new image gradually fade in, in a random order until they

Cube Stop Random transition
 Cube Spread - Separate cubes of a new image fade in randomly at different positions and spread out
until they cover the current image.

Cube Spread transition
 Cube Jelly - Separate cubes of the current image are taken out from left to right with a vibration
effect until the new image is completely revealed.

10


Cube Jelly transition
 Glass Cube - Moving from left to right, vertical bars of a new image appear simultaneously from the
top and bottom until they completely cover the current image.

Glass cube transition
 Glass Block - Moving from left to right, separate blocks of a new image fade in until they cover the

Glass block transition
 Circles - Separate circles of a new image fade in gradually from the center of the image until they
completely cover the current image.

11


Circles transition
 Circles Inside - Separate circles of the new image fade in gradually from the outside to the middle.

Circles Inside transition
 Circles Rotate - Separate circles of the new image fade in from outside to inside and rotate until
they cover the current image completely.
 Cube Show - Separate cubes of a new image appear from top to bottom and from left to right until
they cover the current image.

Cube Show transition
 Up Bars - Separate bars of the current image move up then disappear until the new image is
completely revealed.

12


Up bars transition
 Down Bars - Separate bars of the current image move down then disappear until the new image is
completely revealed.
 Random - Only one transition effect will be selected randomly to be applied to an image show.
 Random Smart - Various transition effects will be selected randomly to be applied to each image in
an image show.

13


Caption Panel
 Caption Panel Presentation – Defines whether to show or hide caption panel.

 Caption Panel Opacity – Defines caption panel opacity level; you can customize the percentage to
make it darker or lighter.

 Show Title – Defines whether or not to show the Title.

 Title CSS – Defines the CSS declaration to be applied to the title. Since CSS support is limited, it’s
recommended to use only the following selectors: font-family, font-size, font-weight, text-align and
color.

 Show Description - Defines whether or not to show a Description.

 Description CSS - Defines the CSS declaration to be applied to the description text. Since CSS support
is limited, it’s recommended to use only the following selectors: font-family, font-size, font-weight,
text-align and color.

 Show Link - Defines whether or not to show the Link.

 Link CSS - Defines the CSS declaration to be applied to the link. Since CSS support is limited, it’s
recommended to use only the following selectors: font-family, font-size, font-weight, text-align and
color.

14


Thumbnail Panel
 Thumbnail Panel Presentation – Defines whether to show or hide the Thumbnail Panel.

 Thumbnail Panel Position – Defines to where to put Thumbnail Panel, including Right, Center and
Left.

 Thumbnail Presentation Mode – Defines whether to display thumbnails as dots or numbers.

Dots Presentation Mode

Numbers Presentation Mode

 Active State Color – Defines the color of active elements in Thumbnail Panel.

15


Active Color in Dots and Numbers Presentation Mode

16


Toolbar Panel
 Navigation Arrows Presentation
 Hide – Navigation Arrows are completely hidden.
 Show Always – Navigation Arrows are shown all the time.
 Show On Mouseover – Navigation Arrows appear when the user moves the mouse over the Image
Panel, and are hidden immediately when mouse is moved out.

Slideshow Player Presentation
 Hide – Slideshow Player is completely hidden.
 Show Always – Slideshow Player is shown all the time.
 Show On Mouseover – Slideshow Player appears when the user moves the mouse over the Image
Panel, and is hidden immediately when mouse is moved out.

17


Slideshow Panel
 Slide Timing – Defines the duration (in seconds) of a single image presentation.

 Auto Play – Defines whether or not the slideshow starts automatically right after the gallery has loaded .

 Pause On Mouseover – Defines whether the slideshow pauses when the user moves the mouse over the
Image Panel.

18


Visual Preview
The Visual Preview on the right allows you to see how parameters are applied in real-time. Move the mouse on
any area of gallery, the yellow border will detect which part of gallery you want to change. Click on it and the
appropriate tab of parameters will be shown in the Parameters area.

Visual Preview and themes parameter interaction

19


What’s next?

Give feedback
We would love to hear what you say:

 Write a review on Joomla Extensions Directory.

 Tweet about this extension if you love it.

 Submit a bug report and we will fix it ASAP.

Check for updates
We are constantly updating our extension repertoire, so don’t forget to visit JSN ImageShow product’s page to
check for something new. Follow us on Twitter http://www.twitter.com/joomlashine or Like us on Facebook
http://www.facebook.com/joomlashine for more updates.

20

Themeslider Configuration Manual

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Mehr von JoomlaShine

Mehr von JoomlaShine (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Themeslider Configuration Manual