JSN ImageShow Theme Slider   Configuration Manual
JSN ImageShow Theme Slider Configuration Manual © http://www.joomlashine.com                                         Follo...
JSN ImageShow Theme Slider Configuration Manual © http://www.joomlashine.com                           Follow us on Twitte...
JSN ImageShow Theme Slider Configuration Manual © http://www.joomlashine.com                           Follow us on Twitte...
JSN ImageShow Theme Slider Configuration Manual © http://www.joomlashine.com                          Follow us on Twitter...
JSN ImageShow Theme Slider Configuration Manual © http://www.joomlashine.com                    Follow us on Twitter http:...
JSN ImageShow Theme Slider Configuration Manual © http://www.joomlashine.com                    Follow us on Twitter http:...
JSN ImageShow Theme Slider Configuration Manual © http://www.joomlashine.com                    Follow us on Twitter http:...
JSN ImageShow Theme Slider Configuration Manual © http://www.joomlashine.com                    Follow us on Twitter http:...
JSN ImageShow Theme Slider Configuration Manual © http://www.joomlashine.com                    Follow us on Twitter http:...
JSN ImageShow Theme Slider Configuration Manual © http://www.joomlashine.com                    Follow us on Twitter http:...
JSN ImageShow Theme Slider Configuration Manual © http://www.joomlashine.com                    Follow us on Twitter http:...
JSN ImageShow Theme Slider Configuration Manual © http://www.joomlashine.com                    Follow us on Twitter http:...
JSN ImageShow Theme Slider Configuration Manual © http://www.joomlashine.com                          Follow us on Twitter...
JSN ImageShow Theme Slider Configuration Manual © http://www.joomlashine.com                         Follow us on Twitter ...
JSN ImageShow Theme Slider Configuration Manual © http://www.joomlashine.com            Follow us on Twitter http://www.tw...
JSN ImageShow Theme Slider Configuration Manual © http://www.joomlashine.com                          Follow us on Twitter...
JSN ImageShow Theme Slider Configuration Manual © http://www.joomlashine.com                          Follow us on Twitter...
JSN ImageShow Theme Slider Configuration Manual © http://www.joomlashine.com                           Follow us on Twitte...
JSN ImageShow Theme Slider Configuration Manual © http://www.joomlashine.com                           Follow us on Twitte...
Upcoming SlideShare
Loading in …5
×

Themeslider Configuration Manual

3,100 views
2,985 views

Published on

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

Published in: Business, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,100
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Themeslider Configuration Manual

  1. 1. JSN ImageShow Theme Slider Configuration Manual
  2. 2. 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/joomlashineTable of ContentsJSN ImageShow Theme Slider.......................................................................................................................... 1Configuration 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
  3. 3. 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/joomlashineIntroductionTheme Slider is a newly-added feature in JSN ImageShow v4. This non-flash based theme uses purelythe jQuery Library. With 30+ simple and effective transition parameters, Slider allows you to create stunningphoto 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
  4. 4. 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/joomlashineTheme’s ParametersIn 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
  5. 5. 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/joomlashineImage 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. 5
  6. 6. 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 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
  7. 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 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
  8. 8. 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 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
  9. 9. 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 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. 9
  10. 10. 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 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. 10
  11. 11. 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 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. 11
  12. 12. 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 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
  13. 13. 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 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
  14. 14. 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/joomlashineCaption 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
  15. 15. 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/joomlashineThumbnail 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
  16. 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 Active Color in Dots and Numbers Presentation Mode 16
  17. 17. 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/joomlashineToolbar 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
  18. 18. 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/joomlashineSlideshow 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
  19. 19. 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/joomlashineVisual PreviewThe Visual Preview on the right allows you to see how parameters are applied in real-time. Move the mouse onany area of gallery, the yellow border will detect which part of gallery you want to change. Click on it and theappropriate tab of parameters will be shown in the Parameters area. Visual Preview and themes parameter interaction 19
  20. 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/joomlashineWhat’s next?Give feedbackWe 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 updatesWe are constantly updating our extension repertoire, so don’t forget to visit JSN ImageShow product’s page tocheck for something new. Follow us on Twitter http://www.twitter.com/joomlashine or Like us on Facebookhttp://www.facebook.com/joomlashine for more updates. 20

×