JSN ImageShow gallery presentation

Transcription

1 Introduction JSN ImageShow Introduction JSN ImageShow gallery presentation JSN ImageShow is the gallery extension built for Joomla! Content Management System for developers, photographers and publishers. You can choose to show images from multiple sources such as local image folder, Joomla! galleries: (JoomGallery, Phoca Gallery ) and online galleries (Flickr, Picasa,Facebook ). Configured gallery then can be published in any part of website including: article s content, mainbody area and module positions. You can print this document for convenient reading. Let s roll! 1 / 144

2 Hot Features Overview Joomla! Compatibility Joomla! 3 or higher Compatibility Natively compatible with Joomla! 3.x and higher version Use images from multiple sources Present images from multiple sources 2 / 144

3 You can choose to show images from multiple sources: Local image folder Joomla! galleries - JoomGallery, RSGallery2 and Phoca Gallery. Gallery services Flickr and Picasa, Image Shack Social profile - Facebook, Instagram Manage images with super easy interactive user interface Super easy interactive user interface Image management has never been easier with this drag & drop mechanism. You can choose desired images from the album then drag them into the showlist. JSN ImageShow will utilize all images directly from source, so you don t have to worry about managing them again. Enjoy gallery presentation setup with Visual Preview and Live View 3 / 144

4 Visual preview with real-time parameter configuration Click any part of Visual Preview and appropriate configuration parameters will be automatically opened on left side. When tweaking gallery parameters, you can see in real time how they are applied in Visual Preview. Additionally, you can gallery in live action by using feature Live View. The live working gallery will be shown in neat modal window, so you don t have to switch to website front-end to see it. Show images anywhere 4 / 144

5 Present gallery via menu item, inside article or in module position You can present JSN ImageShow gallery many ways: Component: By using Component you can present gallery in main body area accessible via menu item. Module: By using Module you can present gallery in any module position supported by your template. Content Plugin: By using Content Plugin you can present gallery in any article. When you install JSN ImageShow, all necessary elements will be installed automatically. Quick access menu Universal access menu For quick and intuitive navigation JSN ImageShow has a multipurpose menu system on every page of the component. You can easily access the list of showlist, create a new showcase, and do other operations through the convenient drop down menu. 5 / 144

6 Product Installation JSN ImageShow Installation After downloading, you should have an extension installation file called jsn_imageshow_xxx_jy.y_z.z.z.zip, where: XXX is the extension edition. It can be free or pro. Y.Y is the Joomla! version supported by the extension. It can be 2.5 or 3.0. Z.Z.Z is the extension version. This is a standard Joomla! extension installation file which can be installed in Joomla! administration as usual. Here is quick instruction to remind you: In Joomla! administration, go to menu Extensions -> Extension Manager Once you are on Extension Manager, click Browse button and select extension installation file jsn_imageshow_xxx_jy.y_4.z.z.zip. After that, click on button Upload & Install. Installation file will be uploaded to your server and installed in Joomla! automatically. After core elements, default theme and image sources have been installed successful, clear your browser s cache and start using JSN ImageShow in your site. 6 / 144

7 Updating via Updater Begin from 3.1.x, you can update to the latest version directly in JSN Imageshow screen whenever there s any available updates. In the next screen, you can download latest installation package of JSN ImageShow version, JSN ImageShow plugin theme and install it. To update, you have to provide your JoomlaShine customer account to download latest installation package. 7 / 144

8 You can define the time between 2 continuous checkings for new product update in JSN ImageShow Configuration page. Here you can disable the Notification option as well. Product Update Configuration JSN ImageShow Uninstallation There re two ways to uninstall JSN ImageShow listed below: 8 / 144

9 Uninstall normally in Joomla back-end. Uninstall quickly via JSN PowerAdmin. Uninstall JSN ImageShow normally in Joomla back-end This is the default uninstallation process of Joomla. You follow these simple steps to uninstall JSN ImageShow as well as other extensions installed on your site. In Joomla! administration, go to menu Extensions -> Extension Manager -> Tab Manage. Search for JSN ImageShow in the list. For a quick search you can type JSN ImageShow in the Filter box and click Search button. Check JSN ImageShow and click Uninstall button at the right top corner to uninstall JSN ImageShow. Uninstall JSN ImageShow in the default way Uninstall JSN ImageShow quickly via JSN PowerAdmin JSN PowerAdmin is a free admin navigation extension which helps you use Joomla with ease. It allows you to uninstall Joomla extensions much faster than the default Joomla uninstallation process. You can download JSN PowerAdmin free and install it via back-end normally. After installing, JSN PowerAdmin toolbar appears on the top right, and the quick uninstall function is integrated to JSN ImageShow as well as other extensions. You only need to click on Component -> JSN ImageShow -> Uninstall. 9 / 144

10 Uninstall JSN ImageShow with JSN PowerAdmin Showlist - Gallery Images Management About concept Showlist Showlist stores information about images to be presented in gallery. JSN ImageShow is able to connect to multiple image sources and use images directly from there. Image details like title and description are also used from the original source, so you don t need to bother reconfiguring them again. You can create multiple showlists connected to multiple image sources. Attention! In Free edition: You are limited to create only 3 image showlists You can't use more than 10 images in 1 showlist Creating new showlist 10 / 144

11 Access to Showlists Manager page It s very easy to create new showlist. From Joomla! administration choose menu JSN ImageShow -> Showlists In Showlists Manager page, click button New on the toolbar. Now you just need to configure showlist details and images as described in following sections of this document. Install new source Getting images from the source You can get images from 4 defaulted sources: Local Image Folder, Imageshack, Instagram and Picasa or 5 additional sources: Flickr, Phoca Gallery, Joom Gallery, RSGallery2 and Facebook. 11 / 144

12 Getting images from local image folder In most cases, you store images in folder images under Joomla! root folder. JSN ImageShow can get images from the local server folder then present them in the gallery. In the Showlist Settings page, Showlist image sources section, select the Local Image Folder. Select the folder where you store images and drag the desired ones to 12 / 144

13 the Showlist s Images panel. Attention! Remember that you will see only folders that are located under folder the images folder in Joomla! root folder. Synchronizing all images from folders JSN ImageShow allows you to automatically synchronize all images in the folders to showlist. With this feature enabled, you can add more images to the folder and they will be automatically added to the showlist. Synchronizing all images from folders to the showlist 13 / 144

14 To enable synchronization, just click icon Sync and select folders which you want to synchronize. All images from the selected folder will appear on Showlist s Images panel for verification. Attention! In Sync Mode, image details are fixed and cannot be edited. If you sync images from Phoca & JomGallery, all text format such as bold, italic, strike-through and underline will be applied automatically. Getting images from Facebook JSN ImageShow is able to show images from your Facebook account with all image details preserved. Let s go through this process step by step. Step 1. Getting Facebook profile data For presenting images from Facebook you need the following facebook profile data: Facebook App ID If you already know how to get these profile data, feel free to skip this step. Otherwise, take a look at the video tutorial or follow visual instructions below. Visit the link and login your Facebook account 14 / 144

15 Click + Create New App button in the top right corner Enter App Name and App Namespace. For example, JSN Image jsn-image 15 / 144

16 Enter the security phrase you see in the box, then click Submit Verify your account by adding your mobile phone or credit card, then click Continue 16 / 144

17 Confirm your code you receive 17 / 144

18 Enter your domain URL in App Domains field (without or www. ) Click on Website with Facebook Login, for example and enter your site URL then click Save Changes It s done now, App ID is shown here. 18 / 144

19 Step 2. Setting up Facebook profile and selecting images Now, when Facebook profile data are ready, it s time to use them in JSN ImageShow. In Showlist Settings page, Install New Image Source section, select to install Facebook. In Showlist image sources section, select Facebook and configure parameters as follows: 1. Profile Title: Input any name you like 2. Facebook Image Source: Select User Profile or Page 3. Facebook App ID: Input the Facebook App ID obtained in step 1 4. Thumbnail Max Size: Select the thumbnail size you want to use (in pixel) 5. Image Max Size: Select the image size you want to use (in 19 / 144

20 pixel) Click button Save. Now, all Facebook sets will be listed from where you can select desired images. 20 / 144

21 Getting images from Picasa JSN ImageShow is able to show images from your Picasa account with all image details preserved. Let s go through this process step by step. In Showlist Settings page, Showlist Image Sources section, select Picasa. Check the box Create new profile and configure and set parameters as follows: 1. Profile Title: Input any name you like 2. Google User Name: Input the name that comes symbol in the Google address. 3. Thumbnail Max Size (px): Select the size of the thumbnail images. 4. Image Max Size (px): Select the size of the images. Click button Create. Now, all Picasa albums will be listed from where you can select the 21 / 144

22 desired images. Synchronizing all images from folders JSN ImageShow allows you to automatically synchronize all images in the folders to showlist. With this feature enabled, you can add more images to the folder and they will be automatically added to the showlist. Synchronizing all images from folders to the showlist To enable synchronization, just click icon Sync and select folders which you want to synchronize. All images from the selected folder will appear on Showlist s Images panel for verification. Attention! In Sync Mode, image details are fixed and cannot be edited. Getting images from JoomGallery, Phoca Gallery and RSGallery2 22 / 144

23 JSN ImageShow can use images directly from Joomla! extensions JoomGallery, Phoca Gallery or RSGallery2. This is the great way to utilize existing images without additional image management work. In Showlist Settings page, Showlist Image Sources section, select your desired source to install it or to present its images. Getting images from Flickr JSN ImageShow is able to show images from your Flickr account with all image details preserved. Let s go through this process step by step. Step 1. Getting Flickr profile data For presenting images from Flickr you need the following flick profile data: Flickr API Key Flickr API Secret Key Flickr Screen Name If you already know how to get these profile data, feel free to skip this step. Otherwise, here are instructions: Visit the link Choose an appropriate option for your gallery. If you are creating a personal gallery, then click button APPLY FOR A NON COMMERCIAL KEY. 23 / 144

24 Input some information about your gallery. Save your Key and Secret in a text file on your computer. 24 / 144

25 On the top, you will see Flickr Screen name, which also need to be saved on a text file in your computer. Step 2. Setting up Flickr profile and selecting images Now, when Flickr profile data are ready, it s time to use them in JSN ImageShow. In Showlist Settings page, Install New Image Source section, select to install Flickr. In Showlist image sources section, select Flickr and configure parameters as follows: 1. Profile Title: Input any name you like 25 / 144

26 2. API Key: Input the Flickr API Key obtained in step 1 3. API Secret Key: Input the Flickr Secret Key obtained in step 1 4. Flickr Screen Name: Input the Flickr screen name obtained in step 1 5. Image Size: Select Medium option for the most optimal result. Click button Create. Now, all Flickr sets will be listed from where you can select desired images.>/p> Attention! All the above steps only need to be done once. Next time, when creating a new showlist, you can just select the already created Flickr profile. Synchronizing all images from folders JSN ImageShow allows you to automatically synchronize all images in the folders to showlist. With this feature enabled, you can add more images to the folder and they will be automatically added to the showlist. Synchronizing all images from folders to the showlist 26 / 144

27 To enable synchronization, just click icon Sync and select folders which you want to synchronize. All images from the selected folder will appear on Showlist s Images panel for verification. Attention! In Sync Mode, image details are fixed and cannot be edited. Getting images from Instagram For presenting images from Instagram you need the following Instagram profile data: Instagram App ID If you already know how to get these profile data, feel free to skip this step. Otherwise, take a look at the video tutorial or follow visual instructions below. Visit the link and login your Instagram account Click Register Your Application button in the Hello Developers panel 27 / 144

28 Enter Application Name and Description. For example, JSN Imageshow JSN Imageshow demo. In Showlist Settings page, Install New Image Source section, select to install Instagram. In Showlist image sources section, select Instagram and 28 / 144

29 configure parameters as follows: 1. Profile Title: Input any name you like 2. Redirect URL: Copy this filed and copy to the field OAuth redirect_uri on Instagram deveploper site Enter "Website" with the domain of your website and "OAuth redirect_uri" with the url received Adding the gained information from instagram about Client id and Client secret to the same field on your site and click "Get Access Token!" 29 / 144

30 Click to authorize the information in the pop up window and then click "Save". You can also use other Instagram's user picture as an option by entering the username in Find Username (Optional) filed. All user with a logical match with the username entered will be list on image showlist. The image will be classified by its owner's username when you use this function. 30 / 144

31 Attention! All the above steps only need to be done once. Next time, when creating a new showlist, you can just select the already created Instagram profile. Please consider the copyright when using other user's images Step 2. Setting up Instagram profile and selecting images Now, when Instagram profile data are ready, it s time to use them in JSN ImageShow. In Showlist Settings page, Install New Image Source section, select to install Instagram. In Showlist image sources section, select Instagram and configure parameters as follows: 1. Profile Title: Input any name you like 2. Client ID: Input the Client ID obtained after entering the redirect url on the Instagram developer website 31 / 144

32 3. Client Secret: Input the Client Secret obtained after entering the redirect url on the Instagram developer website 4. Find Username (Optional): Insert the username that you want to get Images from Click button Save. Now, all Instagram sets will be listed from where you can select desired images. Getting images from Image Shack JSN ImageShow is able to show images from your Image Shack account with all image details preserved. Let s go through this process step by step. In Showlist Settings page, Showlist Image Sources section, select Image Shack. Check the box Create new profile and configure and set parameters as follows: 1. Profile Title: Input any name you like 2. User Name Input the Image Shack user name. 32 / 144

33 Click button Save. Now, all Image Shack albums will be listed from where you can select the desired images. Setting up showlist details Showlist details configuration 33 / 144

34 All showlist details are configured in four groups of parameters: General, Images Details override, Access Permission and Misc. Let s look at the parameters in detail. General ID Defines showlist s order Title Defines showlist title to identify itself internally in the product. Additionally, you can configure parameter Override Title to apply this showlist title to all image titles in the gallery. Published Defines whether to publish showlist or not. When the showlist is unpublished it can not be selected to present in image presentation. Order Defines showlist position amongst others. Hits Presents the number of showlist hits. Every time when you see a showlist on image presentation that s a hit. You can override the hits number with any value you want. Description Defines showlist description. Additionally, you can configure parameter Override Description Applies this showlist description to all image description in the gallery. Notice that the description will be presented in the form of plain text without HTML markup. Link Defines showlist link. Additionally, you can configure parameter Override Link to apply this showlist link to all image links in the gallery. Images Details Override Override Title Defines how to use the showlist title for all images instead of an individual image title or not. Override Description Defines how to use showlist description for all images instead of an individual image title. Override Link Defines how to use the showlist link for all images instead of an individual image link. Access Permission Access Level Defines the group that can see the gallery with this showlist. Public All visitors can see the showlist. Registered Only registered visitors can see the showlist. Special Special group can see the showlist. Customer Access Level (Example) Customer Groups can see the showlist. Authorization Message Defines the message that will be shown 34 / 144

35 to viewers who don t have required access level. No Message No message will be displayed. Joomla Article Display any Joomla! article of your choice. Misc Images Loading Order Defines the order in which the images will be presented. Forward Present the images from the beginning to the end. Backward Present the images from the end back to the beginning. Random Present the images randomly. Show EXIF Data Select to append Exchangeable image file format (EXIF) data in image details. No EXIF Data won t be appended to the image. Yes, append to image title EXIF Data will be appended to the image title. Yes, append to image description EXIF Data will be appended to the image description. Setting up showlist images Interface overview 35 / 144

36 Working with images in the Showlist Images panel All showlist image management operations are shown in panel Showlist Images, which consists of 2 areas Source Images and Showlist s Images. Panel Source Images In panel Source Images you can browse images from the image source to choose which images to add to showlist. The images can be moved to the Showlist s Images simply by the drag & drop operation. Selecting images for gallery in Source Images panel Panel Showlist s Images In panel Showlist s Images you will see images currently added to the showlist. Here you can reorder images and edit image details like title, description or image link. 36 / 144

37 Attention! Viewing image details in Showlist s Images panel It s very important to understand that JSN ImageShow utilizes images directly from the source and doesn t make copies of them on your server. Thumbnails and Details view mode Images in the showlist can be viewed through the thumbnail or details mode. 37 / 144

38 Viewing images in 2 modes With the Details Mode you will see images with all details. In Thumbnail Mode you will see many more images within the space, but without image details. Showlist images operations Adding images to the showlist As mentioned above, it s very easy to add images to showlist. You just select images in panel Source Images and drag them to panel Showlist s Images. 38 / 144

39 Adding images to the showlist with drag and drop operation Sorting images in the showlist After the images are added to the showlist, you can sort them into the correct order. Just drag the image and move it to the desired position. 39 / 144

40 Sorting images by using drag and drop operation Editing image details By default, all image details are inherited from the original sources as follows: Image source Image Title Image Description Local Image The image file N/A Folder name Facebook N/A The image description defined in Facebook Picasa Flickr PhocaGallery The image title defined in Picasa The image title defined in Flickr The image title defined in Phoca Gallery The image description defined in Picasa The image description defined in Flickr The image description defined in Phoca Gallery Image Link The location of image file on server The Facebook page presenting the image The Picasa page presenting the image The Flickr page presenting the image The Phoca Gallery page presenting the image 40 / 144

41 JoomGallery RSGallery2 The image title defined in JoomGallery The image title defined in RSGallery2 The image description defined in JoomGallery The image description defined in RSGallery2 The JoomGallery page presenting the image The RSGallery2 page presenting the image You can override the default image details and set your own by clicking on icon Edit on each image. All default image details can be overridden if necessary Next you can define all the custom details you want. They will be used in various ways in the gallery. 41 / 144

42 Editing image details Later you can revert to the original image details by selecting the item Reset Selected Images Details pop-up menu. 42 / 144

43 Reverting image details to default values You can select multiple images by holding the key Ctrl and clicking on the desired images. After selecting images click Edit icon on toolbar. Selecting multiple images to edit A modal window appears where you can setup details of all selected images. 43 / 144

44 Edit multiple images details Removing the image To remove the images from showlist, you just need to drag them out of the panel Showlist s Images. Another way is to click icon Delete on each image. The modal window will appear asking the confirmation. 44 / 144

45 Deleting images from the showlist You can also delete multiple images in the same way as you edit them. Showing Multiple Showlists JSN ImageShow allows users to display images from multiple showlists with one showcase type at the same time. To show multiple showlists: 45 / 144

46 Go to Menus -> Main Menu (or any menu you like) -> Add New Menu Item. Choose Menu Item Type JSN ImageShow Galleries Collection Create a web page with multiple showlists In the Required settings section, you can set your multiple showlists with the parameters below: Showlist(s): Allows you to choose to show as many showlists as you like. Showcase: The showcase that presents all showlists above. Show title: Allows you to present the showlist titles or not. Show Description: Allows you to present the showlist descriptions or not. Description Limitation: Allows you to set the maximum words for the showlist descriptions. 46 / 144

47 Thumb Dimension: Allows you to set the size for the showlist thumbnail. Show View Gallery : Allows you to show the text View Gallery or not. Choose Multiple Showlists Showcase - Gallery presentation settings About concept showcase Showcase stores information about how to display images. JSN ImageShow provides theme mechanism which allows you to present the same set of images with multiple layouts and compositions. You can create multiple showcases for different type of presentations and use them to show 47 / 144

48 multiple showlists. This results in incredible amount of images presentation variation. Creating new showcase Access to Showcases Manager page It s very easy to create new showcase. From Joomla! administration choose menu JSN Imageshow -> Showcases In Showcases Manager page, click button New on the toolbar. Then you configure the Showcase Details and Save the showcase. Install a new theme 48 / 144

49 6 themes to choose from In Showcase Themes tab, you can select a theme as you want. By default, JSN ImageShow is shipped 1 default theme: Theme Classic. To install other themes: Theme Slider, Theme Grid, Theme Carousel, Theme Strip and Theme Flow, you click to that theme and wait for a few seconds. 49 / 144

50 Theme Classic A theme which allows you to build terrific galleries by tweaking over 70 parameters JSN Theme Classic in the front-end Theme Slider With 30+ simple and effective transition parameters, Slider allows you to create stunning photo galleries 50 / 144

51 JSN Theme Slider in the front-end Theme Grid With 10+ parameters, this Grid brings your photo galleries a new way of presentation with a lot of photos showing on one place JSN Theme Grid in the front-end Theme Carousel It helps present all your images in one place thanks to a rounded animation JSN Theme Carousel in the front-end Theme Strip With more than 25 parameters, Theme Strip can help you make your image gallery look really great 51 / 144

52 JSN Theme Strip in the front-end Theme Flow Thanks to 3D effect, an image gallery has a feeling of depth and it makes your photos stand out from the page with Theme Flow. More than 25 parameters are ready for you. Currently, the 3D effect only works on Chrome and Safari browsers JSN Theme Flow in the front-end Available themes JSN ImageShow with its themes is responsive. They work normally on for modern mobile devices such as iphone, Android, Windows mobile-based and tablets such as ipad. Responsive design for Theme Classic 52 / 144

53 Theme classic on ipad 53 / 144

54 Theme classic on iphone For detailed information about their showcase parameters, please refer to JSN IS theme files in documentation package: jsn-theme-classic-configuration-manual.pdf You can download the document in the Customer Area. Responsive design for Theme Slider 54 / 144

55 Theme slider on ipad 55 / 144

56 Theme slider on iphone For detailed information about their showcase parameters, please refer to JSN IS theme files in documentation package: jsn-theme-slider-configuration-manual.pdf You can download the document in the Customer Area. Responsive design for Theme Grid 56 / 144

57 Theme grid on ipad 57 / 144

58 Theme grid on iphone For detailed information about their showcase parameters, please refer to JSN IS theme files in documentation package: jsn-theme-grid-configuration-manual.pdf You can download the document in the Customer Area. Responsive design for Theme Strip 58 / 144

59 Theme Strip vertical on ipad 59 / 144

60 Theme strip vertical on iphone 60 / 144

61 Theme Strip horizontal on ipad 61 / 144

62 Theme strip horizontal on iphone For detailed information about their showcase parameters, please refer to JSN IS theme files in documentation package: jsn-theme-strip-configuration-manual.pdf You can download the document in the Customer Area. Responsive design for Theme Flow 62 / 144

63 Theme flow on ipad 63 / 144

64 Theme flow on iphone For detailed information about their showcase parameters, please refer to JSN IS theme files in documentation package: jsn-theme-flow-configuration-manual.pdf You can download the document in the Customer Area. Responsive design for Theme Carousel 64 / 144

65 Theme Carousel on ipad 65 / 144

66 Theme Carousel on iphone For detailed information about their showcase parameters, please refer to JSN IS theme files in documentation package: jsn-theme-carousel-configuration-manual.pdf You can download the document in the Customer Area. Responsive design settings To set JSN ImageShow responsive on mobile devices, you need to: In Showcase: Set Overall width 100% 66 / 144

67 With different JSN ImageShow presentation methods, you set up different parameters: If you present JSN ImageShow via Menu item: In Menu Item, you set Overall width 100% If you present JSN ImageShow in a Module Position: In Module Manager, you set Overall width 100% 67 / 144

68 If you present JSN ImageShow inside an article: In Article Editor, you set Max width parameter. Setting up showcase details 68 / 144

69 Showcase details configuration All showlists details are configured by three groups of parameters: General, Appearance and Images Loading. Let s look at parameters in detail. General Title Defines showcase title to identify it-self internally in the product. Published Defines whether or not to publish showcase. When showcase is unpublished it can not be selected to present in image presentation. Order Defines showcase s position among others. Dimension Overall Width Defines the overall width of gallery presentation. User can specify either pixel or % value. Overall Height - Defines the overall height of gallery presentation. User can specify only pixel value. Setting up showcase theme 69 / 144

70 Showcase theme configuration As mentioned before JSN ImageShow allows you to use various themes for the gallery. Each theme has a different number of parameters for controlling the gallery behavior. To change the theme, click Change theme above the Live View window. For detailed information about their showcase parameters, please refer to JSN IS theme files in documentation package: jsn-theme-classic-configuration-manual.pdf jsn-theme-slider-configuration-manual.pdf jsn-theme-grid-configuration-manual.pdf jsn-theme-carousel-configuration-manual.pdf jsn-theme-strip-configuration-manual.pdf 70 / 144

71 jsn-theme-flow-configuration-manual.pdf You can download them in the Customer Area. Visual Preview The Visual Preview on the right allows you to see how parameters are applied in real-time. Move the mouse on any area of gallery, the yellow border will detect which part of gallery you want to change. Click on it and appropriate tab of parameters will be shown in Parameters area. Visual Preview and themes parameter interaction Showtime You can present JSN ImageShow gallery many ways: Component By using component you can present gallery in main body area accessible via menu item. Module By using module you can present gallery in any module position 71 / 144

72 supported by your template. Content Plugin By using content plugin you can present gallery inside any article. Show the gallery via menu item (using component) Presenting gallery via menu item The easiest way to show gallery via menu item is by using Launch Pad. Perform the following steps to create the menu item to show the gallery. From Joomla! administration choose menu JSN Imageshow -> Launch Pad 72 / 144

73 In Launch Pad page, select Showlist and Showcase you want to use. In panel Presentation select option Via menu item (component), then select the menu where you want to create menu item to present the gallery. Click button Go and you will be redirected to menu item settings page to finish the process. At anytime later, you can edit the menu item in Menu Manager. Show the gallery in module position (using module) Presenting gallery in module position You can display the gallery in any module position available in the template. The instruction below shows you how to do that. From Joomla! administration choose menu JSN Imageshow -> Launch Pad In Launch Pad page, select Showlist and Showcase you want to 73 / 144

74 use. In panel Presentation select option In module position (module) Click button Go and you will be redirected to module settings page to finish the process. At anytime later, you can edit module in Module Manager. Show the gallery inside article (using content plugin) Presenting gallery inside article There are 3 ways for you to display the gallery directly inside the article. The instruction below shows you how to do that. Display the gallery via Launch pad From Joomla! administration choose menu JSN Imageshow -> Launch Pad In Launch Pad page, select Showlist and Showcase you want to use. 74 / 144

75 In panel Presentation select option Inside article (content plugin) Click button Go and you will get the syntax which need to be inserted into your article at the place where you want the gallery to show up. Display the gallery from article in the back-end From Joomla! administration choose the article you want to insert JSN ImageShow gallery In the Editor section, place the cursor at the place you want to show the gallery. Below the Editor section, click button ImageShow In modal window JSN ImageShow Gallery Settings, select Showlist and Showcase you want, define the suitable width, height as you want. Click button Insert and you see the syntax inserted into your article. 75 / 144

76 Display the gallery from article in the front-end From the front-end of your site, login with your account and choose the article you want to insert JSN ImageShow gallery. In the Editor section, place the cursor at the place you want to show the gallery. Below the Editor section, click button ImageShow In modal window JSN ImageShow Gallery Settings select Showlist and Showcase you want, define the suitable width or height Click button Insert and you see the syntax inserted into your article. 76 / 144

77 More about plugin syntax Basic syntax In most cases the syntax will be as following: {imageshow sl=xxx sc=yyy /}, where: XXX showlist ID YYY showcase ID You can Showlist/Showcase ID in either Manager or Settings page. Additional attributes Beside the basic, you can define the following additional attributes: w - Custom gallery width, for example: {imageshow sl=xxx sc=yyy w=500 /} h - Custom gallery height, for example: {imageshow sl=xxx sc=yyy h=400 /} Show gallery in modal window You can create a link clicking onto which will open gallery in modal window. {imageshow sl=1 sc=1}click here to see gallery in modal 77 / 144

78 window{/imageshow} Configuration & Maintenance The Configuration panel In this section you can perform a variety of configurations and maintenance tasks such as data backup / restore, sample data installation, theme management, etc. Let s take a closer look at each subsection. Global Parameters 78 / 144

79 In this section you can configure Global parameters configuration Show Quick Icons to define whether or not to show JSN ImageShow quick icons on Joomla! Control panel. Enable Update Checking to define whether or not to automatically check for new updates Number of images on loading to define number of images on loading Messages 79 / 144

80 Messages configuration On some JSN ImageShow pages, you might see hint message guiding you to use the product. Those messages can be turned on/off. Just check / uncheck boxes in column Show and click button Save to confirm. Languages 80 / 144

81 Languages configuration JSN ImageShow GUI text is translated in 12 languages with default English language. Here in section Language, you can choose to activate the language you want. Languages management You can edit language of JSN ImageShow on both front-end and back-end. It means that you can translate language files and apply it yourself. To use this function, you go to Languages page of JSN ImageShow -> click to edit the language files. 81 / 144

82 Then, you can edit all strings in lanaguge files at here. Also here, you can search keyword to filter the translation. To finish, you click Save and Close to apply your changes. Please note that you can edit the language that you are installing on your site only. Add Access Control list The new feature Permission is added to allow users to have more power in setting the permissions and images at back-end. 82 / 144

83 By selecting the permissions in Select New Setting, users have the relate value in Calculate Setting. Data 83 / 144

84 Sample Data installation In this section, you can manage data in your website. Sample Data Installation Sample data is the perfect choice for users who are new to JSN ImageShow. By installing sample data, you will have predefined showlist and showcase, so you can start using the product right away. Just by following simple on screen instructions to install sample data. Data Backup / Restore 84 / 144

85 Backup/Restore function Data backup / restore function was built to keep your data safe. This is especially useful, when you are migrating website or upgrading to the new version of Joomla!. Keep in mind that this backup / restore feature covers only JSN ImageShow data, not the entire website data. Data backup In this section, you can perform data backup operation. Backup Options - Defines what assets to backup: Showlists, Showcases or both. Backup Filename - Defines the name of the backup file. You can check the box Attach timestamp to the file name to create a file name with date inserted for easier management. Data restore In this section, you can perform data restoration operation. Click Browse button and select previously created backup file Click Restore to start restoration 85 / 144

86 All current showlists and showcases will be replaced with those imported from the backup file. Data Maintenance Data maintenance function With JSN ImageShow, each image can be presented via 2 sizes: Big size and thumbnail size. Local Image Folder just provides big images. So that, JSN ImageShow brings you a mechanism to automatically generate thumbnail images from big images. If there is any problem with thumbnail images from Local Image Folder, you should use this function to re-create all thumbnail images. Image Sources 86 / 144

87 Image Source profiles management In this section, you can manage all your image source profiles. You can delete image sources installed. Besides, with external sources Flickr and Picasa, you can see showlists you have created from them. Themes Themes management In this section you can perform maintenance operations with themes. JSN ImageShow provides themes mechanism which allows you to present a 87 / 144

88 gallery in multiple variations. You can select and configure theme on the showcase setting page. Theme Classic configuration JSN ImageShow supports the ability to use different themes in the gallery for best photo presentation. Each theme has the unique group of parameters for building gallery or slideshow. By default, JSN ImageShow comes with the Theme Classic allowing you to build terrific galleries. Please note that, Theme Classic provided you with 2 skins: JavaScript and Flash: Skin Flash: Comes with 70+ parameters. However, it can t be displayed well on mobile devices. Skin JavaScript: Come with similar parameters of skin Flash. However, there are fewer options than in skin Flash. Your gallery won t get image transition effects, ken-burn effect, etc. This limitation is offset by nice presentation ability on mobile devices. The Showcase Theme Settings is divided into 2 areas: Showcase settings page 1. Parameters Take control on the gallery presentation with over 70 parameters. 2. Live View See in real-time how parameters are applied to the gallery presentation. Attention! 88 / 144

89 In this documentation, parameters which are available on skin Flash only is marked * symbol. Theme Parameters JSN ImageShow Theme Classic parameters are grouped by the functionality and located at the tabs. In addition, The current theme has parameters groups: Container Panel to set the configuration related to container such as background color, round corner, border stoke, border color. Image Panel to set the image presentation, background, watermark and overlay effects. Thumbnail Panel to set the configuration related to image thumbnail. Caption Panel to set the title, description and link of showcase. Toolbar Panel to set the functionality of the gallery including next photo, previous photo, pause, play and more. SlideShow Panel to set the gallery behavior when it plays the slideshow. For information about each parameter groups read the further chapter of manual. Container Panel Background Color - Set background color of the area outside the gallery. This color will be visible only when parameter Round Corner Radius is not set to Zero. Round Corner Set the radius (in pixels) of gallery rounded corner Border Stoke Set the thickness (in pixels) of gallery border Border Color Set the color of gallery border. Click Select Color to pick desired color or set color code manually Image Panel Image Presentation Default Presentation Mode 89 / 144

90 Defines the image presentation mode to activate when gallery starts. Images can be presented in 2 different modes: Fit In In this mode image is resized to be fitted inside Image Panel area keeping original orientation and proportion. Fit In image presentation Image 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. Expand Out In this mode image is resized to cover the whole Image Panel area. 90 / 144

91 Expand Out image presentation This mode ensures the whole Image Panel will be filled with the image, but can crop image side edge if aspect ratios of the image and Image Panel area are not the same. Fit In Mode Configuration Image Transition Type * Defines the image transition type in Fit In presentation mode User can choose one of following background types for Image Panel: Background Type Defines the background type to present in Image Panel. Watermark Show Watermark Defefines 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 91 / 144

92 Image Panel edge. Watermark offset User can choose to display thumbnail as: Image Thumbnail is presented as small image Number Thumbnail is presented as number Thumbnails Browsing Mode Defines how website visitors browse thumbnails. User can choose to set 1 of following modes: Pagination In this mode, thumbnails are placed in pages. 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. Pagination thumbnails browsing mode 92 / 144

93 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 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 dimension settings Thumbnail Border (px) - Set the thickness (in pixels) of thumbnail border. It s not recommended to set big value here, since it might harm overall thumbnails presentation. Thumbnail Opacity (%) - Set the thumbnail opacity. By default this parameter is set to 50% to make inactive thumbnails look pale compared to the active one. But you can set 100% to make all thumbnails look the same. Big Thumbnail* Enable Big Thumbnail - Defines to show big thumbnail or not. 93 / 144

94 Big Thumbnail presentation 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-nfeel. Caption Panel General Information Panel Presentation Defines how to present Information Panel. Show On Mouseover * - Panel appears when user move mouse over Image Panel and hide after 3 seconds when mouse is moved out. Show Always Panel is shown all the time. Hide Panel is completely hidden. 94 / 144

95 Information Panel presentation Information Panel Position Defines the position of Information Panel. "Information Panel" Position 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 Panel Click Action Defines the action that will happen when viewer clicks on the information panel. No action * Open Image Link In this mode, when user clicks on image, it s link will be opened in browser. 95 / 144

96 Description Link Information Panel content presentation Show Title Defines to show Title or not. 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. Show Description Defines to show Description or not. 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, fontsize, font-weight, text-align and color. Show Link Defines to show the link or not. Link CSS (Title 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, fontsize, font-weight, text-align and color. Toolbar Panel General Toolbar Panel Presentation Defines how to present Toolbar Panel. Show On Mouseover -Panel appears when user move mouse over Image Panel and hide after 3 seconds when mouse is moved out. 96 / 144

97 Show Always * Panel is shown all the time. Hide Panel is completely hidden. Toolbar Panel presentation Toolbar Panel Position * Defines the position of Information Panel. Toolbar Panel position It s 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. 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. 97 / 144

98 Slideshow Slideshow Presentation * Enable Ken-burn Effect - Defines to turn on or not this effect during slideshow process. This effect creates the smooth image zooming and movement, making it looks like video. Show Status - Defines to show timer clock or not for displaying the time to the next image. This timer appears in 3 seconds before the next image appears. Hide Thumbnail Panel - Defines to close or not Thumbnail Panel when slideshow starts. It s recommended to hide the panel to let viewer focus on the slideshow, not browsing images. Hide Image Navigation - Defines to hide or not image navigation on Toolbar Panel when slideshow starts. It s recommended hide the navigation to let viewer focus on the slideshow, not browsing images. Slideshow Process Slide Timing (sec) - Defines the duration (in seconds) of a single image presentation. Auto Play - Defines the slideshow to start automatically right after the gallery is loaded or not. Slideshow Looping Select Yes if you want the slideshow to start over again when the last image is reached (looped). Theme Slider configuration Theme Slider is a newly-added feature in JSN ImageShow v4. This nonflash based theme uses purely the jquery Library. With 30+ simple and effective transition parameters, Slider allows you to create stunning photo galleries which run well on computers and iphone, ipad devices. The showcase theme settings are divided into 2 areas 98 / 144

99 Showcase settings page 1. Parameters - The place to configure 18 parameters 2. Preview - See how your slideshow looks like when parameters are configured. Attention! To present the images beautifully, you should set the width and the height of the showcase according to the ratio of your images. For example: If you have images in size 1200x900 (4:3), you showcase should be set in 1200x900 or 400x300. Theme Parameters Theme s Parameters In JSN ImageShow Theme Slider, there are in total 5 parameter groups located in the tabs as follows: Image Panel to set image s transition effect. Caption Panel to set caption panel, title, description and link Thumbnail Panel to set the configuration related to image thumbnail. Toolbar Panel to set the presentation of the gallery including next arrow, previous arrow, pause, play Slideshow Panel to set the gallery behavior when it plays the slideshow. 99 / 144

100 For information about each parameter group read the relevant chapter of the manual. Image Panel Transition Effect Defines the image transition type. Cube - Separate cubes of a new image move from right to left continuously until they cover the current image completely. Cube transition Cube Random - Separate cubes of the new image fly smoothly from left to right until they cover the current image completely. Block - Separate blocks of a new image move from right to left continuously until they cover the current image completely. Block transition Cube Stop - Separate cubes of the current image fly out until the new image is completely revealed. 100 / 144

101 Cube Stop transition Cube Hide - Separate cubes of the current image fade out until the new image is completely revealed. Cube Hide transition Cube Size - Separate cubes of the current image collapse until the new image is completely revealed. Cube Size transition Horizontal - Separate small blocks of a new image move continuously from right to left until they completely cover the current image. Horizontal transition Show Bars - Separate bars of a new image slide continuously from left to right until they cover the current image. Show bars transition Show Bars Random - Separate bars of a new image fade in vertically in a random order. 101 / 144

102 Show bars random transition Tube - Vertical tubes of the new image appear in a fast and strong way with an elastic vibration until they cover the current image. Tube transition Fade - As the current image fades out, the new image fades in. Fade transition Fade Four - The current image fades out and a new image fades in quickly. Fade four transition Parallel - Separate small bars of a new image start dropping 102 / 144

103 down from the top center and simultaneously spread to the left and right until they cover the current image. Parallel transition Blind - Separate small blocks of a new image start appearing from the center and simultaneously spread both left and right until they cover the current image. Blind transition Blind Height - Separate small blocks of a new image drop down from the left to right. Blind Height transition Direction Top - Separate big bars of a new image move up vertically from left to right until they cover the current image. 103 / 144

104 Direction top transition Direction Bottom - Separate big bars of a new image move down vertically from left to right. Direction Right - Separate big bars of a new image move horizontally from left to right until they cover the current image. Direction right transition Direction Left - Separate big bars of a new image move horizontally from right to left. Cube Stop Random- Separate cubes of a new image gradually fade in, in a random order until they cover the current image. Cube Stop Random transition Cube Spread - Separate cubes of a new image fade in randomly at different positions and spread out until they cover the current image. 104 / 144

105 Cube Spread transition Cube Jelly - Separate cubes of the current image are taken out from left to right with a vibration effect until the new image is completely revealed. Cube Jelly transition Glass Cube - Moving from left to right, vertical bars of a new image appear simultaneously from the top and bottom until they completely cover the current image. Glass cube transition Glass Block - Moving from left to right, separate blocks of a new image fade in until they cover the current image completely. Glass block transition 105 / 144

106 Circles - Separate circles of a new image fade in gradually from the center of the image until they completely cover the current image. Circles transition Circles Inside - Separate circles of the new image fade in gradually from the outside to the middle. Circles Inside transition Circles Rotate - Separate circles of the new image fade in from outside to inside and rotate until they cover the current image completely. Cube Show - Separate cubes of a new image appear from top to bottom and from left to right until they cover the current image. Cube Show transition Up Bars - Separate bars of the current image move up then disappear until the new image is completely revealed. 106 / 144

107 Up bars transition Down Bars - Separate bars of the current image move down then disappear until the new image is completely revealed. Random - Only one transition effect will be selected randomly to be applied to an image show. Random Smart - Various transition effects will be selected randomly to be applied to each image in an image show. Caption Panel Caption Panel Presentation Defines whether to show or hide caption panel. Caption Panel Opacity Defines caption panel opacity level; you can customize the percentage to make it darker or lighter. Show Title Defines whether or not to show the Title. Title CSS Defines the CSS declaration to be applied to the title. Since CSS support is limited, it s recommended to use only the following selectors: font-family, font-size, fontweight, text-align and color. Show Description - Defines whether or not to show a Description. Description CSS - Defines the CSS declaration to be applied to the description text. Since CSS support is limited, it s recommended to use only the following selectors: font-family, font-size, font-weight, text-align and color. Show Link - Defines whether or not to show the Link. Link CSS - Defines the CSS declaration to be applied to the link. Since CSS support is limited, it s recommended to use only the following selectors: font-family, font-size, font-weight, text-align and color. Thumbnail Panel Thumbnail Panel Presentation Defines whether to show or hide the Thumbnail Panel. Thumbnail Panel Position Defines to where to put Thumbnail Panel, including Right, Center and Left. 107 / 144

108 Thumbnail Presentation Mode Defines whether to display thumbnails as dots or numbers. Dots Presentation Mode Numbers Presentation Mode Active State Color Defines the color of active elements in Thumbnail Panel. 108 / 144

109 Active Color in Dots and Numbers Presentation Mode Toolbar Panel Navigation Arrows Presentation Hide Navigation Arrows are completely hidden. Show Always Navigation Arrows are shown all the time. Show On Mouseover Navigation Arrows appear when the user moves the mouse over the Image Panel, and are hidden immediately when mouse is moved out. Slideshow Player Presentation Hide Slideshow Player is completely hidden. Show Always Slideshow Player is shown all the time. Show On Mouseover Slideshow Player appears when the user moves the mouse over the Image Panel, and is hidden immediately when mouse is moved out. 109 / 144

110 Slideshow Panel Slide Timing Defines the duration (in seconds) of a single image presentation. Auto Play Defines whether or not the slideshow starts automatically right after the gallery has loaded. Pause On Mouseover Defines whether the slideshow pauses when the user moves the mouse over the Image Panel. Theme Grid configuration JSN Theme Grid in the front-end Theme Grid is a newly-added feature in JSN ImageShow v This Grid brings your photo galleries a new way of presentation with a lot of photos showing on one place. The showcase theme settings are divided into 2 areas 110 / 144

111 Showcase settings page 1. Parameters - The place to configure 9 parameters 2. Preview - See how your slideshow looks like when parameters are configured. Theme s Parameters In JSN ImageShow Theme Grid, there are in total 2 parameter groups located in the tabs as follows: Container Panel to set the background color of the image show. Thumbnail Panel to set the configuration related to image thumbnail. For information about each parameter group read the relevant chapter of the manual. Container Panel Background color to set the background color by clicking on Select Color Thumbnail Panel Thumbnail Layout to set the layout of all thumbnails with two options Fixed and Fluid Fixed all thumbnails have the same size in width and height 111 / 144

112 Fluid each thumbnail has different size. A thumbnail is horizontal or vertical based on original photo. Thumbnail Width to set the width of the thumbnail in pixel Thumbnail Height to set the height of the thumbnail in pixel. Notes: you can t change the thumbnail height when choosing Fluid layout. Thumbnail Space to set the space between thumbnails in pixel Thumbnail Border to set the thick of the thumbnail border in pixel 112 / 144

113 Thumbnail Rounded Corner to set curvature of the rounded corner of the thumbnail Thumbnail Border Color to set the color of the thumbnail border by clicking Select Color Thumbnail Shadow to set the shadow for the thumbnail with 3 options following No Shadow Light Shadow 113 / 144

114 Bold Shadow Attention! If all images can't be displayed in the ThemeGrid frame, you just need to click and drag a displaying image up to see other images. Theme Carousel configuration 114 / 144

115 JSN Theme Carousel in the front-end Theme Carousel is newly-added to JSN ImageShow version This Carousel theme gives your photo galleries a excellent new way of presentation with a lot of photos showing on one place following a rounded animation. The showcase theme settings are divided into 2 areas. Showcase settings page 1. Parameters - The place to configure 13 parameters. 2. Preview - See how your slideshow looks like when parameters are configured. 115 / 144

116 Image Image Source Display image with Original Images or Thumbnails. Normally, thumbnail quality is lower than original image quality, but it increases loading speed. Image Width Set the width of the image in pixels. Image Height Set the height of the image in pixels. If you don t set this parameter, the height will be auto re-sized at the original scale. View Angle Set the space between the main images with other images. With negative values, the main image is lower than other images and vice versa, with positive values, it is higher than other images. Transparency Set the transparency of all waiting images which are behind the main image. 116 / 144

117 Scale Set the size scale of waiting images when compared to the main image. Animation Duration Set the time for one image to move from one position to the following position. Orientation Set the moving direction of images, with two options: Horizontal and Vertical. Horizontal 117 / 144

118 Vertical Enable Drag Action Set the ability to drag images forward, backward or up and down. Click Action Set the action after clicking an image, it can be No Action, Show Original Image, or Open Image Link. With Open Image Link, you can set to Open Link In Current Browser or New Browser. Theme Flow configuration 118 / 144

119 JSN Theme Flow in the front-end Theme Flow is newly-added to JSN ImageShow version This Flow theme gives your photo galleries an excellent new way of presenting images with a 3D effect. The showcase theme settings are divided into 2 areas. Showcase settings page 1. Parameters - The place to configure 24 parameters. 2. Preview - See how your slideshow looks like when parameters are configured. Container Background Type Set the background type of the area outside the gallery. There are 2 values: Transparent and Solid Color. Background Color Set background color of the area outside the gallery. This color will be visible only when parameter Background Type is set to "Solid Color". 119 / 144

120 Background color of the container Side Fade Set the fade color of both sides of the gallery. There are 3 values: None, Black and White. Side Fade presentation Thumbnail Image Source Display image with Original Images or Thumbnails. Normally, thumbnail quality is lower than original image quality, but it increases the loading speed. Dimension Defines the width and the height (in pixels) of each thumbnail. Border Thickness Set the thickness (in pixels) of thumbnail border. It s not recommended to set a big value here, since it might harm overall thumbnail presentation. 120 / 144

121 Border thickness of the image presentation Rounded Corner Set the radius (in pixels) of gallery rounded corner. Border Color Set the color of the image border. Click Select Color to pick desired color or set the color code manually. 3D Effect Set 3D effect for image gallery or not. Please note that 3D effect doesn't work on Internet Explorer browser. 3D Effect presentation 121 / 144

122 Opacity Set the opacity (in percent) of all inactive images. By default this parameter is set to 75% to make inactive thumbnails look pale when compared to the active one. Click Action Defines the action that will happen when the viewer clicks on the thumbnail. No action Show Original Image - In this mode, when user clicks on an image, the original image will be opened in a modal window. Open Image Link In this mode, when user clicks on an image, its link will be opened in the browser. There are 2 options: Open link in the current browser and in a new browser. Caption Show caption Defines whether the original image will show a caption or not. Caption presentation Background Color Set background color of the caption area. Panel Opacity Set the opacity (in percent) of caption background. By default this parameter is set to 75% to make the caption area look pale compared to the original image. But you can set 0% to make the background transparent. Show Title Defines whether to show a caption title or not. 122 / 144

123 Information content presentation Title CSS Defines the CSS declaration to be applied to the title. Since CSS support is limited, it s recommended to use only the following parameters: padding, font-family, font-size, font-weight, text-align and color. Show Description Defines whether to show the image description or not. Description Length Limitation (words) Set the number of words limitation for the description. If the description contains more words than the set limitation number, then the description will be truncated. If the user sets the number to 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 the following selectors: padding, fontfamily, font-size, font-weight, text-align and color. Navigation Enable Keyboard Action Allow the visitor to control the image slide by using the keyboard or not. Enable Mouse Wheel Action - Allow the visitor to control the image slide by using the mouse wheel or not. Slideshow Auto Play Set the slideshow to play automatically or not. Slide Timing - Set the length of time of transitions between images when the gallery is auto-playing. Pause on Mouse Over Sets whether a mouse-over action on the gallery images pauses the slideshow temporarily or not. Theme Strip configuration 123 / 144

124 JSN Theme Strip in the front-end Theme Strip is newly-added to JSN ImageShow version This Strip theme gives your photo galleries a excellent new way of presenting your photos with beautiful animation. The showcase theme settings are divided into 2 areas. Showcase settings page 1. Parameters - The place to configure 25+ parameters. 2. Preview - See how your slideshow looks like when parameters are configured. Container Type Set the container design, with 3 options: None, Elastislide Default or Custom. 124 / 144

125 None - No container style. Container with None type Side Fade: Set the fade style of 2 image gallery sides. There are 3 options: None, White, Black Side fade black Elastislide Default - A fixed container style. 125 / 144

126 Container with Elasislide Default type Side Fade: Set the fade style of 2 image gallery sides. There are 3 options: None, White, Black Custom You can customize the container as you want with Background Color, Border Stoke, and Border Color. Container with Custom type Background Color: Set the background color of the area around the images. Round Corner: Set the border radius (in pixels) of the gallery rounded corner. Border Stroke: Set the thickness (in pixels) of gallery border. Border Color: Set the color of gallery border. Side Fade: Set the fade style of 2 image gallery sides. There are 3 options: None, White, Black Thumbnail 126 / 144

127 Image Source Display image with Original Images or Thumbnails. Normally, thumbnail quality is lower than original image quality, but it increases the loading speed. Orientation Set the moving direction of images, with two options: Horizontal and Vertical. Horizontal Vertical Horizontal direction 127 / 144

128 Vertical direction Dimension Set the width of the image in pixels. Space Set the space between each image in pixels. 128 / 144

129 Spaces between images Border Thickness Set the thickness of image border in pixels Border thickness Rounded Corner Set the rounded level of image in pixels. Images with rounded corners 129 / 144

130 Border Color Set the color of image border. Shadow Set the shadow for each image. It may be No shadow, Light shadow, Bold Shadow. Click Action Set the action after clicking an image, it can be No Action, Show Original Image, or Open Image Link. Caption Show Caption Set to show the caption or not. It will be shown in a modal window only when you click on the gallery. Panel Background Color Set the color of Information Panel background. It s recommended to set the color highly contrasted to the color of text being shown in the panel. Caption Panel Capacity Set the Caption Panel Capacity. By default, it s 75%. You can set 0% to make the background color transparent. Show title Set to show the title text in the Information Panel or not. 130 / 144

131 Title CSS Set the CSS styling to be applied to the title. Show Description Set to show the description text in the Information Panel or not. Description Length Limitation Set the number limitation of characters for description. Description CSS Set the CSS styling to be applied to the description. Theme Pile configuration JSN Theme Pile in the front-end Theme Strip is newly-added to JSN ImageShow version This theme implements the JavaScript / jquery image gallery library Photopile that simulates a pile of photos scattered about on a surface. Thumbnail clicks remove photos from the pile, (enlarging them as if being picked up by the user), and once in view a secondary click returns the photo to the pile. 131 / 144

132 Showcase settings page 1. Parameters - The place to configure 17 parameters. 2. Preview- See how your slideshow looks like when parameters are configured. Theme's Parameters In JSN ImageShow Theme Pile, the parameters are separated in 2 groups located in the tabs as follows: Thumbnail Panel to set image presentation and interaction. Slideshow Panel to set the title and description of the showcase. For information about each parameter group read the relevant chapter of the manual. Thumbnail Panel Image Source select the image source to present. Max Width set the maximum width of an element. Max Height set the maximum height of an element. Overlap set overlap amount (in pixels) 132 / 144

133 Overlap: 45px Overlap: 10px Rotation set maximum rotation angel (in degrees) Rotation 50 degrees 133 / 144

134 Rotation 15 degrees Border Thickness set the thickness (in pixels) of thumbnail border Border Thickness: 2px Border Thickness: 10px Border Color select the color of thumbnail border Border Color: White 134 / 144

135 Border Color: Black Hover Color select the color of thumbnail border when hovered Hover Color: Red Hover Color: Green Show Shadow defines whether to show or hide the shadow in thumbnail image 135 / 144

136 Show Shadow No Shadow Shadow Color select the color of thumbnail shadow Shadow Color: Black 136 / 144

137 Shadow Color: Light Blue Slideshow Panel Fade Duration set the duration of image fading animation. Pickup Duration set the duration of image pick-up / put-down animations. Show Title defines whether to show or hide title text in Lightbox image. Title CSS set CSS styling to be applied to the title. Show Description defines whether to show description text in Lightbox image. Description CSS set CSS styling to be applied to the description text. Title & Description inside LightBox image Theme Masonry configuration JSN Theme Masonry in the front-end Theme Masonry is newly-added to JSN ImageShow version 4.9.4along with the release of JSN Artista template. This theme implements the JavaScript grid layout library Masonry, which works by placing elements in optimal position based on available vertical space, sort 137 / 144

138 of like a mason fitting stones in a wall - masonry.desandro.com Showcase settings page 1. Parameters - The place to configure 19 parameters. 2. Preview- See how your slideshow looks like when parameters are configured. Theme's Parameters In JSN ImageShow Theme Masonry, he parameters are separated in 3 groups located in the tabs as follows: Image to set image presentation and interaction. Caption to set the title and description of the showcase. Layout to set the layout, transition and pagination type of the showcase. For information about each parameter group read the relevant chapter of the manual. Image Panel Image Source - select the image source to present. Border Thickness - set the thickness (in pixels) of thumbnail 138 / 144

139 border. Border Thickness: 2px Border Thickness: 10px Rounded Corner - set the rounded corner (in pixels) of each thumbnail. Rounded Corner: 0px Rounded Corner: 8px Border Color - select the color of thumbnail border. 139 / 144

140 Border Color: Black Border Color: Cyan Click Action - select the action that will happen when viewer clicks on the focused thumbnail. Caption Panel Show Caption - defines whether to show or hide caption panel. Caption panel Background Color - set the color of Information Panel background. 140 / 144

141 Background Color: Green Panel Opacity - set the Panel Opacity. Panel Opacity: 75% Panel Opacity: 30% Show Caption Title - defines whether to show or hide caption title. Title CSS - set CSS styling to be applied to the title. Show Caption Description - defines whether to show description text in Information Panel. Description Length Limitation - set the number of words limitation for description. If description contains more words than the limitation number, it will be truncated and added ' ' to the end. Description CSS - set CSS styling to be applied to the description text. Layout Panel Layout Type - select the layout of the showcase (Fixed or Fluid) 141 / 144

142 Fixed Column Width - align items to a horizontal grid. Column Width: 180 Column Width: 220 Fluid Fluid Layout Gutter - add horizontal and vertical space between item elements. Gutter: / 144

143 Gutter: 10 Is Fit Width - set the width of the container to fit the available number of columns, based on the size of container's parent element. Transition Duration - set the duration of the transition when items change position or appearance (default: '0.4s') Pagination Type - select pagination type of the showcase All - All images in the slideshow will be shown. Infinite Scroll - The next images in the slideshow will be shown on page scroll Images loading on Scroll Load More - The next images in the slideshow will be shown on clicking button Load More Button Load More Differences between PRO & FREE edition Attention! In Free edition: You are limited to create only 3 image showlists 143 / 144