Ninja Ajax Banner module Installation, configuration and usage This tutorial will show you how to install, configure and use Ninja Ajax Banner module
Author: Igor Mihaljko Date: 24. May 2008
Ninja Ajax Banner module
Table of Contents Preface..................................................................................................................................................... 3 Introduction............................................................................................................................................. 3 Ninja Ajax Banner module installation .................................................................................................... 4 Ninja Ajax Banner module configuration ................................................................................................ 5 General module parameters: .............................................................................................................. 5 Banner representation module parameters ...................................................................................... 6 Banner images parameters ................................................................................................................. 7 Ninja Ajax Banner module frontend........................................................................................................ 8 Conclusion ............................................................................................................................................... 9
Author: E-mail: Date:
Igor Mihaljko support@ninjoomla.com 24. May 2008
2
Ninja Ajax Banner module
Preface Welcome, aspiring Ninja. This tutorial will explain how to install, configure and use Ninja Ajax Banner module. Tutorial will cover all the steps that are needed to go through to module installation, configuration and customization.
Introduction Ninja Ajax Banner allows you to quickly and easily set up banners on your website. It allows you to place up to 5 banners in one module position, and uses mootools to display them when your users hover over the banner. Let's start the tutorial by installing the Ninja Ajax Banner module. Log into the Joomla Administrator Panel and follow the steps to install module.
Author: E-mail: Date:
Igor Mihaljko support@ninjoomla.com 24. May 2008
3
Ninja Ajax Banner module
Ninja Ajax Banner module installation Click “Installers” -> “Modules”:
Picture 1: Install new module
Click the “Browse” button and choose the Ninja Ajax Banner module archive on disk to install.
Picture 2: Click the “Upload File & Install” button
Click on the “Upload File & Install” button to install module. After few moments (this depends on your network and internet speed) the screen with message that installation was successful should appear.
Picture 3: Click on the "Continue" link When the module is successfully installed you should do some initial so the module will be customized according to your needs and wishes. Let’s do that now.
Author: E-mail: Date:
Igor Mihaljko support@ninjoomla.com 24. May 2008
4
Ninja Ajax Banner module
Ninja Ajax Banner module configuration Click “Modules” -> “Site modules”:
Picture 4: Start module configuration screen
Choose the Ninja Ajax Banner module:
Picture 5: Choose Ninja Ajax Banner module
Set the „Published“ state to „Yes“ and make some customization to the module parameters. Following is the list of the options that can be configured with this module.
General module parameters:
Picture 6: General Ninja Ajax Banner module backend options
Author: E-mail: Date:
Igor Mihaljko support@ninjoomla.com 24. May 2008
5
Ninja Ajax Banner module
Include mootools script – If you already have a mootools script (with the slide functions included) or this is the second or subsequent module hider, set this to no. Alternately you can set this to Auto and the module will try to work out for itself if mootools is installed. Auto may not work correctly if you have different versions of mootools installed. Include CSS – Would you like to include the CSS file for this module. XHTML/CSS validation – due to limitations in Mambo and Joomla we must use certain php functions to have the module output valid XHTML and CSS. These functions are sensitive and will crash your site if it contains any php errors, producing a white content-less screen. Please switch validation off if this happens to you Include Javascript – Would you like to include the js file for this module.
Banner representation module parameters
Picture 7: Banner size and efects parameters
Next group of parameters are related to module size and transition effects between each of banner images on frontend of the web site. Full Width (px) – Full width of the module of frontpage Full height (px) – Full height of the module of frontpage Background color (#ffffff) – Background color of the module. By default, this color is white (#ffffff) Width Over (px) – width in pixels when user mouse over selected banner. For the best results, make sure that all of the banner pictures are the same width Small width (px) – width in pixels for the unselected banners in module. For the best results put here round value which you get when you apply simple formula: (Full Width (px) - Width Over (px)) / number of unselected banners Normal width (px) – width of the banners when there is no mouse over the module. For the best results put here round value which you get when you divide Full Width (px) and number of banners you choose to show in this module.
Author: E-mail: Date:
Igor Mihaljko support@ninjoomla.com 24. May 2008
6
Ninja Ajax Banner module
Transition Effect (ms) – Transition time in milliseconds you wish to apply to the images.. Opacity Effect (0-1) –Opacity of the non selected images.
Banner images parameters
Picture 8: Banner size and efects parameters
Enabled – Enable / Disable banner image Picture URL – Choose the image to be used Picture position – Picture background position. Link URL – URL to redirect to when user clicks banner image Link target – You can open URL of the banner image in the same window or in new window
When you are satisfied with the chosen configuration option, click on the „Save“ button.
Picture 9: Save Ninja Ajax Banner module configuration
Author: E-mail: Date:
Igor Mihaljko support@ninjoomla.com 24. May 2008
7
Ninja Ajax Banner module
Ninja Ajax Banner module frontend When you are done with the Ninja Ajax Banner module configuration this is how it will look on frontend of your site:
Picture 10: Ninja Ajax Banner module on frontend
Picture 11: The first banner mouse over
Picture 12: The second banner mouse over
Author: E-mail: Date:
Igor Mihaljko support@ninjoomla.com 24. May 2008
8
Ninja Ajax Banner module
Picture 13: The third banner mouse over
Conclusion This concludes my tutorial about installation, configuration and usage of the Ninja Ajax Banner module. I hope that this tutorial will be useful to some of you. If you have any questions regarding this module, please, leave message on Ninjoomla support forum which supplies important information and helps you with installing or customizing your Ninjoomla extensions in order to make it as easy as possible for you.
Author is working for Nijoomla extension club as freelancer in charge of writing extension documentation. You can reach him through contact form on his web site http://www.mihhavision.com or by writing him to email mihha@inet.hr.
Author: E-mail: Date:
Igor Mihaljko support@ninjoomla.com 24. May 2008
9