SlideShare une entreprise Scribd logo
1  sur  16
Télécharger pour lire hors ligne
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




        2                                                                                                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


      3                                                                            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          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.



    4                                                                             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.




     5                                                                    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.



     6                                                              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




     7                                                                   ByJoomla.com
Byjoomla.com     [GETTING STARTED WITH IMAGINE SLIDER 2]




                      Figure 6: Module manager window



b) Free verson Parameters




                            Figure 7: Parameters window



  8                                                       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


                                                                             Figure 9: Gallery boder
                                                                                      width
     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.
                                                                        Figure 10: Filmstrip size=4

     Navigation        button         margin:
       distance between navigation buttons
       in pixel
     Caption     thickness:        space     for
       caption




                                                               Figure 11: Caption thickness



9                                                                                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
        controller button when the mouse over panel                    Figure 14: Pause
                                                                            button
      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.                                                 Figure 16: Gallery boder
                                                                                       width
      Duration time: Length of time that the trasformation
        between pictures happens in millisecond.
      Filmstrip       size:    number     of   visible            Figure 17: Filmstrip size=4
        navigation button.
      Navigation button margin: distance between navigation buttons in pixel
      Caption        thickness:   space
        for caption




                                                          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        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
                                                            Figure 21: Defaut Parameters
       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         BJ ImageSlider FREE
                                parameters                        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               Various options                   Swing only
method
Table 1 BJ ImageSlider PRO/DEV vs. BJ ImageSlider FREE




    16                                                                         ByJoomla.com

Contenu connexe

Tendances

Picture style editor_win_instruction_manual_en
Picture style editor_win_instruction_manual_enPicture style editor_win_instruction_manual_en
Picture style editor_win_instruction_manual_enSrini Reddy
 
Navigating Around Google Docs Presentations An Expert Guide
Navigating Around Google Docs Presentations An Expert GuideNavigating Around Google Docs Presentations An Expert Guide
Navigating Around Google Docs Presentations An Expert GuideAudrianna Young
 
Digitial Photography using Picasa slides
Digitial Photography using Picasa   slidesDigitial Photography using Picasa   slides
Digitial Photography using Picasa slidesLarry Weber
 

Tendances (6)

Picture style editor_win_instruction_manual_en
Picture style editor_win_instruction_manual_enPicture style editor_win_instruction_manual_en
Picture style editor_win_instruction_manual_en
 
Movie Maker Help Sheet
Movie Maker Help SheetMovie Maker Help Sheet
Movie Maker Help Sheet
 
Navigating Around Google Docs Presentations An Expert Guide
Navigating Around Google Docs Presentations An Expert GuideNavigating Around Google Docs Presentations An Expert Guide
Navigating Around Google Docs Presentations An Expert Guide
 
Digitial Photography using Picasa slides
Digitial Photography using Picasa   slidesDigitial Photography using Picasa   slides
Digitial Photography using Picasa slides
 
Software user manual
Software user manualSoftware user manual
Software user manual
 
BBC 2 ident
BBC 2 identBBC 2 ident
BBC 2 ident
 

Similaire à Bj imagine slider tutorial

Non interactive materials
Non interactive materialsNon interactive materials
Non interactive materialsu082929
 
Step By Steps(movei maker)
Step By Steps(movei maker)Step By Steps(movei maker)
Step By Steps(movei maker)u083133
 
Bjvenus getting-started
Bjvenus getting-startedBjvenus getting-started
Bjvenus getting-startedBy Joomla
 
Bjvenus getting-started
Bjvenus getting-startedBjvenus getting-started
Bjvenus getting-startedBy Joomla
 
Presentation
PresentationPresentation
Presentationmonica
 
Graphical Animation - Lesson 2
Graphical Animation - Lesson 2Graphical Animation - Lesson 2
Graphical Animation - Lesson 2Jamie Hutt
 
Flash cs4 tutorials_2009
Flash cs4 tutorials_2009Flash cs4 tutorials_2009
Flash cs4 tutorials_2009techbed
 
Graphical Animation - Lesson 2
Graphical Animation - Lesson 2Graphical Animation - Lesson 2
Graphical Animation - Lesson 2Jamie Hutt
 
Introduction to Game Programming: Using C# and Unity 3D - Chapter 2 (Preview)
Introduction to Game Programming: Using C# and Unity 3D - Chapter 2 (Preview)Introduction to Game Programming: Using C# and Unity 3D - Chapter 2 (Preview)
Introduction to Game Programming: Using C# and Unity 3D - Chapter 2 (Preview)noorcon
 
How to make a Glog with Glogster, tutorial
How to make a Glog with Glogster, tutorialHow to make a Glog with Glogster, tutorial
How to make a Glog with Glogster, tutorialHoudini Howard
 
Adding An Avatar
Adding An AvatarAdding An Avatar
Adding An AvatarMr Hamilton
 
Adding An Avatar
Adding An AvatarAdding An Avatar
Adding An AvatarMr Hamilton
 
ETECH_WEEK7-Image-Manipulation-Techniques-1.pdf
ETECH_WEEK7-Image-Manipulation-Techniques-1.pdfETECH_WEEK7-Image-Manipulation-Techniques-1.pdf
ETECH_WEEK7-Image-Manipulation-Techniques-1.pdfbongsantiago96
 
Photostory
PhotostoryPhotostory
Photostoryu2910598
 

Similaire à Bj imagine slider tutorial (20)

Non interactive materials
Non interactive materialsNon interactive materials
Non interactive materials
 
M14 overview
M14 overviewM14 overview
M14 overview
 
Introduction to computing
Introduction to computingIntroduction to computing
Introduction to computing
 
Step By Steps(movei maker)
Step By Steps(movei maker)Step By Steps(movei maker)
Step By Steps(movei maker)
 
Bjvenus getting-started
Bjvenus getting-startedBjvenus getting-started
Bjvenus getting-started
 
Bjvenus getting-started
Bjvenus getting-startedBjvenus getting-started
Bjvenus getting-started
 
Photo editor
Photo editorPhoto editor
Photo editor
 
Photoshop basics
Photoshop basicsPhotoshop basics
Photoshop basics
 
Presentation
PresentationPresentation
Presentation
 
Graphical Animation - Lesson 2
Graphical Animation - Lesson 2Graphical Animation - Lesson 2
Graphical Animation - Lesson 2
 
Pharmapos Users Guide
Pharmapos Users GuidePharmapos Users Guide
Pharmapos Users Guide
 
Flash cs4 tutorials_2009
Flash cs4 tutorials_2009Flash cs4 tutorials_2009
Flash cs4 tutorials_2009
 
Graphical Animation - Lesson 2
Graphical Animation - Lesson 2Graphical Animation - Lesson 2
Graphical Animation - Lesson 2
 
Introduction to Game Programming: Using C# and Unity 3D - Chapter 2 (Preview)
Introduction to Game Programming: Using C# and Unity 3D - Chapter 2 (Preview)Introduction to Game Programming: Using C# and Unity 3D - Chapter 2 (Preview)
Introduction to Game Programming: Using C# and Unity 3D - Chapter 2 (Preview)
 
How to make a Glog with Glogster, tutorial
How to make a Glog with Glogster, tutorialHow to make a Glog with Glogster, tutorial
How to make a Glog with Glogster, tutorial
 
Cs Pe Create Slide Show
Cs Pe Create Slide ShowCs Pe Create Slide Show
Cs Pe Create Slide Show
 
Adding An Avatar
Adding An AvatarAdding An Avatar
Adding An Avatar
 
Adding An Avatar
Adding An AvatarAdding An Avatar
Adding An Avatar
 
ETECH_WEEK7-Image-Manipulation-Techniques-1.pdf
ETECH_WEEK7-Image-Manipulation-Techniques-1.pdfETECH_WEEK7-Image-Manipulation-Techniques-1.pdf
ETECH_WEEK7-Image-Manipulation-Techniques-1.pdf
 
Photostory
PhotostoryPhotostory
Photostory
 

Bj imagine slider tutorial

  • 1. BYJOOMLA.COM GETTING STARTED WITH BJ IMAGE SLIDER 2 Created: 11/11/2011
  • 2. 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 2 ByJoomla.com
  • 3. 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 3 ByJoomla.com
  • 4. 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 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. 4 ByJoomla.com
  • 5. 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. 5 ByJoomla.com
  • 6. 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. 6 ByJoomla.com
  • 7. 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 7 ByJoomla.com
  • 8. Byjoomla.com [GETTING STARTED WITH IMAGINE SLIDER 2] Figure 6: Module manager window b) Free verson Parameters Figure 7: Parameters window 8 ByJoomla.com
  • 9. 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 Figure 9: Gallery boder width  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. Figure 10: Filmstrip size=4  Navigation button margin: distance between navigation buttons in pixel  Caption thickness: space for caption Figure 11: Caption thickness 9 ByJoomla.com
  • 10. 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
  • 11. 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 controller button when the mouse over panel Figure 14: Pause button  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
  • 12. 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
  • 13. 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. Figure 16: Gallery boder width  Duration time: Length of time that the trasformation between pictures happens in millisecond.  Filmstrip size: number of visible Figure 17: Filmstrip size=4 navigation button.  Navigation button margin: distance between navigation buttons in pixel  Caption thickness: space for caption 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
  • 14. 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 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 Figure 21: Defaut Parameters filmstrip will disapperar when mouse out of panel and appear when mouse over panel. 14 ByJoomla.com
  • 15. 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
  • 16. 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 BJ ImageSlider FREE parameters 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 Various options Swing only method Table 1 BJ ImageSlider PRO/DEV vs. BJ ImageSlider FREE 16 ByJoomla.com