JSN Imageshow Configuration Manual

Official JSN ImageShow v2
Configuration Manual
version (the only) for Joomla! 1.5.x
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 Manual © http://www.joomlashine.com (version for Joomla! 1.5.x)
Table of Contents
Official JSN ImageShow v2 Configuration Manual ........................................................................................1
Table 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
2
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.
3
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.
4
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
5
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.

6
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.
7
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.
8
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:
9
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.
10
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
11
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:
12
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

13
 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.
14
Select Image Source
Main Screen
showlist-images-selectsource.png
1. Main Toolbar
This area contains:
available showlists
parameters
15
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.
16
Add Images
Main Screen
showlist-images-addimages.png
1. Main Toolbar
This area contains:
available showlists
parameters
17
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.
18
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.
19
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.
20
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.
21
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
22
 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
23
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.
24
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
25
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
26
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.
27
 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.
28
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.
29
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.
30
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.
31
 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
32
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
33
 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
34
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.
35
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
36
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.
37
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.
38
 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.
39
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.
40
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.
41
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.
42
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).
43
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.
44
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.
45
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.
46
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 john_doo@gmail.com
47
Maintenance
Main Screen
maintenance.png
1. Main Toolbar
This area contains:
48
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.
49
Help & support
Main Screen
help-and-support.png
1. Main Toolbar
This area contains:
50
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
51
About
Main Screen
about.png
1. Main Toolbar
This area contains:
52
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
53

JSN Imageshow Configuration Manual

Загружено:

Сведения о документе

Исходное описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

JSN Imageshow Configuration Manual

Загружено:

Авторское право:

Доступные форматы

Official JSN ImageShow v2

 Help - This button opens Screen Help for current page.

 Total showlists - total number of showlists available in database

 Total showcases - total number of showcases 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

 Help - This button opens Screen Help for current page.

 # - This column displays numeric ordering of showlists.

 Title – This column displays showlist’s title.

 Published – This column displays showlist’s publishing state.

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

 Hits - This column displays showlist’s hit numbers.

 Help - This button opens Screen Help for current page.

 Order – Defines showlist position among others.

 Alternative Content – Defines the alternative content for the showlist.

Showlist Images Manager

Blank Screen (no images)

 Help - This button opens Screen Help for current page.

 Help - This button opens Screen Help for current page.

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

will be shown with this icon

Select Image Source

 Help - This button opens Screen Help for current page.

 Image folder on local server

 Picasa Web Album

 Help - This button opens Screen Help for current page.

3. Categories in Image Source

4. Images in Image Source

 Help - This button opens Screen Help for current page.

 # - This column displays numeric ordering of showcases.

 Title – This column displays showcase’s title.

 Published – This column displays showcase’s publishing state.

 Help - This button opens Screen Help for current page.

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

 Order – Defines showcase’s position among others.

 Fit In Mode Configuration

 Expand Out Mode Configuration

 Panel Position – Defines to where to put Thumbnail Panel.

 Big Thumbnail Size (px) – Defines to the size of big thumbnail

 Panel Position – Defines the position of Information Panel.

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

 Show Title – Defines to show Title or not.

 Link Text – Defines the text to represent the link

 Panel Position – Defines the position of Information Panel.

Action On Slideshow Start

Image Source Profiles Manager

 Help - This button opens Screen Help for current page.

 # - This column displays numeric ordering of profiles.

 Title – This column displays profile’s title.

 Published – This column displays profile’s publishing state.

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

Image Source Profile Settings

 Help - This button opens Screen Help for current page.

2. Image Source Profile Details

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

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

 Screen Name – Defines user’s Flickr screen name.

 Help - This button opens Screen Help for current page.

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

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

Help & support

 Help - This button opens Screen Help for current page.