howtoinstall,configureanduseNinjaAjaxBannermoduleInstallation,configurationandusageDate:24.May2008Au

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

Author: Igor Mihaljko E-mail: [email protected] Date: 24. May 2008

2

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



3

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.



4

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.



5

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



6

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.



7

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



8

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



9

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.mihha-vision.com or by writing him to email [email protected].

http://www.mihha-vision.com/

http://www.mihha-vision.com/

mailto:[email protected]

howtoinstall,configureanduseNinjaAjaxBannermoduleInstallation,configurationandusageDate:24.May2008Au

Documents

Transcript of howtoinstall,configureanduseNinjaAjaxBannermoduleInstallation,configurationandusageDate:24.May2008Au