jf slideshow

Manual v 1.0

Joomla! module extension

for Joomla! versions: >1.5 / 2.5 / 3.0

This manual cannot be redistributed without permission from joomfreak.

More info at www.joomfreak.com

I. Introduction
1. Why do I need this module

JFSS slideshow module by joomfreak is a Joomla! module to display images and Youtube videos in your website!
It can be used in 2 different versions:
1) Pictures Slideshow (Fullscreen or responsive slide type)
2) Fullscreen Youtube video
If you need the usage instructions pdf please visit joomfreak website and checkout the user guide (you can find it
in the downloads area). Make sure you check out the official joomfreak DEMO site to see the module in action.
Enjoy this fine release from joomfreak!

2. Changelog

Please visit joomfreak for release information.

3. Credits

The JFSS slideshow module utilizes the following scripts:

Skitter jQuery
by Thiago S.F. - Web Developer.
Supersized Fullscreen background slideshow
by Sam Dunn of One Mighty Roa.
jQuery Tubular plugin

by Sean McCambridge
mooRainbow javascript color picker

by Djamil Legato

4. About joomfreak

The JFSS slideshow module is a Joomla! CMS extension developed by joomfreak and released under the GNU General Public License. joomfreak is a bunch of joomlanerds hailing from the depths of the Alps. We love to design and
code free website templates by using the mightiest content management system on earth: Joomla!.
Make sure you visit:
www.joomfreak.com for all the latest news and updates from us.
www.joomfreak.com/demo

to checkout live our templates and extensions
www.joomfreak.com/forum.html
submit your personal wishes, share your problems and suggestions

related to the templates & extensions with us and the community
What da hell is joomfreak?

joomfreak is a Kreatif Multimedia GmbH project

II. Installation
1. Get the module

Download the module for your Joomla! version from the download area of joomfreak.com

2. Installation through your Joomla! backoffice extensions installer page

Login to your Joomla! Administrator Area
Navigate to the Extensions Manager / Installer page
Select the module zip that you downloaded and click on install / upload
If installation was successful you will get the description of the module etc.
If installation gives error please check out the following things:
Have this folders the correct folder permissions?
CHMOD 777 -> modules
CHMOD 777 -> language/en-GB
Manual installation
Login to your domain via ftp using a FTP program (E.g. Filezilla)
Navigate to the folder modules
Extract the module zip you downloaded to your PC
-> Copy the folder mod_jfslideshow into the modules folder of Joomla!
-> Copy the file en-GB.mod_jfslideshow.ini into the language/en-GB folder of Joomla!
After you finished this 2 steps you can enter backoffice Administration area of Joomla!
Navigate to the Modules manager.
Click on New
Select JF Slideshow

3. After installation is complete you can go to the modules manager and start
configuring the module

This manual cannot be redistributed without permission from joomfreak.

More info at www.joomfreak.com

III. Configuration Slide Type

1. Go to Extensions -> Module Manager -> jf-slideshow
- Module Class Suffix

Set a module class suffix for the module if you need it

- Select module type

To set a image as page background select SLIDESHOW

To set a Youtube video as page background, select YOUTUBE

2. Slide Type: Responsive

- Arrow Navigation

Select if you want to display arrow navigation or not.

- Arrow Style

Select your desired arrow style.

- Slide interval

Time delay between transitions in ms (E.g. 4000 = 4 seconds).

- Transition

Select one single transition effect for your slideshow or choose random to use
random transition effects.

- Slide max height

Insert the desired height value (E.g. 760) of the responsive image container.

Slide Type: Background Supersized

- Arrow Navigation

Select if you want to display arrow navigation or not.

- Arrow Style

Select your desired arrow style.

- Slide interval

Time delay between transitions in ms (E.g. 4000 = 4 seconds).

- Transition

Select one single transition effect for your slideshow or choose random to use
random transition effects.

- Transition speed

This is the speed at which the effect changes in ms (E.g. 4000 = 4 seconds).

- Performance

Normal
No adjustments
Hybrid speed/quality
Lowers image quality during transitions
Restores after completed
Optimizes image quality
Faster transition speed, lower image quality
Optimizes transition speed
Faster transition speed, lower image quality
- Slide captions

Enables/Disables slide captions texts that can be set in the Slide# tab.

Slide Type: YouTube Video

- YouTube video ID
To add a YouTube video, you need the ID code for the video. The easiest way to find

this is to look at the URL of the YouTube page for the video.

The string of letters and numbers after v= in the URL is the id code.

So for the URL: http://www.youtube.com/watch?v=6hS2OMe4lXM the id code
is 6hS2OMe4lXM.
- Starting position in seconds

Here you can define the number of seconds that will pass in the video before you
set your start position. E.g.: if you want your video to start directly from position
00:15, insert the value 15 here. If you want the video to start at position 01:30,
insert the value 90 here.

- Repeat
Choose YES to continuously play the video. Choose NO to show related videos at

the end of your video.
- Mute sound
Choose YES to mute the audio of video. Choose NO to play the YouTube videos

with audio enabled.

This manual cannot be redistributed without permission from joomfreak.

More info at www.joomfreak.com

IV. Configuration Slide# Tab

1. Only available for Slide Type Responsive and Background Supersized
- Background image url

Enter the exact url to the background image (E.g. images/image-01.jpg).

- Slogan Text

Insert the desired height value (E.g. 760) of the responsive image container.

- Font family

Select the desired font. With font preview!

- Font Size

Change the slogan text font size according to your needs

- Slogan color

The color of the slogan text. You can use the colorpicker or insert the color
from hex code (E.g. #000000)

- Slogan Shadow

Choose YES/NO to use a shadow for your slogan text.

- Slogan text linked

If you want the slogan text to be linkable select YES

- Slogan url

Insert the url link that should be placed on the slogan text. Works only if Slogan
text linked is set to YES

- Description text
This is the text that appears below the slogan text. You can use raw text and also
HTML here.
- Description Font family

Select the desired font. With font preview!

- Description Font Size

Change the description font size according to your needs.

- Description color

The color of the description text. You can use the colorpicker or insert the color
from hex code (E.g. #000000)

- Description background color The background color of the description text. You can use the colorpicker or insert

the color from hex code (E.g. #000000). Leave empty to use transparent
background.
- Description text block width Insert the desired width value (E.g. 300) of the description text block.
- Description text border radius Insert the desired border radius value (E.g. 15) if you want the description text

block width to have rounder corners.
- Description text box shadow Choose YES/NO to use a shadow for your description box block.

- Background of Link

Set YES/NO to use a background on the href links in the description text.

- Background color of Link

Here you can define the background color of the description text href Link. You can
use the colorpicker or insert the color from hex code (E.g. #000000). Works only if
Background color of Link is set to YES

- Color of Link normal

Here you can define the normal state color of the description text href Link.
You can use the colorpicker or insert the color from hex code (E.g. #000000).

- Color of Link hover

Here you can define the hover state color of the description text href Link. You can
use the colorpicker or insert the color from hex code (E.g. #000000).

This manual cannot be redistributed without permission from joomfreak.

More info at www.joomfreak.com

V. Screenshots
1. Module Type Slideshow -> Responsive

2. Module Type Slideshow -> Responsive

3. Module Type YouTube

This manual cannot be redistributed without permission from joomfreak.

More info at www.joomfreak.com

V. Screenshots
1. Slideshow options Slide# for Slideshow and Background Supersized

This manual cannot be redistributed without permission from joomfreak.

More info at www.joomfreak.com