Bj Imagine Slider Tutorial(1)

16
BYJOOMLA.COM GETTING STARTED WITH BJ IMAGE SLIDER 2 Created: 11/11/2011

Transcript of Bj Imagine Slider Tutorial(1)

Page 1: Bj Imagine Slider Tutorial(1)

BYJOOMLA.COM

GETTING STARTED WITH

BJ IMAGE SLIDER 2

Created: 11/11/2011

Page 2: Bj Imagine Slider Tutorial(1)

Byjoomla.com [GETTING STARTED WITH IMAGINE SLIDER 2]

2 ByJoomla.com

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

Page 3: Bj Imagine Slider Tutorial(1)

Byjoomla.com [GETTING STARTED WITH IMAGINE SLIDER 2]

3 ByJoomla.com

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

2, Pro/Dev verson

Login at http://clients.byjoomla.com/client_login.php

Login using your registered

Email and Password

At the very bottom of this

page, there is a list of

order. Click on “View”

button to go on

In the next page, there are downloadable packages

Figure 1: Download BJ Imagine Slider

Figure 2: Login window

Figure 3: View extentions

Page 4: Bj Imagine Slider Tutorial(1)

Byjoomla.com [GETTING STARTED WITH IMAGINE SLIDER 2]

4 ByJoomla.com

- BJ imagine slider 2 PRO contains instalation file for Joomla 1.5

- BJ_Pro_Terms_and_conditions contains and terms and conditions

document.

- 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 & Install“button.

Page 5: Bj Imagine Slider Tutorial(1)

Byjoomla.com [GETTING STARTED WITH IMAGINE SLIDER 2]

5 ByJoomla.com

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.

Page 6: Bj Imagine Slider Tutorial(1)

Byjoomla.com [GETTING STARTED WITH IMAGINE SLIDER 2]

6 ByJoomla.com

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)

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.

Figure 4: Creating new category window

Page 7: Bj Imagine Slider Tutorial(1)

Byjoomla.com [GETTING STARTED WITH IMAGINE SLIDER 2]

7 ByJoomla.com

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

Page 8: Bj Imagine Slider Tutorial(1)

Byjoomla.com [GETTING STARTED WITH IMAGINE SLIDER 2]

8 ByJoomla.com

b) Free verson Parameters

Figure 6: Module manager window

Figure 7: Parameters window

Page 9: Bj Imagine Slider Tutorial(1)

Byjoomla.com [GETTING STARTED WITH IMAGINE SLIDER 2]

9 ByJoomla.com

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

find the ID in category category manager

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 size: number of visible

navigation button.

Navigation button margin:

distance between navigation buttons

in pixel

Caption thickness: space for

caption

Figure 8: Category ID in category manager window

Figure 9: Gallery boder width

Figure 11: Caption thickness

Figure 10: Filmstrip size=4

Page 10: Bj Imagine Slider Tutorial(1)

Byjoomla.com [GETTING STARTED WITH IMAGINE SLIDER 2]

10 ByJoomla.com

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: 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 12: Parameter window

Figure 13: Caption and title position in slideshow

Page 11: Bj Imagine Slider Tutorial(1)

Byjoomla.com [GETTING STARTED WITH IMAGINE SLIDER 2]

11 ByJoomla.com

Pause on Hover: Whether to pause the animation when

mouse is on panel.

Show play/pause button: Whether to show the

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

Figure 14: Pause button

Page 12: Bj Imagine Slider Tutorial(1)

Byjoomla.com [GETTING STARTED WITH IMAGINE SLIDER 2]

12 ByJoomla.com

(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

Page 13: Bj Imagine Slider Tutorial(1)

Byjoomla.com [GETTING STARTED WITH IMAGINE SLIDER 2]

13 ByJoomla.com

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 size: number of visible

navigation button.

Navigation button margin: distance between navigation buttons in pixel

Caption thickness: space

for caption

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

Figure 16: Gallery boder width

Figure 17: Filmstrip size=4

Figure 18: Caption thickness

Page 14: Bj Imagine Slider Tutorial(1)

Byjoomla.com [GETTING STARTED WITH IMAGINE SLIDER 2]

14 ByJoomla.com

Show panel 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 size: Number of

navigation button in filmstrip.

Navigation button margin:

distance between navigation buttons

in pixel

Show next item title: Title of

picture is shown or not when the

mouse is over the navigation button.

Show play/pause button:

Whether to show the controller

button when the mouse over panel

Autohide filmstrip: If yes- the

filmstrip will disapperar when mouse

out of panel and appear when mouse over panel.

Figure 20. Panel with gradient Figure 19. Panel without gradient

Figure 21: Defaut Parameters

Page 15: Bj Imagine Slider Tutorial(1)

Byjoomla.com [GETTING STARTED WITH IMAGINE SLIDER 2]

15 ByJoomla.com

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

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

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

Figure 22: Venus 2 Parameters

Figure 23: Effect Parameters

Page 16: Bj Imagine Slider Tutorial(1)

Byjoomla.com [GETTING STARTED WITH IMAGINE SLIDER 2]

16 ByJoomla.com

(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

BJ ImageSlider FREE

module parameters

Slider style Venus 1 style and Venus 2 style Venus 1 style

Show panel gradient 2 options: Yes or No No panel gradient

Filmstrip position 2 options: Top or Bottom Bottom only

Caption position 2 option: Left and Right Right only

Image transition effect 9 options Blur only

Text transition effect 3 options Blur only

Panel on click 4 options Do nothing only

Transition Easing

method

Various options Swing only

Table 1 BJ ImageSlider PRO/DEV vs. BJ ImageSlider FREE