13
This documentation is release under Creative Commons Attribution-Non-Commercial-Share Alike 3 Unported Licence. You are free to print this document for convenient usage. Copyright ゥ 2006 - 2010 http://www.joomlashine.com Official JSN ImageShow v2 Quick Start Guide (for version 2.5+)

Jsn Imageshow Quick Start Guide

Embed Size (px)

Citation preview

Page 1: Jsn Imageshow Quick Start Guide

This documentation is release under Creative Commons Attribution-Non-Commercial-Share Alike 3 UnportedLicence. You are free to print this document for convenient usage.

Copyright © 2006 - 2010 http://www.joomlashine.com

Official JSN ImageShow v2Quick Start Guide

(for version 2.5+)

Page 2: Jsn Imageshow Quick Start Guide

Joomla! extension JSN ImageShow v2 Quick Start Guide © http://www.joomlashine.com

2

Table of Contents

Official JSN ImageShow v2 Quick Start Guide ................................................................................................1Table of Contents .................................................................................................................................................................2Introduction ...........................................................................................................................................................................3Step 1. Extension Installation ...........................................................................................................................................4

SEF Extensions Configuration ..........................................................................................................................4Step 2. Content Preparation ..............................................................................................................................................5

Creating a Showlist .............................................................................................................................................5Creating a Showcase .........................................................................................................................................6Install Sample Data (optional) ...........................................................................................................................7

Step 3. Gallery presentation ..............................................................................................................................................8Presentation as component via menu item.....................................................................................................9Presentation as module in position ................................................................................................................10Presentation as plugin in article’s content.....................................................................................................11

What’s next? ........................................................................................................................................................................13Give a feedback ................................................................................................................................................13

Page 3: Jsn Imageshow Quick Start Guide

Joomla! extension JSN ImageShow v2 Quick Start Guide © http://www.joomlashine.com

3

Introduction

Thank you for your interest in JSN ImageShow extension. We really appreciate your choice and truly wish ourproduct will bring more value to your website and business.

We highly recommend you read our documentations in following order for the best understanding:

JSN ImageShow Quick Start Guide – This document will tell you minimum steps to get the extensionworks out of the box.

JSN ImageShow Configuration Manual - This document gives you a detailed description of everyproduct feature. You will use this document as a reference every time you want to configure your product.

This document assumes that you already have installed Joomla! CMS with sample data and JSN ImageShowextension downloaded.

Page 4: Jsn Imageshow Quick Start Guide

Joomla! extension JSN ImageShow v2 Quick Start Guide © http://www.joomlashine.com

4

Step 1. Extension Installation

In the download package you can find extension installation file called jsn_imageshow_XXX_2.Y.zip, whereXXX is the extension edition and YY is the extension version you have. This is standard Joomla! 1.5.x extensioninstallation file which can be installed in Joomla! administration normally as following:

In Joomla! administration go to menu Extensions -> Install/Uninstall

Once you are on Extension Manager click Browse button and select extension installation filejsn_imageshow_XXX_2.Y.zip. After that click on button Upload File & Install.

Installation file will be uploaded to your server and installed in Joomla! CMS.

SEF Extensions Configuration

You can skip this section if you do not use any SEF extensions. If you are using any external SEF component, thenyou should configure it to by pass JSN ImageShow component. Bellow is an example of bypassing JSNImageShow component in SEF extensions sh404SEF.

In Joomla! administration go to menu Components -> sh404sef -> Control panel

Next, on Control Panel page, choose tab Configuration and click sh404sef Configuration

Next, on appeared modal window choose tab By component, locate row imageshow and set all drop downlists to Skip.

Push Save button on the top toolbar.

Page 5: Jsn Imageshow Quick Start Guide

Joomla! extension JSN ImageShow v2 Quick Start Guide © http://www.joomlashine.com

5

Step 2. Content Preparation

Creating a Showlist

Showlist stores information about what images to display. JSN ImageShow v2 is able to connect to various imagesources and use images directly from there. Image details like title and description are also used from the originalsource, but user has the choice to set his own details which will be stored in local database. User can have multipleshowlists connected to multiple image sources.

Now, let’s create a showlist with images taken from local image folder on your website. Please make followingsteps:

Prepare the images you want to add in your showlist and put them all in some folder on your server. Forexample: /images/stories/myphotos/

In Joomla! administration panel, go to menu Components -> JSN ImageShow -> Showlists

Next, on Showlists Manager page hit button New

Next, on Showlist Settings page fill fields Title, then push button Apply and Manage Image

Next, on Showlist Images Manager page do following:

o Push button Select Image Source.

o Select Image Folder in field set Local image folder, then push button Use selected source.

o In appeared modal window select Add all images from selected folder(s), then select the foldermyphotos in the list and push Ok.

Now, you are back on Showlist Images Manager page. Here make sure all images are properly added andclick button Close.

You have just created the showlist ready for presentation.

Page 6: Jsn Imageshow Quick Start Guide

Joomla! extension JSN ImageShow v2 Quick Start Guide © http://www.joomlashine.com

6

Creating a Showcase

Showcase stores information about how to display images. JSN ImageShow v2 provides 69 parameters for user toconfigure the look and feel of the gallery. User has control of almost everything starting from overall appearanceending fine tuned elements like thumbnails, etc. User can create multiple showcases for different type ofpresentation and use them to show multiple showlists.

Now, let’s create a simple showcase with all default preconfigured parameters. Please make following steps:

In Joomla! administration panel, go to menu Components -> JSN ImageShow -> Showcases

Next, on Showcases Manager page hit button New

Next, on Showcase Settings page fill fields Title, then push button Save

You have just created the showcase ready for presentation.

Page 7: Jsn Imageshow Quick Start Guide

Joomla! extension JSN ImageShow v2 Quick Start Guide © http://www.joomlashine.com

7

Install Sample Data (optional)

JSN ImageShow has very useful feature of installing sample data with 2 predefined showcases and 3 showlistswith images stored in JoomlaShine.com public Picasa account. The sample data feature can really save your timewhen testing JSN ImageShow.

To perform sample data installation please make following steps:

Make sure you do not have any valuable showlist and showcase configured.

In Joomla! administration panel, go to menu Components -> JSN ImageShow -> Configuration &Maintenance.

On the left menu, select Sample Data Installation

On the right panel, select the appropriate installation method. The process is very simple andstraightforward, so just follow the onscreen instruction.

o Remote installation – In this method, JSN ImageShow will get sample data package from ourserver and perform installation. This is recommended method and you should try it first.

o Local installation – In this method, you will need to download sample data package to yourcomputer and then use it for installation. You should try this method only when the Remoteinstallation method is failed due to unavailability of internet connection.

Now, you have installed sample data ready for presentation.

Page 8: Jsn Imageshow Quick Start Guide

Joomla! extension JSN ImageShow v2 Quick Start Guide © http://www.joomlashine.com

8

Step 3. Gallery presentation

You can present your gallery in 3 different ways: via component (menu item), module (in any module position)and content plugin (inside any article). Let take a look at each method.

Page 9: Jsn Imageshow Quick Start Guide

Joomla! extension JSN ImageShow v2 Quick Start Guide © http://www.joomlashine.com

9

Presentation as component via menu item

This method allows you to create menu item, clicking on which will lead to the page with gallery presented. Let’screate a menu item called Image Slideshow in menu mainmenu. Please make following steps:

In Joomla! administration panel, go to menu Menus -> mainmenu

Next, on Menu Item Manager push button New

Next, on menu item type selection page, look under Internal Link and select JSN ImageShow ->Standard Gallery Layout

Next, menu item settings page, set parameters as following:

a. Title: Image Slideshow

b. Published: Yes

On the right, in panel Parameters (Basic), set parameters as following and

a. Showlist: the showlist you have created on Step 2.

b. Showcase: the showcase you have created on Step 2.

Push button Save

Now you can get back to front-end of your website, click on menu item Image Slideshow and see your gallery inall beauty.

Page 10: Jsn Imageshow Quick Start Guide

Joomla! extension JSN ImageShow v2 Quick Start Guide © http://www.joomlashine.com

10

Presentation as module in position

This method allows you to show your gallery in any module position presented in the template. Let’s create amodule called Image Slideshow Module and put it on position promo. Please make following steps:

In Joomla! administration panel, go to menu Extensions -> Module Manager

Next, on Module Manager page, push button New and then select JSN ImageShow

Next, on Module settings page, set parameters as following:

o Title: Image Slideshow Module

o Show Title: No

o Enabled: Yes

o Position: promo (or any other position you want)

On the right, in panel Module Parameters, set parameters as following:

o Showlist: the showlist you have created on Step 2.

o Showcase: the showcase you have created on Step 2.

Push button Save

Page 11: Jsn Imageshow Quick Start Guide

Joomla! extension JSN ImageShow v2 Quick Start Guide © http://www.joomlashine.com

11

Presentation as plugin in article’s content

This method allows you to show your gallery in any article. You can show gallery as it is or as a link, click onwhich will open gallery in modal window. Let’s add gallery to sample article called Welcome to Joomla!. Pleasemake following steps:

In Joomla! administration panel, go to menu Content -> Article Manager -> Welcome to Joomla!

Next, on article settings page, put cursor to the place where you want to insert the gallery and input pluginsyntax {imageshow sl=1 sc=1 w=500 h=400 /}. Here:

o sl – the id number of the showlist you created in Step 2. You can recheck that id number by going tomenu Components -> JSN ImageShow -> Showlists

Page 12: Jsn Imageshow Quick Start Guide

Joomla! extension JSN ImageShow v2 Quick Start Guide © http://www.joomlashine.com

12

o sc - the id number of the showcase you created in Step 2. You can recheck that id number by goingto menu Components -> JSN ImageShow -> Showcases

o w – the width of gallery area. This parameter is optional. If not specified, the parameter OverallWidth defined in showcase will be used.

o h - the height of gallery area. This parameter is optional. If not specified, the parameter OverallHeight defined in showcase will be used.

If you want to show gallery in modal window opened by a link, then input syntax {imageshow sl=1sc=1}Click here to see gallery presentation in modal window{/imageshow}. All plugin parameters arethe same as described above.

Next, push button Save

Now you can go to front-end of your website to see how gallery is presented in the article.

Page 13: Jsn Imageshow Quick Start Guide

Joomla! extension JSN ImageShow v2 Quick Start Guide © http://www.joomlashine.com

13

What’s next?

Congratulations, now you have basic understanding about how JSN ImageShow works. Your next step is to readJSN ImageShow Configuration Manual. In that manual you will find detailed description about all extensionfeatures and you can quickly apply them to your website.

Give a feedback

We are continuously working on new releases of our products and would really appreciate any of your comments,feedbacks. Feel free to drop us a line at Feedback Page.