Upload
joomlashine
View
2.802
Download
3
Tags:
Embed Size (px)
DESCRIPTION
To learn how to configure Theme Slider - a newly-added feature in JSN ImageShow v4. Slider allows you to create stunning photo galleries which run well on computers and iPhone, iPad devices. To stay on top of Joomla tutorials from JoomlaShine, just: - Like our fan pages on FB: http://www.facebook.com/joomlashine - Follow us on Twitter: http://twitter.com/joomlashine
Citation preview
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
Co
Th
W
Check for updates ...................................................................................................................................... 20
Table of Contents JSN ImageShow Theme Slider .......................................................................................................................... 1
nfiguration Manual .......................................................................................................................................... 1
Table of Contents ............................................................................................................................................. 2
Introduction........................................................................................................................................................ 3
eme’s Parameters ....................................................................................................................................... 4
Image Panel .................................................................................................................................................. 5
Caption Panel ............................................................................................................................................. 14
Thumbnail Panel ........................................................................................................................................ 15
Toolbar Panel.............................................................................................................................................. 17
Slideshow Panel ......................................................................................................................................... 18
Visual Preview ................................................................................................................................................ 19
hat’s next? ................................................................................................................................................... 20
Give feedback ............................................................................................................................................. 20
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
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.
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
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.
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
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
current image completely.
Block - Separate blocks of a new image move from right to left continuously until they cover the
current image completely.
Block transition
Cube Stop - Separate cubes of the current image fly out until the new image is completely revealed.
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
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
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
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
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
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 simultaneously
spread both left and right until they cover the current image.
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
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
cover the current image.
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
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
cover the current image.
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.
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
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
current image completely.
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.
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
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.
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
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.
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
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 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.
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
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 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.
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
Active Color in Dots and Numbers Presentation Mode
16
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
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 Image
Panel, and is hidden immediately when mouse is moved out.
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
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.
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
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
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
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 Facebook
http://www.facebook.com/joomlashine for more updates.