Chalontika: a JavaScript widget to create banners with scrolling logos or images

Chalontika

... chalti ka naam gari!

Chalontika is an easy to use and free JavaScript widget you can add to your website with little or no knowledge of programming. I have only assumed that you already know basic HTML and CSS to create web pages

It allows you to add a series of logos or any images to a banner (a HTML div element) which scrolls from the right to left at a certain predetermined distance (configurable) just like a scrolling marquee.

To install and run Chalontika you will need to:

- Download the source code at your server's public directory (web root)

- Add a div element on the page where you want to the widget to appear with required images.

- Connect the JS APIs and class of the widget as an external script file to your page

- Connect the CSS stylesheet as an external stylesheet file to your page

- Configure some options (optional)

Before you start, download the source file:
DOWNLOAD Chalontika...

Other requirements: To run, Chalontika needs PrototypeJS 1.7 and Scriptaculous 1.9 libraries to work. You can either connect to these to AJAX APIs hosted at Google or download the latest sources of both libraries and add them manually to your server.

Chalontika is released under the Lesser GNU Public License v.3. It is free to use with or without modifications as long as you maintain the original credits and copyright information.

Detailed instructions:

1. The following files need to be put in your server's web directory:

i. chalontika.js

ii. chalontika.css.

iii. loading.gif

iv. lgpl.txt

Please maintain the directory order as you find them it in the downloaded archive. If you want to change the directories of different files, please make sure to make appropriate changes as required in the src attributes for script and stylesheet tags.

2. The first step is to add the stylesheet:
<link rel="stylesheet" href="chalontika/css/chalontika.css" type="text/css" media="screen">

Change "chalontika/css/chalontika.css" to "your_server_path/to/chalontika.css" if needed where "your_server_path/to/" refers to the replacement relative path in your public web directory or folder structure.

3. Next add the API libraries from Google APIs:

<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>

<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js?load=effects,builder"></script>

Alternately, you can download the original libraries from the respective web sites and manually add them to your server.

4. Add the following JavaScript code in the head section of your code or in the body according to your preference:

<script language="JavaScript">

<!--

/* ------------- CHALONTIKA config ------------ */

chalontika_preloader = "images/loading.gif";//don't change unless you're sure you want to change the preloader.

//distance between each image link (in pixels)...

chalontika_distance = 25;

//total time taken for all image links to scroll through... (use to adjust speed) in seconds

chalontika_time = 38.0;

//modes

//mode 0: "cargo", mode 1:"continuous", ...

chalontika_mode = 1;

//notice

chalontika_notice = true;

//-->

</script>

These are the options for Chalontika. You can change them if you like. Note that _distance and _time _must_ be integers above 1, although it makes more sense to set the time to a higher value around 25 to 45 or the animation will be too fast while the distance can be 5 or above for best results.

There are two modes, 0 and 1 ("cargo" and "continuous" modes). The first will work like a conveyor belt with baggage. After all the items have scrolled past, it will restart from the beginning. The "continuous mode" will release each image after the other continuously, without waiting for all to have scrolled past. In the continuous mode, too few images will automatically increase the distance between each image so that the next image in line appears again only after it has completed one full right to left traversal.

5. Add the chalontika.js library with the following markup. The same rules for directory path applies as before:

<script language="JavaScript" src="chalontika/js/chalontika.js"></script>

6. Add the widget element (a div element). Do not change the id of this element unless you are sure of what you are doing.

<div id="chalontika">

</div>

7. The images must be placed in div elements nested inside the div added in previous step with the following markup:

<div id="ch01" title="My art gallery online">

<a href="http://www.cyberartgallery.org"><img src="images/cyberart_logo.png" width="100" height="91"></a>

</div>

<div id="ch02" title="ILS website">

<a href="http://www.inquirylearning.com"><img src="images/ils_logo.jpg" width="100" height="100"></a>

</div>

Note: The id of each div _must be_ a sequence beginning with 01 with a prefix "ch". You should not change this pattern.

And we are done! If you need support, please write to me at shubho@inquirylearning.com

Shubhojoy Mitra
Inquiry Learning Solutions