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

e appears like it is 3D Flip – Current image is taken out of the ground and flipped. New imag

on the backside and place on the ground.

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

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

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.

Image Click Action - Defines the image action on



“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

R t adial Fade – The same concept as Linear fade but with radial gradien

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

B lack Dim – Current image dims to black, new image dims from black

“Black Dim” transition in “Expand Out” image presentation mode

W hite hite Burn – Current image burns to white, new image burns from w

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



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

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

de.

mode. This is pretty much the same as in Fit In presentation mo

Background

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

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

code is defined in parameter

Background Value.

top and bottom color code is

defined in parameter Background Value as comma separated values.

nt color. The first and second color code

is defined in parameter Background Value as comma separated values.

Image Panel background presentation

o Solid Color – Background is filled with simple solid color. The color

o Linear Gradient – Background is filled with linear gradient color. The

o Radial Gradient – Background is filled with radial gradie



ttern – Background is filled with 1 of built-in patterns or custom predefined pattern. The

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

parameter Background Value will be applied.

o Pa

selection in parameter Background Value will be applied.

Inner Shadow

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

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

hadow works best with Expand Outside presentation mode or Fit Inside presentation mode with

h “Select

Show Watermark – Defines to show watermark or not. User can use his own watermark image in Image

Watermark Path – Defines the relative path to user’s watermark image. Watermark image can be one of

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.

“Inner Shadow” presentation

inner s

some background patterns.

Inner Shadow Color – Defines the color around the image. The color code is defined throug

Color” option.

Watermark

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

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



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

er can set to show Show Thumbnails Status – Defines to show thumbnails position status bar or not. Us

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:

ar 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

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 b



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 he Pagination – In this mode, thumbnails are placed in pages. Gallery automatically calculates t

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

m the sets and navigation buttons. Each thumbnail is placed at fixed distance of 10 pixel fro

neighbor, 5px on each side.

“Sliding” thumbnails browsing mode

To browse thumbnails website visitor moves mouse cursor on one side of Thumbnail Panel

can

on any point of holder bar to make slider and thumbnails slides to that location.

ination mode. If you have

Sliding

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.

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

click

Thumbnail Row – Define the number of rows to present thumbnails in Pag

many images to show, then you might want to put thumbnails on multiple rows. Notice, that in

browsing mode, this parameter is automatically set to 1.



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.

User can set his own background color for appropriate styling. It’s recommended to set some dark color

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

Title

“Information Panel” background color

here to make text highly visible.

Panel Click Action

o No action

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

anel” content presentation

Title CSS – Defines the CSS declaration to be applied to the title. Since CSS support is limited, it’s

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

“Information P

Show Title – Defines to show Title or not.

recomm



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

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

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.

Description

Show Description – Defines to show Description or not.

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.

and color.

Link

Show Link – Defines to show the link or not.



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



anel edge.

Tooltip – Select “Yes” if you want to show tooltips that appears when user move mouse over each

element in the panel.

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 P

Panel

Functions

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

toolbar-panel_content.jpg

y.

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.

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

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.



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.


http://extensions.joomla.org/extensions/photos-a-images/photo-flash-gallery/3585

http://twitter.com/?status=Cool%20Joomla%20gallery%20from%20JoomlaShine.com%20http://ow.ly/3Seth

http://www.joomlashine.com/contact-us/product-feedback.html

http://www.joomlashine.com/joomla-extensions/jsn-imageshow.html

http://www.twitter.com/joomlashine

Technology

Theme Classic Configuration Manual