Bj imagine slider tutorial
-
Upload
by-joomla -
Category
Self Improvement
-
view
1.699 -
download
2
description
Transcript of Bj imagine slider tutorial
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
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
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.
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.
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
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
Byjoomla.com [GETTING STARTED WITH IMAGINE SLIDER 2]
8 ByJoomla.com
b) Free verson Parameters
Figure 6: Module manager window
Figure 7: Parameters window
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
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
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
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
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
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
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
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