Jsnis Theme Classic Configuration Manual

8/10/2019 Jsnis Theme Classic Configuration Manual

1/29

This documentation is release under Creative Commons Attribution-Non-Commercial-Share Alike 3.0 Unported

Licence. You are free to print this document for convenient usage.

Copyright 2008 - 2012 http://www.joomlashine.com

JSN ImageShow Theme Classic

Configuration Manual

www.facebook.com/joomlashine

www.twitter.com/joomlashine

www.youtube.com/joomlashine
http://www.facebook.com/joomlashinehttp://www.facebook.com/joomlashinehttp://www.twitter.com/joomlashinehttp://www.twitter.com/joomlashinehttp://www.youtube.com/joomlashinehttp://www.youtube.com/joomlashinehttp://www.youtube.com/joomlashinehttp://www.twitter.com/joomlashinehttp://www.facebook.com/joomlashine


2/29

Joomla! template JSN ImageShow Theme Classic Configuration Manual

2

Table of Contents

JSN ImageShow Theme Classic..............................................................................................................................

Conf igurat ion Manual..................................................................................................................................................

Table of Contents ..........................................................................................................................................................

Introduction ....................................................................................................................................................................Themes Parameters .....................................................................................................................................................

Container Panel.........................................................................................................................................................

Image Panel ...............................................................................................................................................................

Thumbnail Panel......................................................................................................................................................

Caption Panel........................................................................................................................................................... 2

Toolbar Panel........................................................................................................................................................... 2

Slideshow.................................................................................................................................................................. 2

Visual Preview..............................................................................................................................................................

Live View ................................................................................................................................................................... 2Whats next?.................................................................................................................................................................

Give feedback .......................................................................................................................................................... 2

Check for updates................................................................................................................................................... 2


3/29


3

Introduction

JSN ImageShow supports the ability to use different themesin the gallery for best photo presentation. Each theme

has the unique group of parameters for building gallery or slideshow. By default, JSN ImageShow comes with the

Theme Classicallowing you to build terrific galleries.

Please note that, Theme Classicprovided you with 2 skins: JavaScriptand Flash:

Skin Flash: Comes with 70+parameters. However, it cant 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 wontget 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. ParametersTake control on the gallery presentation with over 70 parameters.

2. Live ViewSee 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.


4/29


4

Themes Parameters

JSN ImageShow Theme Classic parameters are grouped by the functionality and located at the tabs. In addition,

The current theme has parameters groups:

ContainerPanelto set the configuration related to container such as background color, round corner,

border stoke, border color.

Image Panelto set the image presentation, background, watermark and overlay effects.

Thumbnail Panelto set the configuration related to image thumbnail.

Caption Panelto set the title, description and link of showcase.

Toolbar Panelto set the functionality of the gallery including next photo, previous photo, pause, play

and more.

SlideShow Panelto set the gallery behavior when it plays the slideshow.

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


5/29


5

Container Panel

General

Background Color - Set background color of the area outside the gallery. This color will be visible only

when parameter Round Corner Radius is not set toZero.

Round CornerSet the radius (in pixels) of gallery rounded corner

Border StokeSet the thickness (in pixels) of gallery border

Border ColorSet the color of gallery border. Click Select Color to pick desired color or set color cod

manually

Image Panel

Image Presentation

Default Presentation Mode Defines the image presentation mode to activate when gallery starts.

Images can be presented in 2 different modes:

o Fit InIn this mode image is resized to be fitted inside Image Panel area keeping original

orientation and proportion.

Fit In image presentation

Image is resized to be fit in 90%of Image Panel area. The rest 10%area is for background

visibility. Image is shown with light shadow 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 see the background.

o Expand OutIn this mode image is resized to cover the whole Image Panel area.


6/29


6

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 and Image Panel area are not the same.

Fit In Mode Configuration

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

Random

Fade

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 rotationnew image moves in from random side with zooming in and from slight rotation.


7/29


7

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 FlipCurrent image is taken out of the ground and flipped. New image appears like it i

on the backside and place on the ground.

3D Flip transition in Fit In image presentation mode

Page CurlCurrent image is taken out from the ground like a page and move out of the

screen. New image is flying in from the outside 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

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

No ActionIn this mode, image is not clickable at all

Image ZoomingIn this mode, image is zoomed and user can move mouse pointer to mak

image floats in opposite direction. If visitor clicks again, i mage will zoom out to its norma

scale. There are 2 zooming level available.


8/29


8

Image Zooming action when user click on image

Open Image Link- In this mode, when user clicks on image, its link will be opened in

browser.

o Image Shadow *Defines shadow around images in Fit in presentation mode. Select Yes if

you want to show it.

Expand Out Mode Configuration

o Image Transition Type *Defines the image transition type in Expand Outside presentation mod

Random

Cross FadeNew image fades upon current image

Cross Fade transition in Expand Out image presentation mode

Linear FadeLinear fade from random direction and orientation


9/29


9

Linear Fade transition in Expand Out image presentation mode

Radial FadeThe same concept as Linear fade but with radial gradient

Radial Fade transition in Expand Out image presentation mode

Black DimCurrent image dims to black, new image dims from black

Black Dim transition in Expand Out image presentation mode

White BurnCurrent image burns to white, new image burns from white

White Burn transition in Expand Out image presentation mode

No transition -No effects are applied

o Image Motion Type*Defines the motion type each time new image appears. If most of your

images have the same orientation, then use Centerinstead of Edge.


10/29


10

No MotionThere is no image motion at all. Images just stand on their initial position.

Zoom inImage zooms in at center of the panel

Zoom outImage zooms out at center of the panel

Image Zooming action when user click on image

Random - Image zooms in or out randomly

o 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 mak

image floats in opposite direction. If visitor clicks again, image will zoom out to its normalscale. There are 2 zooming level available.


11/29


11

Open Image Link -In this mode, when user clicks on image, its link will be opened in

browser.

o 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 TypeDefines the background typeto present in Image Panel.

Image Panel background presentation

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

o Solid ColorBackground is filled with simple solid color. The color code is defined in parameter

Background Value.

o Linear Gradient *

Background is filled with linear gradient color. The top and bottom color codis defined in parameter Background Value as comma separated values.

o Radial Gradient *Background is filled with radial gradient color. The first and second color

code is defined in parameter Background Value as comma separated values.

o PatternBackground is filled with 1 of built-in patterns or custom predefined pattern. The

selection in parameter Background Value will be applied.

o ImageBackground is filled with1 of built-in images or custom predefined image. The selection

parameterBackground Value will be applied.

Background ValueSet value for the background type defined in the parameter Background

Inner Shadow *

Show Inner ShadowDefines to show inner shadow in Image Panel or not.


12/29


12

Inner Shadowpresentation

User can set to show inner shadow in Image Panel to add more physical feeling to the presentation. This

inner shadow works best with Expand Outside presentation mode or Fit Inside presentation mode with

some background patterns.

Inner Shadow ColorDefines the color around the image. The color code is defined through Select

Color option.

Watermark *

Show WatermarkDefines to show watermark or not. User can use his own watermark image in Image

Panel. This can improve the brand of the presentation and protect images from screen copy.

Watermark PathDefines the relative path to users watermark image. Watermark image can be one of

most popular image format on web JPG, PNG and GIF. User can utilize image selector to locate desiredwatermark.

Watermark PositionDefines the watermark position inside Image Panel. User can align watermark to 1

of 4 corner inside Image Panel.

Watermark Offset (px)Defines the distance from watermark to Image Panel edge.


13/29


13

image-panel_watermark-offset.png

Depending on the kind of watermark user can setup the appropriate offset distance. For example, logo

watermark should be place at some distance from panel edge, while corner-badge watermark should bestick 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 let website visitor focus in image.

Overlay Effect *

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

o On During SlideshowShow overlay effect only when slideshow process is started.

o Show Always

Show overlay effect all the time, during both normal image browsing mode and

slideshow process.

o OffDo not show overlay effect at all.

Overlay Effect TypeSelect the overlay effect to be used. You can use function Showcase Live View

to see how selected overlay effect looks like in real condition.

o Horizontal Floating BarShow vertical bar floating in horizontal direction.

o Vertical Floating BarShow horizontal bar floating in vertical direction.

o Winter Snow

Show falling snow effect.

o Old MovieShow old movie noise and dust making it look as if its playing on an old projector.

o Water BubblesShow water bubbles floating from bottom to top

o SparkleShow sparkles making it look dazzling.


14/29


14

Thumbnail Panel

General

Thumbnail Panel PresentationDefines to show Thumbnail Panel or not. User can set to show

Thumbnail Panel for more image browsing convenience. There are several options for this parameter.

o Show On Mouseover * -Panel appears when user move mouse over Image Panel and hide after 3

seconds when mouse is moved out.

o Show Always Panel is shown all the time.

o HidePanel is completely hidden.

ThumbnailPanel presentation

Thumbnail Panel PositionDefines to where to put Thumbnail Panel. You can put Thumbnail Panel on

Top or Bottom of the presentation area moving Image Panel to the opposite side.


15/29


15

Thumbnai Panel position

Collapsible Thumbnail Panel *Defines to allow website visitor to close Thumbnail Panel at

presentation area or not. If allowed a small close icon appears to allow user to close the Thumbnail Panel.

When closed little thumbnail icon appears clicking on which will reopen Thumbnail Panel.

Panel Background Color

Set the color of Information Panel background. Its recommended to set here

the color highly contrasted to the color of text being shown in the panel.

Normal State ColorDefines the color of elements in their normal idle state.

Active State ColorDefines the color of active elements in Thumbnail Panel.

Normal State Color and Active State Colorin Thumbnail Panel

Thumbnail

Show Thumbnails Status *Defines to show thumbnails position status bar or not. User can set to show

thumbnail position status which indicates the position of current visible thumbnail portion.

Thumbnails Presentation Mode *Defines how to display thumbnail


16/29


16

Thumbnails presentation

User can choose to display thumbnail as:

o ImageThumbnail is presented as small image

o NumberThumbnail is presented as number

Thumbnails Browsing Mode *Defines how website visitors browse thumbnails. User can choose to se

1 of following modes:

o Pagination

In this mode, thumbnails are placed in pages. Gallery automatically calculates the

number of thumbnails to be included in single page and the left position adjustment to place

thumbnail page exactly at center of Thumbnail Panel.

Pagination thumbnails browsing mode


17/29


17

To browse thumbnails website visitor clicks side navigation buttons which fades out current

thumbnails page and fades in new one. Also visitor can clicks on any of page indicator to see

thumbnails on that page.

o SlidingIn 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 opposite direction to reveal hidden items. The movement speed

is calculated based on the distance of mouse cursor from thumbnail bar center point. Also visitor ca

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 Paginationmode. If you have

many images to show, then you might 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 Paginationbrowsing mode,

based on this parameter gallery will 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.


18/29


18

Thumbnail dimension settings

Thumbnail Border (px)- Set the thickness (in pixels) of thumbnail border. Its not recommended to set

big value here, since it might harm overall thumbnails presentation.

Thumbnail Opacity * (%)- Set the thumbnail opacity. By default this parameter is set to 50% to make

inactive thumbnails look pale compared to the active one. But you can set 100% to make all thumbnails

look the same.


19/29


19

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 wan

to reduce the size of regular thumbnails to show more of them in the bar. In this case, big thumbnail appea

on mouse over and can help to understand more about the image.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


20/29


20

Big Thumbnail size

Since Big thumbnail is shown in original orientation this parameter defines the boundary size for big

thumbnail. If big thumbnail has horizontal layout this parameter is i ts width. If big thumbnail has vertical

layout this parameter is its height.

Big Thumbnail Border (px)- Set the thickness (in pixels) of big thumbnail border. Its not recommendedto set big value here, since it might harm overall thumbnails presentation.

Big Thumbnail Color- Set the color of big thumbnail border. Its recommended to set white (#ffffff) colo

for best look-n-feel.


21/29


21

Caption Panel

General

Information PanelPresentationDefines how to present Information Panel.

o Show On Mouseover * -Panel appears when user move mouse over Image Panel and hide after 3


o Show AlwaysPanel is shown all the time.


InformationPanel 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 ColorDefines the background color of Information Panel.


22/29


22

Information Panel background color

User can set his own background color for appropriate styling. Its 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.

o No action *

o Open Image LinkIn this mode, when user clicks on image, its link will be opened in browser.

Title

Information Panel contentpresentation

Show TitleDefines to show Title or not.

Title CSSDefines the CSS declaration to be applied to the title. Since CSS support is limited, i ts

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

Description

Show DescriptionDefines to show Description or not.


23/29


23

Description Length Limitation (words) Set the number of words limitation for description. If

description contains more words then limitation number, than description is truncated and ... added to the

end. If user set 0 there will not be any limitations.

Description CSSDefines the CSS declaration to be applied to the description text. Since CSS support is

limited, its recommended to use only following selectors: font-family, font-size, font-weight, text-align

and color.

Link

Show LinkDefines 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, its recommended to use only following selectors: font-family, font-size, font-weight,

text-align and color.


24/29


24

Toolbar Panel

General

Toolbar Panel PresentationDefines how to present Toolbar Panel.

o Show On Mouseover -Panel appears when user move mouse over Image Panel and hide after 3


o Show Always *Panel is shown all the time.


Toolbar Panel presentation

Toolbar Panel Position *

Defines the position of Information Panel.

Toolbar Panelposition


25/29


25

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 / Nextarrow on Toolbar Panel.

toolbar-panel_content.jpg

Its recommended to turn this on, since its common experience of browsing image gallery.

Show Slideshow Player- Defines to show Play / Stopbutton to control slideshow process. Its

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

Show Fullscreen Switcher- Defines to show Full-screen Switcherto allow viewer to see gallery in full-

screen. Its recommended to turn this on only when you are showing hi -quality images.


26/29


26

Slideshow

Slideshow Presentation *

Enable Ken-burn Effect- Defines to turn on or not this effect during slideshow process. This effect

creates the smooth image zooming and movement, making it looks like video.

Show StatusDefines to show timer clock or not for displaying the time to the next image. This timer

appears in 3 seconds before the next image appears.

Hide Thumbnail Panel - Defines to close or not Thumbnail Panelwhen slideshow starts. Its

recommended to hide the panel to let viewer focus on the slideshow, not browsing images.

Hide Image Navigation - Defines to hide or not image navigation on Toolbar Panelwhen slideshow

starts. Its recommended hide the navigation 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 LoopingSelect Yes if you want the slideshow to start over again when the last image is

reached (looped).


27/29


27

Visual Preview

The Visual Preview on the rightallows 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

appropriate tab of parameters will be shown in Parametersarea.

Visual Preview and themes parameter interaction


28/29


28

Live View

When you the configuration gallery parameters are done, you can view it before publishing by using feature Live

View.

See gallery in real action with selected showlist

1. Click on dropdown list of showlist then choose one

2. Click on button Go

3. In a new window you can see the gallery with current settings.


29/29


Whats next?

Give feedback

We would love to hear what you say:

Write review on Joomla Extensions Directory.

Twitt about this extensionif you love it.

Submit a bug reportand we will fix it ASAP.

Check for updates

We are constantly updating our extension repertoire, so dont forget to visitJSN ImageShow products pageto

check for something new.

www.facebook.com/joomlashine

www.twitter.com/joomlashine

www.youtube.com/joomlashine
http://extensions.joomla.org/extensions/photos-a-images/photo-flash-gallery/3585http://extensions.joomla.org/extensions/photos-a-images/photo-flash-gallery/3585http://twitter.com/?status=Cool%20Joomla%20gallery%20from%20JoomlaShine.com%20http://ow.ly/3Sethhttp://twitter.com/?status=Cool%20Joomla%20gallery%20from%20JoomlaShine.com%20http://ow.ly/3Sethhttp://www.joomlashine.com/contact-us/product-feedback.htmlhttp://www.joomlashine.com/contact-us/product-feedback.htmlhttp://www.joomlashine.com/joomla-extensions/jsn-imageshow.htmlhttp://www.joomlashine.com/joomla-extensions/jsn-imageshow.htmlhttp://www.joomlashine.com/joomla-extensions/jsn-imageshow.htmlhttp://www.joomlashine.com/joomla-extensions/jsn-imageshow.htmlhttp://www.facebook.com/joomlashinehttp://www.facebook.com/joomlashinehttp://www.twitter.com/joomlashinehttp://www.twitter.com/joomlashinehttp://www.youtube.com/joomlashinehttp://www.youtube.com/joomlashinehttp://www.youtube.com/joomlashinehttp://www.twitter.com/joomlashinehttp://www.facebook.com/joomlashinehttp://www.joomlashine.com/joomla-extensions/jsn-imageshow.htmlhttp://www.joomlashine.com/contact-us/product-feedback.htmlhttp://twitter.com/?status=Cool%20Joomla%20gallery%20from%20JoomlaShine.com%20http://ow.ly/3Sethhttp://extensions.joomla.org/extensions/photos-a-images/photo-flash-gallery/3585

Documents

Jsnis Theme Classic Configuration Manual