jsnis theme classic configuration manual
TRANSCRIPT
-
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 -
8/10/2019 Jsnis Theme Classic Configuration Manual
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
-
8/10/2019 Jsnis Theme Classic Configuration Manual
3/29
Joomla! template JSN ImageShow Theme Classic Configuration Manual
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.
-
8/10/2019 Jsnis Theme Classic Configuration Manual
4/29
Joomla! template JSN ImageShow Theme Classic Configuration Manual
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.
-
8/10/2019 Jsnis Theme Classic Configuration Manual
5/29
Joomla! template JSN ImageShow Theme Classic Configuration Manual
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.
-
8/10/2019 Jsnis Theme Classic Configuration Manual
6/29
Joomla! template JSN ImageShow Theme Classic Configuration Manual
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.
-
8/10/2019 Jsnis Theme Classic Configuration Manual
7/29
Joomla! template JSN ImageShow Theme Classic Configuration Manual
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/10/2019 Jsnis Theme Classic Configuration Manual
8/29
Joomla! template JSN ImageShow Theme Classic Configuration Manual
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
-
8/10/2019 Jsnis Theme Classic Configuration Manual
9/29
Joomla! template JSN ImageShow Theme Classic Configuration Manual
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.
-
8/10/2019 Jsnis Theme Classic Configuration Manual
10/29
Joomla! template JSN ImageShow Theme Classic Configuration Manual
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.
-
8/10/2019 Jsnis Theme Classic Configuration Manual
11/29
Joomla! template JSN ImageShow Theme Classic Configuration Manual
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.
-
8/10/2019 Jsnis Theme Classic Configuration Manual
12/29
Joomla! template JSN ImageShow Theme Classic Configuration Manual
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.
-
8/10/2019 Jsnis Theme Classic Configuration Manual
13/29
Joomla! template JSN ImageShow Theme Classic Configuration Manual
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.
-
8/10/2019 Jsnis Theme Classic Configuration Manual
14/29
Joomla! template JSN ImageShow Theme Classic Configuration Manual
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.
-
8/10/2019 Jsnis Theme Classic Configuration Manual
15/29
Joomla! template JSN ImageShow Theme Classic Configuration Manual
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
-
8/10/2019 Jsnis Theme Classic Configuration Manual
16/29
Joomla! template JSN ImageShow Theme Classic Configuration Manual
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
-
8/10/2019 Jsnis Theme Classic Configuration Manual
17/29
Joomla! template JSN ImageShow Theme Classic Configuration Manual
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.
-
8/10/2019 Jsnis Theme Classic Configuration Manual
18/29
Joomla! template JSN ImageShow Theme Classic Configuration Manual
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.
-
8/10/2019 Jsnis Theme Classic Configuration Manual
19/29
Joomla! template JSN ImageShow Theme Classic Configuration Manual
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
-
8/10/2019 Jsnis Theme Classic Configuration Manual
20/29
Joomla! template JSN ImageShow Theme Classic Configuration Manual
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.
-
8/10/2019 Jsnis Theme Classic Configuration Manual
21/29
Joomla! template JSN ImageShow Theme Classic Configuration Manual
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
seconds when mouse is moved out.
o Show AlwaysPanel is shown all the time.
o HidePanel is completely hidden.
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.
-
8/10/2019 Jsnis Theme Classic Configuration Manual
22/29
Joomla! template JSN ImageShow Theme Classic Configuration Manual
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.
-
8/10/2019 Jsnis Theme Classic Configuration Manual
23/29
Joomla! template JSN ImageShow Theme Classic Configuration Manual
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.
-
8/10/2019 Jsnis Theme Classic Configuration Manual
24/29
Joomla! template JSN ImageShow Theme Classic Configuration Manual
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
seconds when mouse is moved out.
o Show Always *Panel is shown all the time.
o HidePanel is completely hidden.
Toolbar Panel presentation
Toolbar Panel Position *
Defines the position of Information Panel.
Toolbar Panelposition
-
8/10/2019 Jsnis Theme Classic Configuration Manual
25/29
Joomla! template JSN ImageShow Theme Classic Configuration Manual
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.
-
8/10/2019 Jsnis Theme Classic Configuration Manual
26/29
Joomla! template JSN ImageShow Theme Classic Configuration Manual
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).
-
8/10/2019 Jsnis Theme Classic Configuration Manual
27/29
Joomla! template JSN ImageShow Theme Classic Configuration Manual
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
-
8/10/2019 Jsnis Theme Classic Configuration Manual
28/29
Joomla! template JSN ImageShow Theme Classic Configuration Manual
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.
-
8/10/2019 Jsnis Theme Classic Configuration Manual
29/29
Joomla! template JSN ImageShow Theme Classic Configuration Manual
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