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
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.
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.
Official JSN ImageShow v2 Configuration Manual http://www.joomlashine.com (version for Joomla! 1.5.x) 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 items content on the right and select necessary actions. All actions are selfexplained 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 its 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
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 Main screen contains following areas: 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. Parameters This button opens modal window with parameters for system configuration. Help - This button opens Screen Help for current page. 6
Official JSN ImageShow v2 Configuration Manual http://www.joomlashine.com (version for Joomla! 1.5.x) 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 its access level. Select State This element allows user to filter showlists based on its 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 showlists 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 showlists publishing state. Order This column displays edit box to manually reorder showlists. User inputs the ordering number of each showlist and click button change showlist position. in column header to save. Also user can use up/down arrows to
Access Level This column displays showlists access level settings. Hits - This column displays showlists hit numbers. ID This columns displays showlists 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.
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 Main screen contains following areas: 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. Help - This button opens Screen Help for current page. 8
Official JSN ImageShow v2 Configuration Manual http://www.joomlashine.com (version for Joomla! 1.5.x) 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 thats 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. Its recommended to have alternative content for every showlist since its good for both accessibility and SEO. There are 2 options to choose alternative content:
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 doesnt 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 Help - This button opens Screen Help for current page. 11
Official JSN ImageShow v2 Configuration Manual http://www.joomlashine.com (version for Joomla! 1.5.x) 2. Secondary Toolbar This area contains: Heading Text string indicating the current showlist. The showlist name is the direct link to its 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
Official JSN ImageShow v2 Configuration Manual http://www.joomlashine.com (version for Joomla! 1.5.x) 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 Help - This button opens Screen Help for current page.
2. Secondary Toolbar This area contains: Heading Text string indicating the current showlist. The showlist name is the direct link to its settings page. The word Showlist is also a link to the Showlists Manager page. 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 doesnt 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
Official JSN ImageShow v2 Configuration Manual http://www.joomlashine.com (version for Joomla! 1.5.x) Details This column contains images 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 images 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: 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 Help - This button opens Screen Help for current page.
15
Official JSN ImageShow v2 Configuration Manual http://www.joomlashine.com (version for Joomla! 1.5.x) 2. Secondary Toolbar This area contains: Heading Text string indicating the current showlist. The showlist name is the direct link to its settings page. The word Showlist is also a link to the Showlists Manager page. 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: 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 Help - This button opens Screen Help for current page.
17
Official JSN ImageShow v2 Configuration Manual http://www.joomlashine.com (version for Joomla! 1.5.x) 2. Secondary Toolbar This area contains: Heading Text string indicating the current showlist. The showlist name is the direct link to its settings page. The word Showlist is also a link to the Showlists Manager page. 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 Main screen contains following areas: 1. Main Toolbar This area contains: Publish / Unpublish - These buttons work pretty much like in Article Manager in Joomla!. They 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. Parameters This button opens modal window with parameters for system configuration. Help - This button opens Screen Help for current page.
19
Official JSN ImageShow v2 Configuration Manual http://www.joomlashine.com (version for Joomla! 1.5.x) 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 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 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 its 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 showcases 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 showcases 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 showcases 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 Main screen contains following areas: 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. Help - This button opens Screen Help for current page.
21
Official JSN ImageShow v2 Configuration Manual http://www.joomlashine.com (version for Joomla! 1.5.x) 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 showcases 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
Official JSN ImageShow v2 Configuration Manual http://www.joomlashine.com (version for Joomla! 1.5.x) 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
Official JSN ImageShow v2 Configuration Manual http://www.joomlashine.com (version for Joomla! 1.5.x) 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
Official JSN ImageShow v2 Configuration Manual http://www.joomlashine.com (version for Joomla! 1.5.x) 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 its normal scale. There are 2 zooming level available.
image-panel_presentation-zooming.png Open Image Link - In this mode, when user clicks on image, its 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
Official JSN ImageShow v2 Configuration Manual http://www.joomlashine.com (version for Joomla! 1.5.x) 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, its 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 users watermark image. Watermark image can be one of most popular image format on web JPG, PNG and GIF. User can utilize image selector to locate 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 its 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
Official JSN ImageShow v2 Configuration Manual http://www.joomlashine.com (version for Joomla! 1.5.x) 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 pages 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
Official JSN ImageShow v2 Configuration Manual http://www.joomlashine.com (version for Joomla! 1.5.x) 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
Official JSN ImageShow v2 Configuration Manual http://www.joomlashine.com (version for Joomla! 1.5.x) 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. Its 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). Its 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
Official JSN ImageShow v2 Configuration Manual http://www.joomlashine.com (version for Joomla! 1.5.x) 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 its width. If big thumbnail has vertical layout this parameter is its height. Big Thumbnail Border (px) - Set the thickness (in pixels) of big thumbnail border. Its not recommended to set big value here, since it might harm overall thumbnails presentation. Big Thumbnail Color - Set the color of big thumbnail border. Its recommended to set white (#ffffff) 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
Official JSN ImageShow v2 Configuration Manual http://www.joomlashine.com (version for Joomla! 1.5.x) 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. Its 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, its recommended to use only following selectors: font-family, font-size, font-weight, text-align and color. 38
Official JSN ImageShow v2 Configuration Manual http://www.joomlashine.com (version for Joomla! 1.5.x) 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, its 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, its 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. Its 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 Its recommended to turn this on, since its common experience of browsing image gallery. Show Slideshow Player - Defines to show Play / Stop button to control slideshow process. Its recommended to turn this on, since its common experience of browsing image gallery. Show Fullscreen Switcher - Defines to show Full-screen Switcher to allow viewer to see gallery in fullscreen. Its 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. Its 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. Its 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. Its 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. Its 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 Main screen contains following areas: 1. Main Toolbar This area contains: Publish / Unpublish - These buttons work pretty much like in Article Manager in Joomla!. They 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. Parameters This button opens modal window with parameters for system configuration. Help - This button opens Screen Help for current page.
42
Official JSN ImageShow v2 Configuration Manual http://www.joomlashine.com (version for Joomla! 1.5.x) 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. Profiles 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 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 its publishing state. Select Source Type This element allows user to filter profiles based on its 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 profiles 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 profiles publishing state. Source Type This column displays profiles 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 Main screen contains following areas: 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. Help - This button opens Screen Help for current page.
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
Official JSN ImageShow v2 Configuration Manual http://www.joomlashine.com (version for Joomla! 1.5.x) 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 users 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 dont 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 users 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 users Flickr screen name.
46
Official JSN ImageShow v2 Configuration Manual http://www.joomlashine.com (version for Joomla! 1.5.x) 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. Its 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 users 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 Main screen contains following areas: 1. Main Toolbar This area contains: Parameters This button opens modal window with parameters for system configuration. Help - This button opens Screen Help for current page.
48
Official JSN ImageShow v2 Configuration Manual http://www.joomlashine.com (version for Joomla! 1.5.x) 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. 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 Main screen contains following areas: 1. Main Toolbar This area contains: Parameters This button opens modal window with parameters for system configuration. Help - This button opens Screen Help for current page.
50
Official JSN ImageShow v2 Configuration Manual http://www.joomlashine.com (version for Joomla! 1.5.x) 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. 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 Main screen contains following areas: 1. Main Toolbar This area contains: Parameters This button opens modal window with parameters for system configuration. Help - This button opens Screen Help for current page.
52
Official JSN ImageShow v2 Configuration Manual http://www.joomlashine.com (version for Joomla! 1.5.x) 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. 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

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

JSN Imageshow Configuration Manual

Uploaded by

Copyright:

Available Formats

Official JSN ImageShow v2 Configuration Manual

version (the only) for Joomla! 1.5.x

Showlist Images Manager

Select Image Source

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

Show Panel Defines to show Thumbnail Panel or not.

Thumbnails Presentation Mode Defines how to display thumbnail

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

Panel Presentation Defines how to present Information Panel.

Show Panel Defines how to present Toolbar Panel.

Image Source Profiles Manager

Image Source Profile Settings

API Key Defines users Flickr API Key.

Help & support

JSN ImageShow product page

You might also like