BYJOOMLA.

COM

GETTING STARTED WITH BJ IMAGE SLIDER 2

Created: 11/11/2011

Byjoomla.com

[GETTING STARTED WITH IMAGINE SLIDER 2]

CONTENTS
I, HOW TO DOWNLOAD .............................................................................................. 3 1, Free verson ............................................................................................................ 3 2, Pro/Dev verson ....................................................................................................... 3 II, HOW TO INSTALL .................................................................................................. 4 III. CONFIGURATION .................................................................................................. 5 1, BJ ImageSlider 2 component .................................................................................. 5 a) Configuration .......................................................................................................... 5 b) Manage categories .................................................................................................. 6 C) Manage imagines .................................................................................................... 6 2, BJ ImageSlider 2 Free module ................................................................................. 7 a) How to get there..................................................................................................... 7 b) Free verson Parameters ........................................................................................... 8 3, BJ ImageSlider 2 PRO module ................................................................................ 12 a) How to get there................................................................................................... 12 b) PRO verson Parameters ......................................................................................... 12 4, BJ ImageSlider PRO/DEV vs. BJ ImageSlider FREE .................................................. 16

ByJoomla.com

Byjoomla.com

[GETTING STARTED WITH IMAGINE SLIDER 2]

I, HOW TO DOWNLOAD
1, Free verson
All free templates and extentions can be downloaded from

http://byjoomla.com/download Byjoomla

extentions Joomla 1.5

extentions BJ Image slider 2 module

Figure 1: Download BJ Imagine Slider

2, Pro/Dev verson
Login at http://clients.byjoomla.com/client_login.php Login using your registered Email and Password
Figure 2: Login window

At the very bottom of this page, there is a list of order. Click on View

button to go on

Figure 3: View extentions

In the next page, there are downloadable packages

ByJoomla.com

Byjoomla.com -

[GETTING STARTED WITH IMAGINE SLIDER 2]

BJ imagine slider 2 PRO contains instalation file for Joomla 1.5 BJ_Pro_Terms_and_conditions document. contains and terms and conditions

BJ Image Slider 2 PRO for Joomla 1.6 contains installation file for Joomla 1.6

II, HOW TO INSTALL

1) Unzip all the .zip package. 2) Find the installation file inside. 3) Login Joomla as Administrator user.

a. Extensions Install/Uninstall.
4) Press Choose file button and find you downloaded file

com_bjimageslider_x.x.x.zip on your computer.

5) Install component by pressing Upload File & Installbutton.

ByJoomla.com

Byjoomla.com

[GETTING STARTED WITH IMAGINE SLIDER 2]

6) Install module by Press Choose file button and find you downloaded file mod_bjimageslider_x.x.x.zip on your computer.

III. CONFIGURATION
BJ ImageSlider, BJ ImageSlider 2 and BJ PhotoGallery modules work with BJ ImageSlider Component. You need the component to manage all the images. Thus, it is needed to get familiar with the component first.

1, BJ ImageSlider 2 component
a) Configuration

Configuration determine the size of your slideshow, including main images and their thumbnails. For example, you want your slideshow to have the main image with the size of 650px * 350px, and thumbnail images have the size of 52px * 35px Config your slide show in BJ ImageSlider component's configuration section.

ByJoomla.com

Byjoomla.com

[GETTING STARTED WITH IMAGINE SLIDER 2]

Components BJ ImageSlider Configuration enter Image and

Thumbnail width and Height Save or Apply

b) Manage categories Components BJ ImageSlider Manage

Categories
Creat new category

New Name Description (if needed)

Figure 4: Creating new category window

C) Manage imagines Upload imagines

Components BJ ImageSlider Manage Images Upload

Choose category to place new image in. Enter Name and Description for the image.

ByJoomla.com

Byjoomla.com

[GETTING STARTED WITH IMAGINE SLIDER 2]

Enter CSS class for this image. Note that this CSS is fre-defined in BJ ImageSlider module, or you can use your own definition. This CSS class is used to style image's caption. Choose images to upload as main image and thumbnail image Upload Note that all published images in category will be shown in BJ ImageSlider.

Figure 5: Uploading photos window

2, BJ ImageSlider 2 Free module

a) How to get there

Extentions Module manager Choose BJ ImageSlider 2 Free

ByJoomla.com

Byjoomla.com

[GETTING STARTED WITH IMAGINE SLIDER 2]

Figure 6: Module manager window

b) Free verson Parameters

Figure 7: Parameters window

ByJoomla.com

Byjoomla.com

[GETTING STARTED WITH IMAGINE SLIDER 2]

Category ID: ID of the photo category that you want to show. You can find the ID in category category manager

Figure 8: Category ID in category manager window

Slide show width/height: Width and height of SlideShow in pixel Gallery boder width: Width of boder in pixel

Delay time: Length of time that one picture will be shown in millisecond.

Figure 9: Gallery boder width

Duration time: Length of time that the trasformation between pictures happens in millisecond. Filmstrip

size:

number

of

visible
Figure 10: Filmstrip size=4

navigation button. Navigation in pixel Caption caption

button

margin:

distance between navigation buttons

thickness:

space

for

Figure 11: Caption thickness

ByJoomla.com

Byjoomla.com

[GETTING STARTED WITH IMAGINE SLIDER 2]

Caption opacity: (0-1) 0-total transparent. 1-total opaque Slideshow background and text panel background: choose color in hexa color for background.

Figure 12: Parameter window

Show caption: Description of picture is shown or not Show next item title: Title of picture is shown or not when the mouse is over the navigation button.

Figure 13: Caption and title position in slideshow

10

ByJoomla.com

Byjoomla.com

[GETTING STARTED WITH IMAGINE SLIDER 2]

Pause on Hover: Whether to pause the animation when mouse is on panel. Show

play/pause button: Whether to show the

Figure 14: Pause button

controller button when the mouse over panel Show panel gradient: just enable this parameter in PRO verson Autohide filmstrip:

o If yes- the filmstrip will disapperar when mouse out of panel and appear when mouse over panel. o If no- the filmstrip is fixed. Auto start Slide show: Wheather to start the slide show when open page. If no- the first picture is shown. Navigation buttons are used to move to the next picture. Show filmstrip: Whether to show the filmstrip containing the navigation buttons or not. Filmstrip position: Defaut in the bottom. More positions are provided in PRO verson. Caption position: Defaut in the right hand side. More positions are provided in PRO verson. Image and Text transition effect: Defaut blur. More options are provided in PRO verson. Panel on click: Defaut do nothing. More options are provided in PRO verson. Transition easing method: Defaut swing. More options are provided in PRO verson. Need Jquery?: a javascript used by the module. If you are going to use BJ Image Slider 2 with BJ Venus template, this parameter should be turned off 11 ByJoomla.com

Byjoomla.com

[GETTING STARTED WITH IMAGINE SLIDER 2]

(because BJ Venus has loaded this library by default). Otherwise, turn it on when using with non-Jquery supported template.

3, BJ ImageSlider 2 PRO module

a) How to get there

Extentions Module manager Choose BJ ImageSlider PRO

b) PRO verson Parameters

BJ ImageSlider 2 PRO/DEV has 2 styles: Default (as can be seen on BJ Venus demo page) and Venus 2 (as can be seen on BJ Venus 2 demo page). Thus, the parameters are divided in 3 main groups: common parameters affect both styles; default parameters affect Default style only; and venus 2 parameters affect Venus 2 style only.
Slider style: BJ ImageSlider 2 PRO user can choose between Slider style Venus 1 (defaut) and Venus 2

Common Parameter

Figure 15: Common Parameters

12

ByJoomla.com

Byjoomla.com

[GETTING STARTED WITH IMAGINE SLIDER 2]

Slide show width/height: Width and height of SlideShow in pixel Gallery boder width: Width of boder in pixel Delay time: Length of time that one picture will be shown in millisecond. Duration time: Length of time that the trasformation between pictures happens in millisecond. Filmstrip
Figure 16: Gallery boder width

size:

number

of

visible

Figure 17: Filmstrip size=4

navigation button. Navigation button margin: distance between navigation buttons in pixel Caption for caption

thickness:

space

Figure 18: Caption thickness

Caption opacity: (0-1) 0-total transparent. 1-total opaque Slideshow background and text panel background: choose color in hexa color for background. Show caption and caption titile: Description of picture and name of picture is shown or not

13

ByJoomla.com

Byjoomla.com

[GETTING STARTED WITH IMAGINE SLIDER 2]

Show panel gradient:

Figure 19. Panel without gradient

Figure 20. Panel with gradient

Auto start Slide show: Wheather to start the slide show when open page. If no- the first picture is shown. Navigation buttons are used to move to the next picture. Pause on Hover: Whether to pause the animation when mouse is on panel.

Defaut Parameter
Filmstrip Navigation in pixel Show next item title: Title of picture is shown or not when the mouse is over the navigation button. Show Whether

size:

Number

of

navigation button in filmstrip.

button

margin:

distance between navigation buttons

play/pause
to show the

button:
controller If yes- the
Figure 21: Defaut Parameters

button when the mouse over panel Autohide filmstrip: filmstrip will disapperar when mouse

out of panel and appear when mouse over panel. 14 ByJoomla.com

Byjoomla.com

[GETTING STARTED WITH IMAGINE SLIDER 2] If no- the filmstrip is fixed

Show caption outside: whether to let to caption go out side panel Show filmstrip: Whether to show the filmstrip containing the navigation buttons or not Filmstrip position: The position of Filmstrip: Top or Bottom Caption position: The position of Caption: Left or Right

Venus 2 Parameter

Figure 22: Venus 2 Parameters

Caption Height: Height of caption in pixel Caption Top margin: Space from top of caption to top of panel Caption Left margin: Space from the left margin of caption to left margin of panel.

Effect

Figure 23: Effect Parameters

Image Transition effect: PRO verson provide a lot of effect applied for imagine, text transition, Panel on click, transition easing method Need Jquerry? a javascript used by the module. If you are going to use BJ Image Slider 2 with BJ Venus template, this parameter should be turned off

15

ByJoomla.com

Byjoomla.com

[GETTING STARTED WITH IMAGINE SLIDER 2]

(because BJ Venus has loaded this library by default). Otherwise, turn it on when using with non-Jquery supported template.

4, BJ ImageSlider PRO/DEV vs. BJ ImageSlider FREE

Table below lists the differences in module parameters between PRO/DEV version and FREE version BJ ImageSlider PRO module parameters Slider style Show panel gradient Filmstrip position Caption position Image transition effect Text transition effect Panel on click Transition Easing method
Table 1 BJ ImageSlider PRO/DEV vs. BJ ImageSlider FREE

BJ ImageSlider FREE module parameters Venus 1 style No panel gradient Bottom only Right only Blur only Blur only Do nothing only Swing only

Venus 1 style and Venus 2 style 2 options: Yes or No 2 options: Top or Bottom 2 option: Left and Right 9 options 3 options 4 options Various options

16

ByJoomla.com