jsn imageshow themes configuration manual...slideshow panel – to set the gallery behavior when it...

JSN ImageShow Themes Configuration Manual

Theme Classic ConfigurationJSN ImageShow supports the ability to use different themes in the gallery for best photo presentation. Each theme has the unique group ofparameters for building gallery or slideshow. By default, JSN ImageShow comes with the Theme Classic allowing you to build terrificgalleries.

Please note that, Theme Classic provided you with 2 skins: JavaScript and Flash:

Skin Flash: Comes with 70+ parameters. However, it can’t be displayed well on mobile devices.Skin JavaScript: Come with similar parameters of skin Flash. However, there are fewer options than in skin Flash. Your gallery won’tget image transition effects, ken-burn effect, etc. This limitation is offset by nice presentation ability on mobile devices.

The Showcase Theme Settings is divided into 2 areas:

Showcase settings page

1. Parameters – Take control on the gallery presentation with over 70 parameters.2. Live View – See in real-time how parameters are applied to the gallery presentation.

Attention!

In this documentation, parameters which are available on skin Flash only is marked * symbol.

Theme ParametersJSN ImageShow Theme Classic parameters are grouped by the functionality and located at the tabs. In addition, The current theme hasparameters groups:

Container Panel – to set the configuration related to container such as background color, round corner, border stoke, border color.Image Panel – to set the image presentation, background, watermark and overlay effects.Thumbnail Panel – to set the configuration related to image thumbnail.Caption Panel – to set the title, description and link of showcase.Toolbar Panel – to set the functionality of the gallery including next photo, previous photo, pause, play and more.SlideShow Panel – to set the gallery behavior when it plays the slideshow.

For information about each parameter groups read the further chapter of manual.

Container Panel

Background Color - Set background color of the area outside the gallery. This color will be visible only when parameter “Round CornerRadius” is not set to Zero.Round Corner – Set the radius (in pixels) of gallery rounded cornerBorder Stoke – Set the thickness (in pixels) of gallery borderBorder Color – Set the color of gallery border. Click “Select Color” to pick desired color or set color code manually

Default Presentation Mode

Defines the image presentation mode to activate when gallery starts. Images can be presented in 2 different modes:

Fit In – In this mode image is resized to be fitted inside Image Panel area keeping original orientation and proportion.

“Fit In” image presentation

Image Image is resized to be fit in 90% of Image Panel area. The rest 10% area is for background visibility. Image is shown with lightshadow to emphasis physical feeling.

This mode ensures that image is 100% visible inside Image Panel area and creates empty space around the image, where viewer will seethe background.

Expand Out – In this mode image is resized to cover the whole Image Panel area.

“Expand Out” image presentation

This mode ensures the whole Image Panel will be filled with the image, but can crop image side edge if aspect ratios of the image andImage Panel area are not the same.

Fit In Mode Configuration

Image Transition Type * – Defines the image transition type in Fit In presentation mode

RandomFade - Current image fades out, new fades in

“Fade” transition in “Fit In” image presentation mode

Push - Current image moves out to random directions with slight zooming out and rotation, new image moves in from randomside with zooming in and from slight rotation.

“Push” transition in “Fit In” image presentation mode

Zoom - Current image zoomed and fades out, new image zoomed and fades in.

"Zoom" transition in “Fit In” image presentation mode

3D Flip - Current image is taken out of the ground and flipped. New image appears like it is on the backside and place on theground.

"3D Flip" transition in “Fit In” image presentation mode

Page Curl - Current image is taken out from the ground like a page and move out of the screen. New image is flying in from theoutside and place on the ground like page.Page Flip - Current image flip around. New image appears on the backside.No transition - New image appears normally without any specific transition.

Image Click Action – Defines the image action on mouse click in Fit In presentation mode

No action - In this mode, image is not clickable at all.Image Zooming - In this mode, image is zoomed and user can move mouse pointer to make image floats in opposite direction. Ifvisitor clicks again, image will zoom out to it’s normal scale. There are 2 zooming level available.

"Image Zooming” action when user click on image

Open Image Link - In this mode, when user clicks on image, it’s link will be opened in browser.

Image Shadow* – Defines shadow around images in “Fit in” presentation mode. Select “Yes” if you want to show it.

Expand Out Mode Configuration

Image Transition Type * – Defines the image transition type in Expand Outside presentation mode

RandomCross Fade - New image fades upon current image

“Cross Fade” transition in “Expand Out” image presentation mode

Linear Fade - Linear fade from random direction and orientation.

“Linear Fade” transition in “Expand Out” image presentation mode

Radial Fade - The same concept as Linear fade but with radial gradient.

"Radial Fade" transition in “Expand Out” image presentation mode

Black Dim - Current image dims to black, new image dims from black.

"Black Dim" transition in “Expand out” image presentation mode

White Burn - Current image burns to white, new image burns from white.

"White Burn" transition in “Expand out” image presentation mode

No transition - No effects are applied.

Image Motion Type * – Defines the motion type each time new image appears. If most of your images have the same orientation, then useCenter instead of Edge.

No Motion - There is no image motion at all. Images just stand on their initial position.Zoom in - Image zooms in at center of the panel.Zoom out - Image zooms out at center of the panel.

"Image Zooming” action when user click on image

Random - Image zooms in or out randomly.

Image Click Action – Defines the image action on mouse click in Fit In presentation mode.

No Action - In this mode, image is not clickable at all.Image Zooming - In this mode, image is zoomed and user can move mouse pointer to make image floats in opposite direction. Ifvisitor clicks again, image will zoom out to it’s normal scale. There are 2 zooming level available..Open Image Link - In this mode, when user clicks on image, it’s link will be opened in browser.

Open Link In

Current Browser - Link is opened in current tab of web browser.New Browser - Link is opened in new tab of web browser.

Background

Background Type – Defines the background type to present in Image Panel.

Image Panel background presentation

User can choose one of following background types for Image Panel:

Solid Color – Background is filled with simple solid color. The color code is defined in parameter Background Value.Linear Gradient * – Background is filled with linear gradient color. The top and bottom color code is defined in parameterBackground Value as comma separated values.Radial Gradient * – Background is filled with radial gradient color. The first and second color code is defined in parameterBackground Value as comma separated values.Pattern – Background is filled with 1 of built-in patterns or custom predefined pattern. The selection in parameter BackgroundValue will be applied.Image – Background is filled with 1 of built-in images or custom predefined image. The selection in parameter BackgroundValue will be applied.

Background Value – Set value for the background type defined in the parameter “Background”

Inner Shadow

Show Inner Shadow – Defines to show inner shadow in Image Panel or not.

“Inner Shadow” presentation

User can choose one of following background types for Image Panel:

Background Type – Defines the background type to present in Image Panel.

Watermark

Show Watermark – Defefines to show watermark or not. User can use his own watermark image in Image Panel. This can improve thebrand of the presentation and protect images from screen copy.Watermark Path – Defines the relative path to user’s watermark image. Watermark image can be one of most popular image formaton web JPG, PNG and GIF. User can utilize image selector to locate desired watermark.Watermark Position – Defines the watermark position inside Image Panel. User can align watermark to 1 of 4 corner inside ImagePanel.Watermark Offset (px) – Defines the distance from watermark to Image Panel edge.

Watermark offset

Depending on the kind of watermark user can setup the appropriate offset distance. For example, logo watermark should be place at somedistance from panel edge, while corner-badge watermark should be stick to the panel edge.

Watermark Opacity (%) – Defines the watermark opacity level. User can set big opacity level to express the brand or small level to letwebsite visitor focus in image.

Overlay Effect

Show Overlay Effect – Defines to use overlay effect or not. There are several options for this parameter:

On During Slideshow – Show overlay effect only when slideshow process is started.Show Always – Show overlay effect all the time, during both normal image browsing mode and slideshow process.

Off – Do not show overlay effect at all.

Overlay Effect Type – Select the overlay effect to be used. You can use function “Showcase Live View” to see how selected overlay effectlooks like in real condition.

Horizontal Floating Bar – Show vertical bar floating in horizontal direction.Vertical Floating Bar – Show horizontal bar floating in vertical direction.Winter Snow – Show falling snow effect.Old Movie – Show old movie noise and dust making it look as if it’s playing on an old projector.Water Bubbles – Show water bubbles floating from bottom to top.Sparkle – Show sparkles making it look dazzling.

Thumbnail Panel

General

Thumbnail Panel Presentation – Defines to show Thumbnail Panel or not. User can set to show Thumbnail Panel for more imagebrowsing convenience. There are several options for this parameter.

Show On Mouseover * - Panel appears when user move mouse over Image Panel and hide after 3 seconds when mouse ismoved out.Show Always - Panel is shown all the time.Hide – Panel is completely hidden.

“Thumbnail Panel” presentation

Thumbnail Panel Position – Defines to where to put Thumbnail Panel. You can put Thumbnail Panel on Top or Bottom of thepresentation area moving Image Panel to the opposite side.

“Thumbnail Panel” position

Collapsible Thumbnail Panel – Defines to allow website visitor to close Thumbnail Panel at presentation area or not. If allowed a smallclose icon appears to allow user to close the Thumbnail Panel. When closed little thumbnail icon appears clicking on which will reopenThumbnail Panel.Panel Background Color – Set the color of Information Panel background. It’s recommended to set here the color highly contrasted tothe color of text being shown in the panel.Normal State Color – Defines the color of elements in their normal idle state.Active State Color – Defines the color of active elements in Thumbnail Panel.

“Normal State Color” and “Active State Color” in Thumbnail Panel

Thumbnail

Show Thumbnails Status – Defines to show thumbnails position status bar or not. User can set to show thumbnail position statuswhich indicates the position of current visible thumbnail portion.Thumbnails Presentation Mode – Defines how to display thumbnail

Thumbnails presentation

User can choose to display thumbnail as:

Image – Thumbnail is presented as small imageNumber – Thumbnail is presented as number

Thumbnails Browsing Mode – Defines how website visitors browse thumbnails. User can choose to set 1 of following modes:

Pagination – In this mode, thumbnails are placed in pages. Gallery automatically calculates the number of thumbnails to beincluded in single page and the left position adjustment to place thumbnail page exactly at center of Thumbnail Panel.

“Pagination” thumbnails browsing mode

To browse thumbnails website visitor clicks side navigation buttons which fades out current thumbnails page and fades in new one. Alsovisitor can clicks on any of page indicator to see thumbnails on that page.

Sliding – In this mode, all thumbnails are presented in sliding bar continuously with out dividing to sets and navigation buttons.Each thumbnail is placed at fixed distance of 10 pixel from the neighbor, 5px on each side.

“Sliding” thumbnails browsing mode

To browse thumbnails website visitor moves mouse cursor on one side of Thumbnail Panel making thumbnail bar moves to the oppositedirection to reveal hidden items. The movement speed is calculated based on the distance of mouse cursor from thumbnail bar center point.Also visitor can click on any point of holder bar to make slider and thumbnails slides to that location,

Thumbnail Row – Define the number of rows to present thumbnails in Pagination mode. If you have many images to show, then youmight want to put thumbnails on multiple rows. Notice, that in Sliding browsing mode, this parameter is automatically set to 1.Thumbnail Width (px) – Defines the width (in pixel) of each thumbnail. In Pagination browsing mode, based on this parameter gallerywill automatically calculates the number of thumbnails to be placed on single page.Thumbnail Height (px) – Defines the height (in pixel) of each thumbnail.Based on this parameter gallery will automatically calculates the height of Thumbnail Panel.

Thumbnail dimension settings

Thumbnail Border (px) - Set the thickness (in pixels) of thumbnail border. It’s not recommended to set big value here, since it mightharm overall thumbnails presentation.Thumbnail Opacity (%) - Set the thumbnail opacity. By default this parameter is set to 50% to make inactive thumbnails look palecompared to the active one. But you can set 100% to make all thumbnails look the same.

Big Thumbnail*

Enable Big Thumbnail - Defines to show big thumbnail or not.

Big Thumbnail presentation

User can enable big thumbnail that appears when mouse over on regular thumbnail. In some case user want to reduce the size of regularthumbnails to show more of them in the bar. In this case, big thumbnail appears on mouse over and can help to understand more about theimage. Big thumbnail is shown in original orientation and reduced to the size defined in parameter Big Thumbnail Size.

Big Thumbnail Size (px) – Defines to the size of big thumbnail

Big Thumbnail size

Since Big thumbnail is shown in original orientation this parameter defines the boundary size for big thumbnail. If big thumbnail hashorizontal layout this parameter is it’s width. If big thumbnail has vertical layout this parameter is it’s height.

Big Thumbnail Border (px) - Set the thickness (in pixels) of big thumbnail border. It’s not recommended to set big value here, since itmight harm overall thumbnails presentation.Big Thumbnail Color - Set the color of big thumbnail border. It’s recommended to set white (#ffffff) color for best look-n-feel.

Caption Panel

General

Information Panel Presentation – Defines how to present Information Panel.Show On Mouseover * - Panel appears when user move mouse over Image Panel and hide after 3 seconds when mouse ismoved out.Show Always – Panel is shown all the time.Hide – Panel is completely hidden.

“Information Panel” presentation

Information Panel Position – Defines the position of Information Panel.

"Information Panel" Position

User can put Information Panel to top or bottom of Image Panel.

Panel Background Color – Defines the background color of Information Panel.

“Information Panel” background color

User can set his own background color for appropriate styling. It’s recommended to set some dark color here to make text highly visible.

Panel Click Action – Defines the action that will happen when viewer clicks on the information panel.

No action *Open Image Link – In this mode, when user clicks on image, it’s link will be opened in browser.

Title

“Information Panel” content presentation

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

Description

Show Description – Defines to show Description or not.Description Length Limitation (words) – Set the number of words limitation for description. If description contains more words thenlimitation number, than description is truncated and ... added to the end. If user set 0 there will not be any limitations.Description CSS – Defines the CSS declaration to be applied to the description text. Since CSS support is limited, it’s recommended touse only following selectors: font-family, font-size, font-weight, text-align and color.

Link

Show Link – Defines to show the link or not.Link CSS (Title CSS) – Defines the CSS declaration to be applied to the description text. Since CSS support is limited, it’s recommendedto use only following selectors: font-family, font-size, font-weight, text-align and color.

Toolbar Panel

General

Toolbar Panel Presentation – Defines how to present Toolbar Panel.Show On Mouseover -Panel appears when user move mouse over Image Panel and hide after 3 seconds when mouse is movedout.Show Always * – Panel is shown all the time.Hide – Panel is completely hidden.

“Toolbar Panel” presentation

Toolbar Panel Position * – Defines the position of Information Panel.

“Toolbar Panel” position

You can show the panel to the top or bottom of Image Panel. In all cases, panel is presented at distance of 10 pixel from Image Panel edge.

Show Tooltip * – Select “Yes” if you want to show tooltips that appears when user move mouse over each element in the panel.

Functions *

Show Image Navigation - Defines to show Previous / Next arrow on Toolbar Panel.

"Toolbar Panel" content

It’s recommended to turn this on, since its common experience of browsing image gallery.

Show Slideshow Player - Defines to show Play / Stop button to control slideshow process. It’s recommended to turn this on, since it’scommon experience of browsing image gallery.Show Fullscreen Switcher - Defines to show Full-screen Switcher to allow viewer to see gallery in full-screen. It’s recommended to turnthis on only when you are showing hi-quality images.

Slideshow

Slideshow Presentation *

Enable Ken-burn Effect - Defines to turn on or not this effect during slideshow process. This effect creates the smooth image zoomingand movement, making it looks like video.Show Status - Defines to show timer clock or not for displaying the time to the next image. This timer appears in 3 seconds before thenext image appears.Hide Thumbnail Panel - Defines to close or not Thumbnail Panel when slideshow starts. It’s recommended to hide the panel to letviewer focus on the slideshow, not browsing images.Hide Image Navigation - Defines to hide or not image navigation on Toolbar Panel when slideshow starts. It’s recommended hide thenavigation to let viewer focus on the slideshow, not browsing images.

Slideshow Process

Slide Timing (sec) - Defines the duration (in seconds) of a single image presentation.Auto Play - Defines the slideshow to start automatically right after the gallery is loaded or not.Slideshow Looping – Select “Yes” if you want the slideshow to start over again when the last image is reached (looped).

Theme Slider ConfigurationTheme Slider is a newly-added feature in JSN ImageShow v4. This non-flash based theme uses purely the jQuery Library. With 30+ simpleand effective transition parameters, Slider allows you to create stunning photo galleries which run well on computers and iPhone, iPaddevices.

The showcase theme settings are divided into 2 areas


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

Attention!

To present the images beautifully, you should set the width and the height of the showcase according to the ratio of your images.

For example: If you have images in size 1200x900 (4:3) , you showcase should be set in 1200x900 or 400x300.

Theme 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 linkThumbnail Panel – to set the configuration related to image thumbnail.Toolbar Panel – to set the presentation of the gallery including next arrow, previous arrow, pause, playSlideshow Panel – to set the gallery behavior when it plays the slideshow.

For information about each parameter group read the relevant chapter of the manual.

Image PanelTransition 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.

Cube Stop transition

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

Cube Hide transition

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

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.

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 rightuntil 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 theycover the current image.

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.

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

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 iscompletely revealed.

Cube Jelly transition

Glass Cube - Moving from left to right, vertical bars of a new image appear simultaneously from the top and bottom until theycompletely 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.

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

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.

Caption PanelCaption 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 thefollowing 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 touse 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 thefollowing selectors: font-family, font-size, font-weight, text-align and color.

Thumbnail PanelThumbnail 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.

Active Color in Dots and Numbers Presentation Mode

Toolbar PanelNavigation 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 immediatelywhen 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 immediatelywhen mouse is moved out.

Slideshow Panel

Slideshow PanelSlide 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.

Theme Grid Configuration

JSN Theme Grid in the front-end

Theme Grid is a newly-added feature in JSN ImageShow v4.2.1. This Grid brings your photo galleries a new way of presentation with a lot ofphotos showing on one place. The showcase theme settings are divided into 2 areas


1. Parameters - The place to configure 9 parameters2. Preview - See how your slideshow looks like when parameters are configured.

Theme’s ParametersIn JSN ImageShow Theme Grid, there are in total 2 parameter groups located in the tabs as follows:

Container Panel – to set the background color of the image show.Thumbnail Panel – to set the configuration related to image thumbnail.


Container PanelBackground color – to set the background color by clicking on “Select Color”

Thumbnail PanelThumbnail Layout – to set the layout of all thumbnails with two options “Fixed” and “Fluid”

Fixed – all thumbnails have the same size in width and height

Fluid – each thumbnail has different size. A thumbnail is horizontal or vertical based on original photo.

Thumbnail Width – to set the width of the thumbnail in pixelThumbnail Height – to set the height of the thumbnail in pixel. Notes: you can’t change the thumbnail height when choosing Fluidlayout.Thumbnail Space – to set the space between thumbnails in pixel

Thumbnail Border – to set the thick of the thumbnail border in pixel

Thumbnail Rounded Corner – to set curvature of the rounded corner of the thumbnail

Thumbnail Border Color – to set the color of the thumbnail border by clicking “Select Color”Thumbnail Shadow – to set the shadow for the thumbnail with 3 options following

No Shadow

Light Shadow

Bold Shadow

Attention!

If all images can't be displayed in the ThemeGrid frame, you just need to click and drag a displaying image up to see other images.

Theme Carousel Configuration

JSN Theme Carousel in the front-end

Theme Carousel is newly-added to JSN ImageShow version 4.5.0. This Carousel theme gives your photo galleries a excellent new way ofpresentation with a lot of photos showing on one place following a rounded animation. The showcase theme settings are divided into 2areas.


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

ImageImage Source – Display image with Original Images or Thumbnails. Normally, thumbnail quality is lower than original image quality,but it increases loading speed.Image Width – Set the width of the image in pixels.Image Height – Set the height of the image in pixels. If you don’t set this parameter, the height will be auto re-sized at the originalscale.View Angle – Set the space between the main images with other images. With negative values, the main image is lower than otherimages and vice versa, with positive values, it is higher than other images.

Transparency – Set the transparency of all waiting images which are behind the main image.

Scale – Set the size scale of waiting images when compared to the main image.

Animation Duration – Set the time for one image to move from one position to the following position. Orientation – Set the

Animation Duration – Set the time for one image to move from one position to the following position. Orientation – Set themoving direction of images, with two options: Horizontal and Vertical.

Horizontal

Vertical

Enable Drag Action – Set the ability to drag images forward, backward or up and down.Click Action – Set the action after clicking an image, it can be No Action, Show Original Image, or Open Image Link. With Open ImageLink, you can set to Open Link In Current Browser or New Browser.

Theme Flow Configuration

JSN Theme Flow in the front-end

Theme Flow is newly-added to JSN ImageShow version 4.5.4. This Flow theme gives your photo galleries an excellent new way of presentingimages with a 3D effect. The showcase theme settings are divided into 2 areas.


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

ContainerBackground Type – Set the background type of the area outside the gallery. There are 2 values: Transparent and Solid Color.

Background Color – Set background color of the area outside the gallery. This color will be visible only when parameter “BackgroundType” is set to "Solid Color".

Background color of the container

Side Fade – Set the fade color of both sides of the gallery. There are 3 values: None, Black and White.

Side Fade presentation

ThumbnailImage Source – Display image with Original Images or Thumbnails. Normally, thumbnail quality is lower than original image quality,but it increases the loading speed.Dimension – Defines the width and the height (in pixels) of each thumbnail.Border Thickness – Set the thickness (in pixels) of thumbnail border. It’s not recommended to set a big value here, since it might harmoverall thumbnail presentation.

Border thickness of the image presentation

Rounded Corner – Set the radius (in pixels) of gallery rounded corner.

Border Color – Set the color of the image border. Click “Select Color” to pick desired color or set the color code manually.3D Effect – Set 3D effect for image gallery or not. Please note that 3D effect doesn't work on Internet Explorer browser.

3D Effect presentation

Opacity – Set the opacity (in percent) of all inactive images. By default this parameter is set to 75% to make inactive thumbnails lookpale when compared to the active one.Click Action – Defines the action that will happen when the viewer clicks on the thumbnail.

No actionShow Original Image - In this mode, when user clicks on an image, the original image will be opened in a modal window.Open Image Link – In this mode, when user clicks on an image, its link will be opened in the browser. There are 2 options: Openlink in the current browser and in a new browser.

CaptionShow caption – Defines whether the original image will show a caption or not.

Caption presentation

Background Color – Set background color of the caption area.Panel Opacity – Set the opacity (in percent) of caption background. By default this parameter is set to 75% to make the caption arealook pale compared to the original image. But you can set 0% to make the background transparent.Show Title – Defines whether to show a caption title or not.

Information content presentation

Title CSS – Defines the CSS declaration to be applied to the title. Since CSS support is limited, it’s recommended to use only thefollowing parameters: padding, font-family, font-size, font-weight, text-align and color.Show Description – Defines whether to show the image description or not.Description Length Limitation (words) – Set the number of words limitation for the description. If the description contains more wordsthan the set limitation number, then the description will be truncated. If the user sets the number to 0, there will not be any limitations.Description CSS – Defines the CSS declaration to be applied to the description text. Since CSS support is limited, it’s recommended touse only the following selectors: padding, font-family, font-size, font-weight, text-align and color.

use only the following selectors: padding, font-family, font-size, font-weight, text-align and color.

NavigationEnable Keyboard Action – Allow the visitor to control the image slide by using the keyboard or not.Enable Mouse Wheel Action - Allow the visitor to control the image slide by using the mouse wheel or not.

SlideshowAuto Play – Set the slideshow to play automatically or not.Slide Timing - Set the length of time of transitions between images when the gallery is auto-playing.Pause on Mouse Over – Sets whether a mouse-over action on the gallery images pauses the slideshow temporarily or not.

Theme Strip Configuration

JSN Theme Strip in the front-end

Theme Strip is newly-added to JSN ImageShow version 4.5.3. This Strip theme gives your photo galleries a excellent new way of presentingyour photos with beautiful animation. The showcase theme settings are divided into 2 areas.


1. Parameters - The place to configure 25+ parameters.2. Preview - See how your slideshow looks like when parameters are configured.

ContainerType – Set the container design, with 3 options: None, Elastislide Default or Custom.

None - No container style.

Container with None type

Side Fade: Set the fade style of 2 image gallery sides. There are 3 options: None, White, Black

Side fade black

Elastislide Default - A fixed container style.

Container with Elasislide Default type

Side Fade: Set the fade style of 2 image gallery sides. There are 3 options: None, White, BlackCustom – You can customize the container as you want with Background Color, Border Stoke, and Border Color.

Container with Custom type

Background Color: Set the background color of the area around the images.Round Corner: Set the border radius (in pixels) of the gallery rounded corner.Border Stroke: Set the thickness (in pixels) of gallery border.Border Color: Set the color of gallery border.Side Fade: Set the fade style of 2 image gallery sides. There are 3 options: None, White, Black

ThumbnailImage Source – Display image with Original Images or Thumbnails. Normally, thumbnail quality is lower than original imagequality, but it increases the loading speed.Orientation – Set the moving direction of images, with two options: Horizontal and Vertical.

Horizontal

Horizontal direction

Vertical

Vertical direction

Dimension – Set the width of the image in pixels.

Space – Set the space between each image in pixels.

Spaces between images

Border Thickness – Set the thickness of image border in pixels

Border thickness

Rounded Corner – Set the rounded level of image in pixels.

Images with rounded corners

Border Color – Set the color of image border.Shadow – Set the shadow for each image. It may be No shadow, Light shadow, Bold Shadow.Click Action – Set the action after clicking an image, it can be No Action, Show Original Image, or Open Image Link.

CaptionShow Caption – Set to show the caption or not. It will be shown in a modal window only when you click on the gallery.

Panel Background Color – Set the color of Information Panel background. It’s recommended to set the color highly contrasted to thecolor of text being shown in the panel.

Caption Panel Capacity – Set the Caption Panel Capacity. By default, it’s 75%. You can set 0% to make the background colortransparent.

Show title – Set to show the title text in the Information Panel or not.

Title CSS – Set the CSS styling to be applied to the title.Show Description – Set to show the description text in the Information Panel or not.

Description Length Limitation – Set the number limitation of characters for description.Description CSS – Set the CSS styling to be applied to the description.

Theme Pile Configuration

JSN Theme Pile in the front-end

Theme Strip is newly-added to JSN ImageShow version 4.9.1. This theme implements the JavaScript / jQuery image gallery library –Photopile that simulates a pile of photos scattered about on a surface. Thumbnail clicks remove photos from the pile, (enlarging them as ifbeing picked up by the user), and once in view a secondary click returns the photo to the pile.


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

Theme's ParametersIn JSN ImageShow Theme Pile, the parameters are separated in 2 groups located in the tabs as follows:

Thumbnail Panel– to set image presentation and interaction.Slideshow Panel– to set the title and description of the showcase.


Thumbnail PanelImage Source – select the image source to present.Max Width – set the maximum width of an element.Max Height – set the maximum height of an element.Overlap – set overlap amount (in pixels)

Overlap: 45px

Overlap: 10pxRotation – set maximum rotation angel (in degrees)

Rotation 50 degrees

Rotation 15 degreesBorder Thickness – set the thickness (in pixels) of thumbnail border

Border Thickness: 2px

Border Thickness: 10pxBorder Color – select the color of thumbnail border

Border Color: White

Border Color: BlackHover Color – select the color of thumbnail border when hovered

Hover Color: Red

Hover Color: GreenShow Shadow – defines whether to show or hide the shadow in thumbnail image

Show Shadow

No ShadowShadow Color – select the color of thumbnail shadow

Shadow Color: Black

Shadow Color: Light Blue

Slideshow PanelFade Duration – set the duration of image fading animation.Pickup Duration – set the duration of image pick-up / put-down animations.Show Title – defines whether to show or hide title text in Lightbox image.

Show Title – defines whether to show or hide title text in Lightbox image.Title CSS – set CSS styling to be applied to the title.Show Description – defines whether to show description text in Lightbox image.Description CSS – set CSS styling to be applied to the description text.

Title & Description inside LightBox image

Theme Masonry Configuration

JSN Theme Masonry in the front-end

Theme Masonry is newly-added to JSN ImageShow version 4.9.4along with the release of JSN Artista template. This theme implements theJavaScript grid layout library – Masonry, which “works by placing elements in optimal position based on available vertical space, sort of likea mason fitting stones in a wall” - masonry.desandro.com (http://masonry.desandro.com/)


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

Theme's ParametersIn JSN ImageShow Theme Masonry, he parameters are separated in 3 groups located in the tabs as follows:

Image– to set image presentation and interaction.Caption– to set the title and description of the showcase.Layout– to set the layout, transition and pagination type of the showcase.


Image PanelImage Source - select the image source to present.Border Thickness - set the thickness (in pixels) of thumbnail border.



Rounded Corner - set the rounded corner (in pixels) of each thumbnail.

Rounded Corner: 0px

Rounded Corner: 8px

Border Color - select the color of thumbnail border.

Border Color: Black

Border Color: Cyan

Click Action - select the action that will happen when viewer clicks on the focused thumbnail.

Caption PanelShow Caption - defines whether to show or hide caption panel.

Caption panel

Background Color - set the color of Information Panel background.

Background Color: Green

Panel Opacity - set the Panel Opacity.

Panel Opacity: 75%

Panel Opacity: 30%

Show Caption Title - defines whether to show or hide caption title.Title CSS - set CSS styling to be applied to the title.Show Caption Description - defines whether to show description text in Information Panel.Description Length Limitation - set the number of words limitation for description. If description contains more words than thelimitation number, it will be truncated and added '…' to the end.Description CSS - set CSS styling to be applied to the description text.

Layout PanelLayout Type - select the layout of the showcase (Fixed or Fluid)

FixedColumn Width - align items to a horizontal grid.

Column Width: 180

Column Width: 220

Fluid

Fluid Layout

Gutter - add horizontal and vertical space between item elements.

Gutter: 5

Gutter: 10

Is Fit Width - set the width of the container to fit the available number of columns, based on the size of container's parent element.Transition Duration - set the duration of the transition when items change position or appearance (default: '0.4s')Pagination Type - select pagination type of the showcase

All - All images in the slideshow will be shown.Infinite Scroll - The next images in the slideshow will be shown on page scroll

Images loading on Scroll

Load More - The next images in the slideshow will be shown on clicking button “Load More”

Button “Load More”

This website uses cookies to ensure you get the bestexperience on our website. More information(https://www.joomlashine.com/joomlashine/privacy-policy.html)

Got It!

jsn imageshow themes configuration manual...slideshow panel – to set the gallery behavior when it...

Documents