Bj imagine slider tutorial
Upcoming SlideShare
Loading in...5
×
 

Bj imagine slider tutorial

on

  • 1,581 views

Add beautiful image slider to your Joomla!

Add beautiful image slider to your Joomla!

Statistics

Views

Total Views
1,581
Views on SlideShare
1,581
Embed Views
0

Actions

Likes
1
Downloads
12
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Bj imagine slider tutorial Bj imagine slider tutorial Document Transcript

  • BYJOOMLA.COMGETTING STARTED WITH BJ IMAGE SLIDER 2Created: 11/11/2011
  • Byjoomla.com [GETTING STARTED WITH IMAGINE SLIDER 2]CONTENTSI, HOW TO DOWNLOAD .............................................................................................. 31, Free verson ............................................................................................................ 32, Pro/Dev verson ....................................................................................................... 3II, HOW TO INSTALL .................................................................................................. 4III. CONFIGURATION .................................................................................................. 51, BJ ImageSlider 2 component .................................................................................. 5a) Configuration .......................................................................................................... 5b) Manage categories .................................................................................................. 6C) Manage imagines .................................................................................................... 62, BJ ImageSlider 2 Free module ................................................................................. 7a) How to get there..................................................................................................... 7b) Free verson Parameters ........................................................................................... 83, BJ ImageSlider 2 PRO module ................................................................................ 12a) How to get there................................................................................................... 12b) PRO verson Parameters ......................................................................................... 124, BJ ImageSlider PRO/DEV vs. BJ ImageSlider FREE .................................................. 16 2 ByJoomla.com
  • Byjoomla.com [GETTING STARTED WITH IMAGINE SLIDER 2]I, HOW TO DOWNLOAD1, Free versonAll free templates and extentions can be downloaded fromhttp://byjoomla.com/download  Byjoomla extentions  Joomla 1.5 extentions  BJ Image slider 2 module Figure 1: Download BJ Imagine Slider2, 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.6II, 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. CONFIGURATIONBJ ImageSlider, BJ ImageSlider 2 and BJ PhotoGallery modules work with BJ ImageSliderComponent. You need the component to manage all the images. Thus, it is needed to getfamiliar 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 components 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 Applyb) Manage categories  Components  BJ ImageSlider  Manage Categories  Creat new category New  Name  Description (if needed) Figure 4: Creating new category windowC) 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 images 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 window2, 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 windowb) 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 thickness9 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 slideshow10 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 off11 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 ParametersBJ ImageSlider 2 PRO/DEV has 2 styles: Default (as can be seen on BJ Venus demopage) and Venus 2 (as can be seen on BJ Venus 2 demo page). Thus, the parametersare divided in 3 main groups: common parameters affect both styles; default parametersaffect 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 not13 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 off15 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 FREETable below lists the differences in module parameters between PRO/DEV version andFREE version BJ ImageSlider PRO module BJ ImageSlider FREE parameters module parametersSlider style Venus 1 style and Venus 2 style Venus 1 styleShow panel gradient 2 options: Yes or No No panel gradientFilmstrip position 2 options: Top or Bottom Bottom onlyCaption position 2 option: Left and Right Right onlyImage transition effect 9 options Blur onlyText transition effect 3 options Blur onlyPanel on click 4 options Do nothing onlyTransition Easing Various options Swing onlymethodTable 1 BJ ImageSlider PRO/DEV vs. BJ ImageSlider FREE 16 ByJoomla.com