Theme Classic Configuration Manual

JSN ImageShow Theme Classic
Configuration Manual

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 - 2011 http://www.joomlashine.com

JSN ImageShow Theme Classic Configuration Manual © http://www.joomlashine.com
Follow us on Twitter http://www.twitter.com/joomlashine for more updates.

Table of Contents
JSN ImageShow Theme Classic.......................................................................................................................... 1
Configuration Manual ............................................................................................................................................. 1
Table of Contents .................................................................................................................................................................2
Introduction ...........................................................................................................................................................................3
Theme’s Parameters............................................................................................................................................................4
Image Panel ......................................................................................................................................................... 5
Thumbnail Panel ............................................................................................................................................... 13
Information Panel .............................................................................................................................................. 21
Toolbar Panel..................................................................................................................................................... 24
Slideshow ........................................................................................................................................................... 26
Live View................................................................................................................................... Error! Bookmark not defined.
What’s next?........................................................................................................................................................................29
Give feedback .................................................................................................................................................... 29
Check for updates ............................................................................................................................................. 29


Introduction
JSN ImageShow support the ability to use different themes in 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 Classic allowing you to build terrific galleries by tweaking over 70 parameters.
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.


Theme’s Parameters
JSN ImageShow Theme Classic parameters are grouped by the functionality and located at the tabs. The current
theme has parameters groups:

 Image Panel – to set the image presentation, background, watermark and overlay effects.

 Thumbnail Panel – to set the configuration related to image thumbnail.

 Information 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 – to set the gallery behavior when it plays the slideshow.
For information about each parameter groups read the further chapter of manual.


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 In – In 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 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 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 rotation,
new image moves in from random side 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 the ground.

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

 3D 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 the outside and place on the ground like page.

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 make
image floats in opposite direction. If visitor 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.

 Expand Out Mode Configuration

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

 Random

 Cross 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

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

 No Motion – There is no image motion at all. Images just stand on their initial position.

 Image Zooming – Image zooms in/out at center of the panel

“Image Zooming” action when user click on image

 Image Click Action – Defines the image action on mouse click in Expand Out presentation
mode. This is pretty much the same as in Fit In presentation mode.

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:
o Solid Color – Background 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 code is
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 Pattern – Background is filled with 1 of built-in patterns or custom predefined pattern. The
selection in parameter Background Value will be applied.

o Image – Background is filled with 1 of built-in images or custom predefined image. The selection in
parameter Background Value will be applied.

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

“Inner Shadow” presentation

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 Color – Defines the color around the image. The color code is defined through “Select
Color” option.

Watermark
 Show Watermark – Defines 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 Path – Defines the relative path to user’s 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 desired
watermark.

 Watermark Position – Defines 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.


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 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 let website visitor focus in image.

Overlay Effect
 Show Overlay Effect – Defines to use overlay effect or not. There are several options for this parameter:
o On During Slideshow – Show overlay effect only when slideshow process is started.
o Always On – Show overlay effect all the time, during both normal image browsing mode and
slideshow process.
o 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 effect looks like in real condition.
o Horizontal Floating Bar – Show vertical bar floating in horizontal direction.
o Vertical Floating Bar – Show horizontal bar floating in vertical direction.
o Winter Snow – Show falling snow effect.
o Old Movie – Show old movie noise and dust making it look as if it’s playing on an old projector.
o Water Bubbles – Show water bubbles floating from bottom to top
o Sparkle – Show sparkles making it look dazzling.


Thumbnail Panel

General

 Show Thumbnail Panel – Defines 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 Auto Show/Hide - Panel appears when user move mouse over Image Panel and hide after 3 seconds
when mouse is moved out.

o Always On – Panel is shown all the time.

o Off – Panel is completely hidden.

“Thumbnail Panel” presentation

 Panel Position – Defines 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.


“Thumbnai Panel” position

 Collapsible 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. It’s recommended to set here
the color highly contrasted to the 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 status which indicates the position of current visible thumbnail portion.

“Thumbnail Status” presentation

Depending on Thumbnail Browsing Mode this status appears in different way:
o Pagination – In this mode, status is presented as series of page indicators representing amount of
thumbnail pages. Current page’s indicator is a slightly bigger filled with color defined in Active
State Color parameter. User can clicks on any of page indicator to see thumbnails on that page.

o Sliding – In this mode, status is presented as horizontal holder bar with sliding cursor filled with
color defined in Active State Color parameter, indicating the current position of visible thumbnails.
User can click on any point of holder bar to make slider and thumbnails slides to that location.

 Thumbnails Presentation Mode – Defines how to display thumbnail


Thumbnails presentation

User can choose to display thumbnail as:
o Image – Thumbnail is presented as small image

o Number – Thumbnail is presented as number

 Thumbnails Browsing Mode – Defines how website visitors browse thumbnails. User can choose to set 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

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 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 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 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 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 Pagination browsing 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.


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

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 regular thumbnails to show more of them in the bar. In this case, big thumbnail appears
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


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 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 it might 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.


Information Panel

General

 Information Panel Presentation – Defines how to present Information Panel.




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

o No action

o 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 following selectors: 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 then limitation 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 to use 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 – Defines the CSS declaration to be applied to the description text. Since CSS support is limited,
it’s recommended to use only following selectors: font-family, font-size, font-weight, text-align and color.


Toolbar Panel

General

 Panel Presentation – Defines how to present Toolbar Panel.




“Toolbar Panel” presentation

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

 Panel 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.jpg

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’s common 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 turn this 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 zooming and 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 the next image appears.

 Hide Thumbnail Panel - Defines to close or not Thumbnail Panel when slideshow starts. It’s
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 Panel when slideshow
starts. It’s 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 Looping – Select “Yes” if you want the slideshow to start over again when the last image is
reached (looped).


Visual Preview
The Visual Preview on the right allows you to see how parameters are applied in real-time. Move the mouse on
any area of gallery, the yellow border will detect which part of gallery you want to change. Click on it and
appropriate tab of parameters will be shown in Parameters area.

Visual Preview and themes parameter interaction


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 drop–down list of showlist then choose one
2. Click on button Go
3. In a new window you can see the gallery with current settings.


What’s next?

Give feedback
We would love to hear what you say:

 Write review on Joomla Extensions Directory.

 Twitt about this extension if you love it.

 Submit a bug report and we will fix it ASAP.

Check for updates
We are constantly updating our extension repertoire, so don’t forget to visit JSN ImageShow product’s page to
check for something new.

Theme Classic Configuration Manual

More Related Content

Viewers also liked

Similar to Theme Classic Configuration Manual

More from JoomlaShine

Recently uploaded

Theme Classic Configuration Manual