Jsn Imageshow 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 © 2006 - 2009 http://www.Joomla!shine.com

Official JSN ImageShow v2

Configuration Manualversion (the only) for Joomla! 1.5.x

Official JSN ImageShow v2 Configuration Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)

2

Table of Contents

Official JSN ImageShow v2 Configuration Manual ........................................................................................1Table of Contents .................................................................................................................................................................2

Basic Concepts.....................................................................................................................................................................3

Control Panel.........................................................................................................................................................................4

Showlists Manager...............................................................................................................................................................6

Showlist Settings .................................................................................................................................................................8

Showlist Images Manager ................................................................................................................................................11

Select Image Source..........................................................................................................................................................15

Add Images ..........................................................................................................................................................................17

Showcases Manager .........................................................................................................................................................19

Showcase Settings ............................................................................................................................................................21

Image Source Profiles Manager .....................................................................................................................................42

Image Source Profile Settings ........................................................................................................................................44

Maintenance.........................................................................................................................................................................48

Help & support ....................................................................................................................................................................50

About .....................................................................................................................................................................................52


3

Basic Concepts

Showlist

Showlist stores information about what images to display. JSN ImageShow v2 is able to connect to various image

sources and use images directly from there. Image details like title and description are also used from the original

source, but user has the choice to set his own details which will be stored in local database. User can have multiple

showlists connected to multiple image sources. More over, user can create multiple image source profiles and use

them as sources for multiple showlists.

Each showlist parameter is described in detailed in section Showlist Settings of this document.

Showcase

Showcase stores information about how to display images. JSN ImageShow v2 provides 69 parameters for user to

configure the look and feel of the gallery. User has control of almost everything starting from overall appearance

ending fine tuned elements like thumbnails, etc. User can create multiple showcases for different type of

presentation and use them to show multiple showlists. This creates ultimate amount of combination how user can

show his images.

Each showcase parameter is described in details in section Showcase Settings of this document.


4

Control Panel

Main screen

Control Panel is the home page where user can choose what actions to perform, see basic statistics and other useful

information.

control-panel.png

Main screen contains following areas:

1. Main Toolbar

This area contains following buttons:

Parameters – This button opens modal window with parameters for system configuration.

Help - This button opens Screen Help for current page.


5

2. Main Menu

This area contains menu items for user to select action to perform on the product. User moves mouse over items on

the left column, see immediately item’s content on the right and select necessary actions. All actions are self-

explained and easy to understand.

3. Tips

Tips area contains:

Tips content - Single tip taken randomly from built-in tips poll.

See all tips – Link that open popup browser window showing all tips followed one after another.

4. Recent Activities

This area contains 5 most recent actions that user made. Link See recent 50 activities will open modal window

with 50 recent actions, which is the maximum number of actions that JSN ImageShow records.

5. Latest Items

This area contains the latest showlists and showcases that was “touched”, i.e. created or edited. Every item listed

here is actually the direct link to it’s settings page.

6. Statistics

This area contains some important statistic data, like:

Total showlists - total number of showlists available in database

Total showcases - total number of showcases available in database

Total image source profiles - total number of image source profiles available in database

Last backup – Date of the last backup presented in form of dd/mm/yyyy

Last restoration - Date of the last restoration presented in form of dd/mm/yyyy


6

Showlists Manager

Main screen

Showlists Manager is the page where user sees all showlists available in database and can choose what actions to

perform on them.

showlists-manager.png


1. Main Toolbar

This area contains:

Publish / Unpublish - These buttons work pretty much like in Article Manager in Joomla!. They

publish/unpublish selected showlist(s).

Delete - This button deletes selected showlist(s) from database completely without asking for confirmation.

There is no way for restoration.

Edit - This button opens Showlist Settings page to edit the selected item. If there are multiple selected

items, the first one will be taken.

New - This button opens blank Showlist Settings page to create new item.




7

2. Main Menu

This area contains links for quick access to major product functions, such as: Control Panel, Showlist, etc. Link to

current page will be shown with black color and underlined text, pretty much the same as with some default

Joomla! components.

3. Showlists Filter

This area works pretty much like in Article Manager in Joomla!. There are following functional blocks in this

area:

Filter – This element allows user to filter showlists based on keywords in the title.

User type keyword in text field and push button Go to see filtered showlists. When user want to see all

showlists again, he push button Reset.

Select Access Level – This element allows user to filter showlists based on it’s access level.

Select State – This element allows user to filter showlists based on it’s publishing state.

4. Showlists Table

This area display list of currently available showlists in table with following columns:

# - This column displays numeric ordering of showlists.

Check box – This check box is for user to select a showlist and then perform operation such as Publish,

Unpublish and Delete

Title – This column displays showlist’s title.

Images – This column displays image icons clicking on which opens Showlist Images Manager page,

where user can operate on all images in the showlist.

Published – This column displays showlist’s publishing state.

Order – This column displays edit box to manually reorder showlists. User inputs the ordering number of

each showlist and click button in column header to save. Also user can use up/down arrows to

change showlist position.

Access Level – This column displays showlist’s access level settings.

Hits - This column displays showlist’s hit numbers.

ID – This columns displays showlist’s ID in database. This id is important when user want to use JSN

ImageShow Plug-in to show flash presentation in article content. In that case, user will need to input

showlist id to select it.


8

Showlist Settings

Main Screen

Showlists Settings is the page where user can edit settings of some existing showlist or for the new one.

showlist-settings.png


1. Main Toolbar

This area contains:

Manage Images - This button opens Showlist Images Manager to manage images in the showlist.

Save - This button saves all showlist settings in database and redirects user to Showlists Manager page.

Apply - This button saves all showlist settings in database but leaves user on current page.

Close - This button redirects user to Showlists Manager page without saving showlist settings.



9

2. Showlist Details

This area contains fields to configure showlist.

Title – Defines showlist title to indentify it-self internally in the product. Also, later in showcase settings

you can choose to show in flash presentation this showlist title instead of each image title.

Published – Defines to publish showlist or not. When showlist is unpublish it can not be selected to present

in flash presentation.

Order – Defines showlist position among others.

Access Level – Defines the user group that can access the showlist.

Hits – Defines the number showlist hits. Every time when user see a showlist at flash presentation that’s a

hit.

Description – Defines showlist description. Later in showcase settings you can choose to show in flash

presentation this showlist description instead of each image description. Notice that the description will be

presented in the form of plain text without HTML markup.

Link – Defines showlist link. Later in showcase settings you can choose to show in flash presentation this

showlist link instead of each image link.

Alternative Content – Defines the alternative content for the showlist.

This alternative content will be presented in HTML code and visible to screen readers and search engines,

but not website visitors. It’s recommended to have alternative content for every showlist since it’s good for

both accessibility and SEO.

There are 2 options to choose alternative content:


10

o Showlist and image details – With this option, alternative content will be plain list of showlist and

images details including title, description and link

o Joomla! article - With this option, alternative content will be any Joomla! article user selects.

Article selector appears when user selects this option.

Authorization Message - Defines the message that will be shown to viewer who doesn’t have required

access to the showlist. User can select any Joomla! article to use as authorization message.


11

Showlist Images Manager

Blank Screen (no images)

showlist-images-blank.png

This screen contains following areas:

1. Main Toolbar

This area contains:

Showlists Manager - This button redirects user to Showlists Manager page, where he can operate with all

available showlists

Showlist Settings - This button redirects user to Showlist Settings page, where he can configure showlist

parameters



12

2. Secondary Toolbar

This area contains:

Heading – Text string indicating the current showlist. The showlist name is the direct link to it’s settings

page. The word Showlist is also a link to the Showlists Manager page.

Select Images Source - This button redirects user to the page where he can select image source to take

images from.

3. Content Panel

This area contains simple information message guiding user to perform appropriate action.

Normal Screen

showlist-images-normal.png

Normal Showlist Images screen is displayed when there are some images in the showlist. This screen contains

following areas:


13

1. Main Toolbar

This area contains:


available showlists


parameters



This area contains:



Add Images – This button redirects user to the page where he can add / remove images to / from the

showlist

Refresh images details – This button retrieves all images’ details from the original source and updates

those details in the showlist if there is some new changes.

Synchronize selected – This button retrieves selected images’ details from the original source and

overwrites those details in the showlist. This button will clear all local details (configured manually by

user) of all selected images and make their details synchronized with the original source.

Remove selected – This button removes selected images from showlist (but doesn’t delete original images

from the original source). JSN ImageShow will never touch images in original source, it just takes images

from the source for presentation.

Purge obsolete – This button removes all obsolete images (deleted in the original source) from showlist. If

images are deleted in original source, then JSN ImageShow will not be able to present it and that requires

user to purge obsolete images.

3. Content Panel

This area contains columns:

# - This column displays numeric ordering of images in the showlist.

Check box – This check box is for user to choose and then perform operations like Synchronize selected or

Remove selected.

Thumbnails – Small thumbnails with original size and orientation. If some image is delete in the source it

will be shown with this icon


14

Details – This column contains image’s details including title, description and link

By default, all image details are synchronized with the original source. But user can desynchronize and set

custom values. In this case, all user custom values will be stored in local database and used from there.

Local details will be marked with this icon

Note: The important thing here is only image metadata can be desynchronized. Image file it-self is always

used directly from original source.

Order – This column displays edit box to manually reorder images. User inputs the ordering number of

each image and click button “ ” in column header to save. Also user can use up/down arrows to change

image position.

Actions – This column contains buttons for user to operate on particular image.

o Synchronize button “ ” - This button retrieves image’s details from original source and update

that in the showlist. This button will clear local details of the image and make it synchronized with

original source

o Edit button “ ” - This button opens modal window for user to edit image details.

By default, all images details are synchronized with the source so all edit fields are disabled. If user

wants to set his own details (which will be stored in local database) he deselects the Synchronized

check box, so edit field gets enabled and he can start input his own details.

If user wants to have data synchronized with the original source again, he checks the box and edit

field will become disabled.

o Remove button “ ” – This button removes the image from showlist.


15

Select Image Source

Main Screen

showlist-images-selectsource.png

1. Main Toolbar

This area contains:


available showlists


parameters



16


This area contains:



Choose selected source – This button accepts current image source selection and redirects user to the next

page to choose images.

Cancel – This button redirects user back to Showlist Images Manager page discarding any settings made

on current page.

3. Content Panel

This area allows user to choose one from available image sources by clicking on radio button. Currently JSN

ImageShow support following sources:

Phoca Gallery

JoomGallery

Image folder on local server

Flickr

Picasa Web Album

Note: If user selects one of external sources like Flick or Picasa a modal window will appear to select image source

profiles. User can create new profile right on that modal window, if there are none existed. More information about

image source profile is located in section Image Source Profile Settings of this document.

http://www.phoca.cz/phocagallery

http://www.joomgallery.net/

http://www.flickr.com/

http://picasaweb.google.com/


17

Add Images

Main Screen

showlist-images-addimages.png

1. Main Toolbar

This area contains:


available showlists


parameters



18


This area contains:



Save changes – This button save image selection user made to the showlist and redirects user to Showlist

Images Manager page to see all images in showlist.

Cancel – This button redirects user back to Showlist Images Manager page discarding any settings made

on current page.

3. Categories in Image Source

This area displays all categories inside selected image source in tree-like structure. Near each category there might

be asterisk (*) mark indicating that the category has some selected images.

4. Images in Image Source

This area contains:

Mini Toolbar – This section contains some mini tools for user to operate on images.

o Switch to Detail View / Switch to Thumbnail View – This button allows user to switch between 2

available views. Detail View is good when user has big amount of images, while Thumbnail View is

good for clear image presentation.

o Select all and Deselect All – These links select or deselect all images.

o Revert Selection – This link will make selected images unselected and vice versa.

Images Panel – This section displays images from selected category in Image Source Categories area on

the left. If user points mouse over the thumbnail, the bigger thumbnail with image title appears.

User can clicks right on the thumbnail to select it or check the box underneath. Selected images are marked

with orange background for distinction.


19

Showcases Manager

Main Screen

showcases-manager.png


1. Main Toolbar

This area contains:


publish/unpublish selected showcase(s).

Copy - This button makes a copy of selected showcase(s) and give it name comprised of the text Copy of

and the original name. Since it can take a lot of time and efforts to configure a desired showcase, it might

be very handy to make a copy of the basic showcase and modify it.

Delete - This button deletes selected showcase(s) from database completely without asking for

confirmation. There is no way for restoration.

Edit - This button opens Showcase Settings page to edit the selected item. If there are multiple showcases

selected items, the first one will be taken.

New - This button opens blank Showcase Settings page to create new item.




20

2. Main Menu

This area contains links for quick access to major product functions, such as: Control Panel, Showcase, etc. Link

to current page will be shown with black color and underlined text, pretty much the same as with some default

Joomla! components.

3. Showcases Filter


area:

Filter – This element allows user to filter showcases based on keywords in the title. User type keyword in

text field and push button Go to see filtered showcases. If user wants to see all showcases again, he pushes

button Reset.

Select State – This element allows user to filter showcases based on it’s publishing state.

4. Showcases Table

This area display list of currently available showcases in table with following columns:

# - This column displays numeric ordering of showcases.

Check box – This check box is for user to select a showcase and then perform operation such as Publish,

Unpublish, Copy and Delete

Title – This column displays showcase’s title.

Preview – This column displays preview icons clicking on which opens Showcase Preview modal

window, where user can overview how the gallery will looks like with current showcase settings. The flash

presentation in preview area has fixed size of 500px x 300px, but actual size will be as configured in the

showcase.

Published – This column displays showcase’s publishing state.

Order – This column displays edit box to manually reorder showcases. User inputs the ordering number of

each showcase and click button in column header to save. Also user can use up/down arrows to change

showcase position.

ID – This columns displays showcase’s ID in database. This id is important when user want to use JSN

ImageShow Plug-in to show flash presentation in article content. In that case, user will need to input

showlist id to select it.

Note: Clicking on column header text resorts showcases in asc/desc orders based on values in that column.


21

Showcase Settings

Main Screen

showcase-settings.png


1. Main Toolbar

This area contains page title and series of buttons to operate with showcases settings. Bellow is description of each

button on main toolbar.

Save - This button saves all showcase settings in database and redirects user to Showcases Manager page.

Apply - This button saves all showcase settings in database but leave user on current page.

Close - This button redirects user to Showcases Manager page without saving showcase settings.



22

2. Showcase Details

This area contains fields to setup showcase details.

Title – Defines showcase title to indentify it-self internally in the product

Published – Defines to publish showcase or not. When showcase is unpublish it can not be selected to

present in flash presentation.

Order – Defines showcase’s position among others.

Overall Width (px, %) – Defines the overall width of gallery presentation. User can specify either pixel or

% value

Overall Height (px) - Defines the overall height of gallery presentation. User can specify only pixel value

3. Showcase Parameters

General

Appearance

general_appearance.png

Round Corner Radius (px) – Defines corner radius of presentation area rectangle. By default, presentation

area is regular rectangle with right corner. But sometimes user might want to have rounded corner area for

better integration. In this case he can set desired corner radius.

Border Stoke (px) - Defines the thickness (in pixels) of the border.

Border Color - Defines the color of the border. User clicks Select Color to open color selector and can

pick desired color or type color code manually to the edit field.

System


23

Number Images Preloading – Defines the number of images to be preloaded each time some image is

showing.

general_images-preloading.png

This is the number of preloading images before and after current image. For example, ‘2’ will preload 4

images: 2 before and 2 after currently showing image.

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.

image-panel_presentation-fitin-mode.png


24

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.

image-panel_presentation-expandout-mode.png

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

None

Random

Fade – Current image fades out, new fades in

image-panel_presentation-fitin-fade.png

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.


25

image-panel_presentation-fitin-push.png

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

image-panel_presentation-fitin-zoom.png

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.

image-panel_presentation-fitin-3dflip.png

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 Transition Timing (sec) – Defines how long does it take to complete single image

transition. This is the duration of both current image out and new image in.

image-panel_presentation-transition-timing.png


26

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-panel_presentation-zooming.png

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

None

Random

Cross Fade – New image fades upon current image

image-panel_presentation-expandout-fade.png

Linear Fade – Linear fade from random direction and orientation


27

image-panel_presentation-expandout-linear.png

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

image-panel_presentation-expandout-radial.png

Black Dim – Current image dims to black, new image dims from black

image-panel_presentation-expandout-dim.png

White Burn – Current image burns to white, new image burns from white

image-panel_presentation-expandout-burn.png

o Image Transition Timing (sec) – Defines how long does it take to complete single image

transition. This is duration of both current image out and new image in.

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.


28

Center-based Motion – Image zooms in/out at center of the panel

image-panel_presentation-motion-center.png

Edge-based Motion – Image zooms in/out and floats from one side to another.

image-panel_presentation-motion-edge.png

o Image Motion Timing (sec) – Defines how long does it take to complete image motion. To make

motion effect visible, it’s recommended to set this parameter bigger then Image Transition Timing

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

Image Panel

Background

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


29

image-panel_background.jpg

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.

Image Panel

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.


30

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.

Image Panel

Others

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

image-panel_inner-shadow.png

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.


31

Thumbnail Panel

General

Show Panel – Defines to show Thumbnail Panel or not.

thumbnail-panel_presentation.png

User can set to show Thumbnail Panel for more image browsing convenience. When displayed Thumbnail

Panel occupies certain portion of the presentation area reducing the size of Image Panel. To make website

visitors more focused on images user can hide Thumbnail Panel giving whole presentation area to Image

Panel. In this way, website visitor are not able to choose to see some image by it’s thumbnail, but can still

browse images by side navigator presented in Toolbar Panel.

Panel Position – Defines to where to put Thumbnail Panel.

thumbnail-panel_position.png

User can put Thumbnail Panel on Top or Bottom of the presentation area moving Image Panel to the

opposite side.


32

Collapsible Panel – Defines to allow website visitor to close Thumbnail Panel at presentation area or not.

User can set to allow website visitor to choose whenever he wants to see Thumbnail Panel or not. If

allowed a small close icon appears when website visitor move mouse over Thumbnail Panel. Clicking on

that icon will close the Thumbnail Panel. When closed little thumbnail icon appears clicking on which will

reopen Thumbnail Panel.

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-panel_thumbnails-status.png

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.

Active State Color – Defines the color of active elements in Thumbnail Panel


33

thumbnail-panel_active-color.png

Thumbnail Panel

Thumbnail

Thumbnails Presentation Mode – Defines how to display thumbnail

thumbnail-panel_presentation-mode.jpg

User can choose to display thumbnail as:

o Image – Thumbnail is presented as small image

o Number – Thumbnail is presented as number


34

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. Only single thumbnail page is shown at

a time with navigation buttons on both sides. 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.

thumbnail-panel_pagination.png

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.

thumbnail-panel_sliding.png

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


35

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-panel_thumbnail-size.png

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 Color - Set the color of thumbnail border in normal state (not selected). It’s recommended to

set distinctive color compared to Active State Color

Thumbnail Panel

Big Thumbnail

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


36

thumbnail-panel_big-thumbnail.jpg

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


37

thumbnail-panel_big-thumbnail-size.jpg

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

Panel Presentation – Defines how to present Information Panel.

info-panel_presentation.png

In “Auto” mode, panel will appear when viewer point mouse over Image Panel and hide after 3 seconds

when mouse is moved out.

Panel Position – Defines the position of Information Panel.


38

info-panel_position.png

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

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

info-panel_bg-color.png

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

here to make text highly visible.

Title

info-panel_content.png

Show Title – Defines to show Title or not.

Title Source – Defines what to use as Title. There are 2 options to choose:

o Image title – With this option, native image title is displayed and changed every time image

transits.

o Showlist title – With this option, the title defined in showlist settings is displayed permanently for

all images.

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.


39

Apply Link to Title – Defines to apply link to title or not. The link is configured in section Link

Description

Show Description – Defines to show Description or not.

Description Source – Defines what to use as Description. There are 2 options available:

o Image description - With this option, native image description is displayed and changed every time

image transits.

o Showlist description – With this option, the description defined in showlist settings is displayed

permanently for all images.

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.

Apply Link to Description – Defines to apply link to description or not. The link is configured in section

Link

Link

Show Link – Defines to show the link or not.

Link Source – Defines what to use as the link. There are 2 options available:

o Image link - With this option, native image link is used and changed every time new image appears

accordingly

o Showlist link – With this option, the link defined in showlist settings is used permanently for all

images.

Link Presentation – Defines how to present the link. There are 2 options available:

o URL - With this option, the link is presented in natural URL state, i.e. http://www...

o Text - With this option, the link is presented as the text defined in parameter Link Text

Link Text – Defines the text to represent the link

If natural link is too long and ugly, then you can hide it under nice short link text defined in this parameter.

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.

Open Link In – Defines where to open the link. It’s recommended to set link to be opened in new browser

to not distract image viewing process.


40

Toolbar Panel

General

Show Panel – Defines how to present Toolbar Panel.

toolbar-panel_presentation.png

In Auto mode, panel will appear when viewer point mouse over Image Panel and hide after 3 seconds when

mouse is moved out.

Panel Position – Defines the position of Information Panel.

toolbar-panel_position.png

User 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 Image Navigation - Defines to show Previous / Next arrow on Toolbar Panel.


41

toolbar-panel_content.jpg

It’s recommended to turn this on, since it’s 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

Action On Slideshow Start

Switch To Expand Out Presentation Mode - Defines to switch or not to Expand Out presentation mode

when slideshow starts. It’s recommended to turn this on since the Image Motion feature of Expand Out

mode can really bring life to slideshow process.

Close Thumbnail Panel - Defines to close or not Thumbnail Panel when slideshow starts. It’s

recommended to turn this on 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 to turn this on to let viewer focus on the slideshow, not browsing images.

Hide Watermark - Defines to hide watermark or not when slideshow starts. It’s recommended to turn this

on to let viewer focus on the slideshow, not on any other elements.

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.


42

Image Source Profiles Manager

Main Screen

profiles-manager.png


1. Main Toolbar

This area contains:


publish/unpublish selected profile(s).

Delete - This button deletes selected profile(s) from database completely without asking for confirmation.

There is no way for restoration.

Edit - This button opens Image Source Profile Settings page to edit the selected item. If there are multiple

profiles selected items, the first one will be taken.

New - This button opens blank Image Source Profile Settings page to create new item.




43

2. Main Menu



Joomla! components.

3. Profiles Filter


area:

Filter – This element allows user to filter profiles based on keywords in the title. User type keyword in text

field and push button Go to see filtered profiles. When user want to see all profiles again, he push button

Reset.

Select State – This element allows user to filter profiles based on it’s publishing state.

Select Source Type – This element allows user to filter profiles based on it’s source type.

4. Profiles Table

This area display list of currently available profiles in table with following columns:

# - This column displays numeric ordering of profiles.

Check box – This check box is for user to select a profile and then perform operation such as Publish,

Unpublish, Copy and Delete

Title – This column displays profile’s title.

Showlist – This column displays showlist icons clicking on which opens modal window with the list of

all showlists that are currently using this image source profile. Near the icon there is a number indicating

the number of those related showlists.

Published – This column displays profile’s publishing state.

Source Type – This column displays profile’s source type.

Action – This columns displays trash icon clicking on which will delete the profile. All showlists that

are related to the profile will be reset, i.e. all images inside the showlist will be removed from database (but

not deleted in original source).


44

Image Source Profile Settings

Main Screen

profile-settings.png


1. Main Toolbar

This area contains:

Save - This button saves all profile settings in database and redirects user to Image Source Profiles

Manager page.

Apply - This button saves all profile settings in database but leaves user on current page.

Close - This button redirects user to Image Source Profiles Manager page without saving profile settings.


2. Image Source Profile Details

This area contains fields to configure profile details.

Title – Defines profile title to indentify it-self in the product

Published – Defines to publish profile or not. When showcase is unpublish it can not be selected for any

showlists.


45

3. Image Source Profile Parameters

This area contains fields to configure profile parameters. Depending on the concrete source type parameters are

defined as following:

Folder

Root Image Folder – Defines the path to root folder (starting from the Joomla! root URL) that contains

folders with images to be presented.

JSN ImageShow is capable to scan any folder for images and add them to the slideshow. User can use

either standard built-in Joomla! Media Manager or FTP client to create folders and upload images.

Supported image formats are PNG, GIF and JPG.

profile-folder-rootfolder.png

Notice, that value to be defined in this parameter is not the folder that contain images directly, but the root

folder that contain other folders with images. As in screenshot above, user should set value imageshow,

not folder1, folder2, etc. On the other hand, folder1, folder2 and folder3 should contain images, but not

other subfolders.

Flickr

API Key – Defines user’s Flickr API Key.


46

profile-flickr-apikey.png

User can access to your API Key from Flickr menu Your Apps. Regular API key looks like

3c6ae99ca9fbb2e24698583a465a9b2d. If you don’t have API Key yet, then you can create one easily and

for free here. Make sure you are logged in Flick first.

API Secret Key – Defines user’s Flickr Secret API Key.

Secret API Key is additional level of security by Flickr and is located at the same location as API Key.

Regular Secret API key looks like 34321df78e6e117a.

Screen Name – Defines user’s Flickr screen name.

http://www.flickr.com/services/apps

http://www.flickr.com/services/apps/create/apply/


47

profile-flickr-screenname.png

User can see his/her screen name at top right corner of Flickr page or in Your account page.

Image Size – Defines the Flickr image size that will be used in flash presentation at front-end.

profile-flickr-imagesize.png

User can choose the Flickr image size to be presented in flash presentation. It’s recommended to use size

Medium since every image in Flickr has the version with this size. However, if your images are of high

quality then you should use Large. The size Original is not recommended, since images are too big and it

will take time for them to be downloaded.

Picasa

User Name – Defines user’s Google account username (not email address).

User need to define here only the username part of your Google email account. For example, john_doo, but

not [email protected]

http://www.flickr.com/account/


48

Maintenance

Main Screen

maintenance.png


1. Main Toolbar

This area contains:




49

2. Main Menu



Joomla! components.

3. Maintenance Operations

This area contains edit fields for user to perform maintenance operations. There are 2 sections.

Backup data

In this section, user performs backup operation with following parameters:

Backup Options – Defines what assets to backup: showlists, showcases or both.

Backup Filename – Defines the name of backup file. User can check box Attach timestamp to filename

to create more detailed file name.

Compression – Defines what type of compression to apply to backup file.

Restore data

In this section, user performs restoration operation. User just need to browse the previously created backup file and

click Restore. All current showlist and showcase will be replaced with those imported from the backup file.

Notice, that when restoring showlist, all related images and image source profiles are also restored.


50

Help & support

Main Screen

help-and-support.png


1. Main Toolbar

This area contains:




51

2. Main Menu



Joomla! components.

3. Support Resources Information

This area contains briefing information about the most important resource where use can get help and direct link to

those resources. In short, there are following resources:

Online Documentation

Support Forum

Dedicated Support System

http://www.joomlashine.com/docs/

http://www.joomlashine.com/forum/

http://www.joomlashine.com/support/dedicated/


52

About

Main Screen

about.png


1. Main Toolbar

This area contains:




53

2. Main Menu



Joomla! components.

3. Product Information

This area contains briefing information about the product and some important links:

Main Joomla!Shine website

Feedback form

Dedicated Support System

JSN ImageShow product page

http://www.joomlashine.com/

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

http://www.joomlashine.com/support/dedicated/

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

Jsn Imageshow Configuration Manual

Documents

multiple image sources

multiple image source

multiple showlists

image details

showlist images manager

image source profiles

image source profile

system configuration