Primary Promotion area configuration PDF Print E-mail

Article index:
Page 1 of 2

Header image slideshow

JSN ImageShow

The header image slideshow you see on JSN Epic demo website is another cool Joomla! extension from JoomlaShine.com called JSN ImageShow. You can download JSN ImageShow Free edition at no cost from Customer Area or JSN ImageShow download page. For more information about how to work with JSN ImageShow please go to JoomlaShine Docs portal.

Stage 1: Prepare images to be included in slideshow

In this stage you are going to get your images ready for the slideshow. JSN ImageShow is able to automatically resize your images to match the slideshow size, but for the best result we’d recommend you to pay attention to preparing your images. The main thing here is to crop your images so they have size similar to slideshow area size. That means the width/height ratio of sizes should be the same or similar. For example, if you have slideshow area with size 450px * 300px (the ratio is 1.5) then your images would better be in the range from 375px * 235px (the ratio is 1.6) to 525px * 375px (the ratio is 1.4).

Another thing worth mention here is JSN ImageShow works best with JPEG format, so if you are going to show photos, please use JPEG format.

Stage 2: Upload images to the source

Now, when your images are ready, it’s time to upload them to the source. JSN ImageShow is able to get images from following sources:

  • Local image folder – This is simple folder inside your Joomla root folder. Best if image folder is located under folder “images”.
  • Joomla Galleries – Current JSN ImageShow support 2 very well-known Joomla photo gallery extensions called Phoca Gallery and JoomGallery. If you already using some of them, then you can configure showlist to take images from there.
  • Phoca Gallery – Besides from local sources on your server. JSN ImageShow is able to take images from external sources Flickr and Picasa.

Now, to make simply the process, let’s assume we will create folder myphotos under folder images/ and upload all images there by FTP client.

Stage 3: Create showlist in JSN ImageShow administration panel

Now when images are ready on the server, it’s time to create a showlist, which contains information about what images to shown. Please make following steps:

  1. Go to JSN ImageShow Control Panel by menu Components -> JSN ImageShow -> Showlists
  2. Click on button New on toolbar, input title Sample Promo Images and click Apply
  3. Click on button Manage Images, then Select new Image Source
  4. Next, select Image Folder option and click Choose selected source
  5. Next, in appeared modal window select option Add all images from selected folders and select folder myphotos in the list.
  6. Click Ok, now you will see all images in the list.

Stage 4: Create showcase in JSN ImageShow administration panel

Now when the showlist is ready, we need to create a showcase, which contain information about how to show images selected in showlist. Please make following steps:

  1. Go to JSN ImageShow Control Panel by menu Components -> JSN ImageShow -> Showcases
  2. Click on button New on toolbar, input title Sample Slideshow and click Apply
  3. In section Showcase Parameters go to tab SlideShow and set parameter Auto Play to Yes. You can return back to showcase setting page later for more configuration, but for now, the settings are good enough.
  4. Click button Save on toolbar.

Stage 5: Configure JSN ImageShow module in appropriate position

Now when you have configured showlist and showcase, it’s time to setup JSN ImageShow module to present it. Please make following steps:

  1. Go to module manager by menu Extensions -> Module Manager
  2. Click on JSN ImageShow item in the list and setup parameters as following:
  • Show title: No
  • Position: promo
  • Enabled: Yes
  • Menus: All (or at least Home)
  • Showlist: Sample Promo Images
  • Showcase: Sample Slideshow
  • Overall Width (px, %): 100%
  • Overall Height (px): 280

Attention: All stock photos used on JSN Epic demo website are only for demo purposes and NOT included in the template package.

Prev - Next
Article index:

Last Updated on Wednesday, 14 July 2010 09:02