P. 1
JSN ImageShow PRO Official User Manual

JSN ImageShow PRO Official User Manual

|Views: 1,641|Likes:
Published by masterzinhu

More info:

Published by: masterzinhu on Mar 03, 2010
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

11/21/2012

pdf

text

original

JSN ImageShow PRO Official User Manual

This documentation included in the JSN ImageShow PRO Pack is release under Commercial Proprietary license and not intended for public distribution. Copyright © 2007 JoomlaShine.com.

JSN ImageShow PRO Official User Manual © JoomlaShine.com

Table of Contents
JSN ImageShow PRO Official User Manual.................................................................................... 1
Table of Contents............................................................................................................................................2 Configuration....................................................................................................................................................3
GENERAL PARAMETERS ...............................................................................................................................................3 IMAGE SOURCE ..............................................................................................................................................................3 SLIDESHOW PRESENTATION.......................................................................................................................................3 IMAGE ANIMATION.......................................................................................................................................................5 Transition........................................................................................................................................................................5 Motion..............................................................................................................................................................................5 Background Color and Imagery................................................................................................................................6 OVERLAY EFFECT AND IMAGERY..............................................................................................................................7 CAPTION..........................................................................................................................................................................9 LINKING PARAMETERS ...............................................................................................................................................11 ALTERNATIVE CONTENT...........................................................................................................................................12 OTHER PARAMETERS..................................................................................................................................................13

2

JSN ImageShow PRO Official User Manual © JoomlaShine.com

Configuration
In this documentation you will find detailed description for all parameters available in JSN ImageShow module administration.

GENERAL PARAMETERS
Module Class Suffix
The suffix to be added to class of slideshow’s wrapper div. By default the slideshow wrapper div has class “jsn-imageshow”. You can add any suffix string to that class for CSS styling. Example: “-main” - Container div will have class “jsn-imageshow-main”.

IMAGE SOURCE
Image Folder
The source folder containing images to be presented (starting from the Joomla root URL). JSN ImageShow is capable to scan any folder for images and add them to the slideshow. You can use either standard Joomla! Media Manager or FTP client to create folders and upload images. Once images are ready you can specify the containing folder starting from the Joomla! root URL. Supported image formats are PNG, GIF and JPG. Example: “images/stories/myphotos” – Module will scan folder “myphotos” under the folder “images/stories” for all images with file extension .jpg, .gif or .png and add them to slideshow.

SLIDESHOW PRESENTATION
Width
The width of slideshow module specified in pixels or percentage. You can specify the width of slideshow module in absolute pixels or relative percentage of module’s container. If you are not sure what width value to specify, use “100%”. JSN ImageShow will resize the image to ensure the best image presentation. You don’t need to bother about matching the module’s width with images’ width. Example: • • “640” – Module will have width of 640 pixels. “75%” - Module will have width of 75% of it’s container.

3

JSN ImageShow PRO Official User Manual © JoomlaShine.com

Height
The height of slideshow module specified in pixels. You can specify the height of slideshow module in pixels. JSN ImageShow will resize the image to ensure the best image presentation. You don’t need to bother about matching the module’s height with images’ height. Example: “200” - Module will have height of 200 pixels.

Slide Timing
The duration of each image presentation specified in seconds. You can specify the duration of each image presentation in seconds. Depending on your photos theme, you can have quick dynamic or slow smooth slideshow. Example: “6” – Each image will be shown for 6 seconds and then the next will go on.

Slideshow Loop
The amount of slideshow loop times. You can specify how many times to loop your slideshow. Value “0” will make infinite loop. For header image presentation infinite loop works best. However, for banners presentation you might want to play slideshow only several times. Example: • • • “0” – Slideshow will be looped infinitely. “1” – Slideshow will be played only one time (no repetition). “2” – Slideshow will be played two times (1 repetition).

Image Order
The order of image presentation in the slideshow. You can specify the order of image presentation in the slideshow. By default, slideshow module will conduct images list in the order of their appearance in source folder. However, you can specify reverse or random order. Options: • • • “Forward” – Images will be presented in the order of their appearance in source folder. Usually this is alphabetical order. “Backward” - Images will be presented in the reverse order of their appearance in source folder. “Random” - Images will be presented in the randomized order.

4

JSN ImageShow PRO Official User Manual © JoomlaShine.com

IMAGE ANIMATION
Enable Ken Burns Effect
Definition whether to enable Ken Burns effect. You can specify to enable special smooth image motion effect called Ken Burns. In fact by enabling this parameter module will do following: “Motion Timing” will be set to be 1 seconds longer then “Slide Timing” “Motion Ease” will be set to be “linear”

Transition
Transition Timing
The duration of each transition between images specified in seconds. You can specify how long does it takes to transit one image to another in your slideshow. Example: • • “0” – No transition between images. The next image will just show up. “2” – Transition process will take 2 seconds.

Transition Type
The type of image transition. You can specify how one image will be transited to another one. Options: • • • • “None” - No transition between images. The next image will just show up. “Fade” – The next image will be cross faded upon the current one. “Dim” – The current image will dim down to the blackness and the next one will come up from the blackness. “Burn” – The current image will shine up to the whiteness and the next one will come down from the whiteness.

Motion
Motion Timing
The duration of image motion in seconds. You can specify the duration of motion applied to each image in the slideshow. JSN ImageShow supports 3 type of motions: movement, zooming and rotation. All motion parameters will be specified in 3 fields “Move Range”, “Zoom Range” and “Rotation Range” (see further). You can apply 1 or all 3 motions at once. Example: • “0” – No image motion. 5

JSN ImageShow PRO Official User Manual © JoomlaShine.com • “3” – Image motion will take 3 seconds

Motion Ease
The ease type of image motion animation. You can specify how image motion will be animated.

Move Range
The percentage range to move image. You can specify the range in which to perform image movement. This parameter must be specified as percentage of the module’s dimension. Actual movement amount and direction will be randomly counted from specified range for each image motion. Images will be automatically scaled to fit the module’s boundary. Example: • • “0” – No image movement “3” – Image will be moved in the distance of 3% of module’s dimension

Zoom Range
The percentage range to zoom image. You can specify the range in which to perform image zooming. This parameter must be specified as an additional percentage of the module’s dimension. Actual zooming amount and direction (zoom in / zoom out) will be randomly counted from specified range for each image motion. Images will be automatically scaled to fit the module’s boundary. Example: • • “0” – No image zooming “15” – Image will be zoomed in the range of 115% of module’s dimension

Rotation Range
The degree range to rotate image. You can specify the range in which to rotate perform image rotation. This parameter must be specified as angle degree. Actual rotation amount and orientation (clockwise rotation / counterclockwise rotation) will be randomly counted for each image rotation. Images will be automatically scaled to fit the module’s boundary. Example: • • “0” – No image rotation “15” – Image will be rotated in the range of angle of 15 degree

Background Color and Imagery
Background Type
The background type selection. You can specify numerous of slideshow background to make you slideshow have a better look. Also, since background image will be loaded and shown first, it can be used to keep your visitors from boring while they are waiting for slideshow images to be loaded. 6

JSN ImageShow PRO Official User Manual © JoomlaShine.com Options: • • • • “No background” – Slideshow module will have transparent background so everything under the slideshow module will be visible. “Color Fill” – Slideshow module will have background filled with the color specified in the field “Background Color Fill”. “Predefined image” – Slideshow module will have background image specified in the field “Background Predefined Image”. “Custom Image” – Slideshow module will have background image path to which is specified in the field “Background Custom Image”.

Background Color Fill
The slideshow background color when “Background Type” parameter is set to “Color Fill”. The color value must be specified in hex format without any prefix symbols. Example: “FF0000” – Fill slideshow background with red color

Background Predefined Image
The slideshow background image when “Background Type” parameter is set to “Predefined image”. You can specify 1 of numerous predefined background images. All background images are smoothly tiled so will look perfectly with any module’s dimension.

Background Custom Image
The slideshow background image when “Background Type” parameters is set to “Custom image”. You can apply your own image to the background slideshow by specifying path to that image starting from Joomla! Root URL. Example: “images/stories/mybackground.png” – Module will look for the image “mybackground.png” in folder “images/stories” and apply it as background image of the slideshow

OVERLAY EFFECT AND IMAGERY
Show Inner Shadow
Definition whether to show inner shadow around the module’s boundary. You can add surrounding inner shadow to create the feeling that images are located under the webpage.

Show Progress Bar
Definition whether to show the progress bar indicating image loading process. You can specify to show the progress bar indicating image loading process during the slideshow. The progress bar will have the same width as the slideshow module and be place opposite the slideshow caption (see later about caption). 7

JSN ImageShow PRO Official User Manual © JoomlaShine.com

Show Overlay Effect
Definition whether to show overlay effect or not. You can add overlay effects to make your slideshow more lively and stunning. There is numbers of preinstalled overlay effects for you to choose and the more will come in the future. See section “Overlay effect” bellow for details.

Overlay Effect
The overlay effect to be applied to the slideshow. You can choose one of numerous preinstalled overlay effects to suite your slideshow theme best. Options: • • • • • • • • • • • • “Winter Snow” “Autumn Leaves” “Spring Rain” “Summer Flowers” “Aquarium Bubbles” “Love Hearts” “Spark Fall” “Star Fly” “Magic Field” “Floating Bars (Horizontal)” “Floating Bars (Vertical)” Old Movie

Show Overlay Image
Definition whether to show overlay image or not. You can use any image as an overlay image and place it wherever you like inside the slideshow area. Overlay image will stand above all slideshow images so you can use it as a watermark or additional decoration to your slideshow.

Overlay Image Path
The path to overlay image file starting from Joomla! root URL. You can use any image of supported formats PNG, GIF and JPG. Example: “images/stories/watermark.png” – Module will look for the image “watermark.png” in folder “images/stories” and show it at position specified in the field “Overlay Image Position”

8

JSN ImageShow PRO Official User Manual © JoomlaShine.com

Overlay Image Opacity
The opacity of overlay image specified in percents. You can specify any opacity value for your overlay image in the range 0% – 100%. Example: • • • “0” – Overlay image is not visible at all “50” – Overlay image is semitransparent “100” – Overlay image is fully visible

Overlay Image Position
The position of overlay image specified in pixels. You can place your overlay image wherever you like inside the slideshow area. Position values are counted as distance from Top Left corner of the slideshow area to Top Left corner of the overlay image. Horizontal value (X axis) and Vertical value (Y axis) must be separated by comma. Example: “20, 10” – Overlay image will be place at position 20px from left and 10px from top slideshow area.

CAPTION
Show Caption
Definition whether to show caption or not. You can specify to show caption for your slideshow. You have full control under what text to present and how to show it. This feature is useful when you are using JSN ImageShow as a header image module.

Caption Source
The text source for caption. You can use one of predefined text source or your own text for caption. Options: • • • “Page Title” – Caption will be the same text as from the “<title>” tag. This text may vary depending on the SEO component you are using. “Site Name” – Caption will be the text you specified as site name in Joomla! configuration page. “Custom Text” – Caption will be the text you specified in the field “Caption Custom Text” (see later)

Caption Custom Text
The custom user defined text to be used as caption. You can specify your own custom text for caption. Since caption will be presented in single line, it’s recommended for you to specify text with appropriate length. This parameter has effects only when “Caption Source” field is set to “Custom Text”. Example: 9

JSN ImageShow PRO Official User Manual © JoomlaShine.com “Welcome to my site”.

Caption Font
The display font of caption. You can specify one of 3 standard fonts for caption. These fonts are installed on almost every modern computer so you don’t need to worry about incompatibility. For the best presentation you should choose the same font that is used in your Joomla! template. Options: • • • “Arial” “Verdana” “Times New Roman”

Caption Size
The size of caption font specified in points. You can specify the font size of caption text. Since caption will be presented in single line it’s recommended for you to choose font size depend on the caption length. The longer the caption length, the smaller it’s font size. Example: “12” – Caption text font size will be set to 12 point.

Caption Color
The color of caption text specified in hex code format. You can specify any color for your caption text. Since caption text is standing on the background bar it’s recommended to choose color with high contrast compared to that of background bar. Example: “00FF00” – Caption text color will be set to green.

Caption Alignment
The horizontal alignment of caption text. You can specify how to align your caption text. Options: • • • “Left” “Center” “Right”

Caption Position
The vertical position of caption with background. You can specify the caption to be shown on top or bottom of the slideshow area. Options: 10

JSN ImageShow PRO Official User Manual © JoomlaShine.com • • “Top” “Bottom”

Caption Padding
The padding space surrounding caption text specified in pixels. You can specify vertical and horizontal padding space separated by comma. Example: “6,10” – Padding up & bottom with 6px, left & right with 10px

Caption Background Opacity
The opacity level of caption background. You can specify any opacity value for your caption background in the range 0% – 100%. Example: • • • “0” – Caption background is not visible at all “50” Caption background is semitransparent “100” – Caption background is fully visible

Caption Background Color
The color of caption background specified in hex code format. You can specify any color for your caption background by using hex code format. It’s recommended to choose color with high contrast compared to that of caption text. Example: “0000FF” – Caption background color will be set to blue.

LINKING PARAMETERS
Enable Image Link
Definition whether to assign link to slideshow images. You can specify any link to slideshow images. This can be useful when you have special image slideshow for some article and want visitors to go to that article when they click to slideshow image.

Image Link URL
The link URL where to redirect visitors when they click on slideshow image. You can specify any absolute link URL starting from http:// Example: “http://www.joomlashine.com” 11

JSN ImageShow PRO Official User Manual © JoomlaShine.com

Open Link Type
Definition how to open image link URL. You can specify how to open image link. Options: • • “New Browser” – Open in new browser window. “Current Browser” – Open in current browser window.

ALTERNATIVE CONTENT
Enable Alternative Content
Definition whether to enable alternative content. You can specify the alternative content of your image slideshow to be shown to search engines’ bots and screen readers. This feature allows you to have both stunning image slideshow for human and alternative content for machines at one time.

Display Alternative Content
Definition whether to display alternative content. In most cases you might want to make alternative content visible for visitors. But if it’s necessary you can make it visible only for machines and invisible for visitors.

Alternative Content Type
Definition the alternative type to be displayed shown for search engines and screen readers. For simple alternative content you can show your custom text string. For complicated alternative content you can show single module or multiple modules from certain module position. Options: • • • “Custom Text” – Use custom text specified in parameter Alternative Parameter bellow. “Module ID” – Use module id of which is specified in parameter Alternative Parameter bellow. “Module Position” – Use all modules located in the module position specified in parameter Alternative Module Position bellow.

Alternative Parameter
The value set in accordance with parameter Alternative Content Type above. Example: • • • “Our wedding photo album” (in the case parameter Alternative Content Type is set to Custom Text) “25” (in the case parameter Alternative Content Type is set to Module ID) “newsflash” (in the case parameter Alternative Content Type is set to Module Position)

12

JSN ImageShow PRO Official User Manual © JoomlaShine.com

OTHER PARAMETERS
Load SWFObject Library
Definiton whether to load javascript library “SWFOject” for swf file presentation. For proper module functioning “SWFObject” javascript library must be loaded. However, this library is very popular and it might be already loaded by current template or other modules. If so, it’s not necessary to reload it here.

13

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->