Jsnis Theme Slider Configuration Manual

8/10/2019 Jsnis Theme Slider Configuration Manual

http://slidepdf.com/reader/full/jsnis-theme-slider-configuration-manual 1/20

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

2

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






3

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.






4

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.






5

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.






6

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






7

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.






8

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 simultaneouslyspread both left and right until they cover the current image.






9

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







10

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 outuntil 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.






11

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.






12

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.






13

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.






14

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 tomake 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 supportis 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.






15

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 andLeft.

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.






16

Active Color in Dots and Numbers Presentation Mode






17

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 ImagePanel, and is hidden immediately when mouse is moved out.






18

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.






19

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






20

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 Facebookhttp://www.facebook.com/joomlashine for more updates.

Documents

Jsnis Theme Slider Configuration Manual