Expressing IT

With a variety of Carousels out there , many for Mootools as well, I still decided to write my own Carousel Class, for some good reasons
1. Wanted a paging feature ( to be able to jump a particular slide/step in the carousel).
2. Wanted freedom with placement of the LEFT and RIGHT buttons/links , where ever I please.
3. More control over the Slide Steps.

I did manage to create a new Carousel , with the above features …as below … Feel free to suggest any modifications you would require!!!

My Example looks like this…[View Demo]

View Demo | Download Mootools Carousel With Paging Version 1.0 (Downloaded 1181 times)

1. Carousel Paging

You can easily add the paging to your carousel, simply by setting the paging flag, which is last parater passed while creating the instance of the MooCarousel to true( want paging) or false( donot wanting paging).

var carousel1 = new MooCarousel(‘carousel1_wrapper’,'carousel1_items_container’, ‘carousel1_moveleft’, ‘carousel1_moveright’, c_ns,c_sss, true); //ns= number of slides , sss = slide step size

And ofcourse you can change the look-n-feel of these paging achors as you please by modifying their CSS.

.carousel_paging {text-align:right; margin:5px 10px 0 0;}
.carousel_paging .current, .carousel_paging .page{ outline:none; width:15px; height:15px; line-height:15px; text-align:center; display:block; float:left; background:#D8D8EB; margin:0 1px 0 0; text-decoration:none;}

.carousel_paging a:hover, .carousel_paging .current{background:#4D4D9B; color:#ffffff;}

Well! there is a small issue though, The paging anchors if set, then it will get generated always after the Carousel component. I wanted to make it dynamic as well, but then just to keep the Script for blowing out of proportions, I decided to skip it.
But you know a little Javascript , you could easily modify the paging generation code in the MooCarousel class to please your needs.

2. Customising the Left & Right Icons

You can change the PLACEMENT, IMAGES or any displat property of the Left and Right Buttons simply by playing around with the CSS. to be able to change the placements of the Left and Right buttoms was the actual reason for me to right my our Carousel Class.
Since this MooCarousel Class, accepts the id’s of these buttons, you can actually place these buttons anywhere on the page, if you please… it does not have to be in the element hierarchy, as in my example.

var carousel1 = new MooCarousel(‘carousel1_wrapper’, ‘carousel1_items_container’,‘carousel1_moveleft’, ‘carousel1_moveright’,c_ns,c_sss,true);

CSS
.carousel_container_l, .carousel_container_r{margin:50px 0 0 0 ; position: relative;width: 23px;height:20px; float:left; cursor:pointer; }

.carousel_container_r{background-position: 0 -38px; }

.carousel_container_l{background-position: 0 -58px; }

3. Customising Slide Steps

WHAT DO I MEAN MY CUSTOMISING SLIDE STEPS?
Most Carousels slide the full with of the visible window. So say you had four items (like in my sample above), it will slide all the four items. With this Carousel Component, You pass the number of slides and the step size of your choice.

var carousel1 = new MooCarousel(‘carousel1_wrapper’, ‘carousel1_items_container’, ‘carousel1_moveleft’, ‘carousel1_moveright’, c_ns,c_sss, true);
c_ns= number of slides , c_sss = slide step size

Also, in my example1 I have calcuted the slide step size, based on logic where , I know number of items , width on each item and the margins that have given after each item in my CSS.

/*For Carousal 1 */

var c1_w = 92; // Carousal Item Width

var c1_n = 10; // Total Number of Comparision Carousal Items

var c1_pp = 4 // Number of Comparision Carousal Items perpage

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp ; //sss = slide step size

var c1_ns = parseInt(((c1_w * c1_n)/c1_sss) + .5); //ns= number of slides

c1_sss += c1_marginFactor ; //sss = slide step size , 51 for margins

Requirements: Mootools 1.2

View Demo | Download Mootools Carousel With Paging Version 1.0 (Downloaded 1181 times)

MooRating is a simple ( cross browser , of course as it uses the power of the MooTools library) , lightweight and excellent Mootools based rating solution. It is not termed as “Star Rating”, simply because, the rating image could be as you choose ( I have provided Stars, Bars and Hearts with the download, but you can create your own variety and just drop it in).

How does it looks like :

	Mootools Rating with different images View Demo
	Mootools Rating with Percentage valuesView Demo
	Mootools Rating with Fractional valuesView Demo

Download Mootols Star Rating Script (Downloaded 448 times)

Rating data: Whole Number, Decimal or Percentage
Currently the script is designed to show the rating data as whole values (1,2,3,4,5), in decimals (1.24, 3.45 etc) or in percentages( 12%, 55% etc) . The choice to show data in any of the mentioned formats can be set simply by changing some flag values within the javascript( moorating.js)
Basically there are two e two flags to play with, for displaying values in the format of your choice…

var inpercent = false; // Set this flag to true , if you require percentage values to be displayed
var isFractional = false // Set this to true, if you want fractional values like 1.24, 1.25, 4.56 rather than 1,2 …5

And I dont think there is any explanation required for this. Moreover. The script is very simple. If you know a little javascripting, you could modify the script to get any sort of value displayed. For eg if you wanted three decimal places to be displayed … just tweak the script as below …

if(isFractional){if(x<=5 || x >=0) moostartval[i].innerHTML= formatNumber(x,3);} // 2 is changed to 3
else{moostartval[i].innerHTML= Math.round(x);

Updating Rating Value:
I havent bothered writing any AJAX scripts for updating the Ratings value, because I know from my experience that NOT ALWAYS do it intend to update the RATING as soon as the user rates something. You are free to do whatever you want with the rated value , Update it using AJAX or Submit it or Set a hidden form field value , to be submitted with the entire form etc.

function updateRating(id, rating) {
//alert(id + ” , ” +rating );
// DO WHATEVER WITH THE RATING
}

There is function in the javascript called “updateRating”. This function has been passed the the ID of the Rating Div, to identify as to which ratings ( if there are more that one ratings on the page) was updated and the value of the rating [updateRating(id, rating)]. You could choose to whatever you want with these values , as i mentioned earlier.

Rating Image: Stars, Hearts , Bars or anything you please
Changing the rating to any of the above types( stars, hearts etc) is very simple. Just create an image similar to the one provided and drop it in. Remember , if you change the name of the image, do make necessary changes in the CSS file , see below.

.moostar { margin:0px;padding:0px; overflow:hidden; width: 84px; height: 20px; float: left; background: url(’stars.gif’) repeat-x; }
.moostar span { float: left; margin:0px;padding:0px; display: block; width: 84px; height: 20px; text-decoration: none; text-indent: -9000px; z-index: 20; }
.moostar .curr { background: url(’stars.gif’) left 25px;}

Most ratings widgets use star and half-star images with mouse over events on each star. Moo Ratings uses a simple sprite image as a background image to achieve the required visual effects with a very low overhead.

Requirements: Mootools 1.2
Download Mootols Star Rating Script (Downloaded 448 times)

I had been looking for a double pinned slider (slider with two knobs , minimum and maximum) using mootools. Though , I did find a few  well done double pinned slider in the mootools forum, The only problem was that all these sliders  dint have the selected range marker.  Finally! I decided to  create my own. Well! I did use the original code  and modify it to have a slider background that indicated the range selected visually, as in my example below. The BLUE areas indicates the range of value chosen.

View Version 2.2 Demo | Download Mootools Double Pinned Slider Version 2.2 (Downloaded 3366 times)

You can very easily change the look and feel of the  range indicator ( in blue in the above example), slider knob, the slider track by modifying the slider.css as required.

Do drop me a comment if you find it useful.

Not that there are only a few LIGHTBOX’s that you can find when you google. The issue with most of the lightboxes that I found was that they all seemed to use one or the other heavy weight JAVASCRIPT frameworks like JQUERY, PROTOTYPE, MOOTOOLS and the likes. They are all cool and swanky looking. But If your requirement is “BUT I WANT A SIMPLE AND LIGHTWEIGHT LIGHTBOX SCRIPT FOR MY SITE”, then here it is;

Some nice features of this lightbox

1. Very light
   a. 4kb of Scripts when packed (8 kb unpacked)
   b. 2 kb of CSS
   c. Few lines of HTML for the lightbox container
2. Simple to understand and implement
3. Can have multiple Lightboxes on the same page.
4. The same lightbox container is used to show, different content (which is separately included as hidden divisions in the page), depending on the link/option that is clicked.
5. Automatically centers itself, taking into consideration all factors such as, Window height and width (screen resolution), page scroll amount and the height of the contents of the lightbox
6. Tested in IE 7 & FF

View Demo |
Download Lightbox Source Zip (Downloaded 734 times)

jo.js , jo_pack.js[packed version] :- a simple set of JAVASCRIPT OBJECTS [JO], which contains element, window and document positioning scripts. You can open JO.JS if you wish to get your hands dirty with some Advanced Javascripting, creating abstract functions, extending element properties and such. If you not too much in Javascripting , Leave it alone.

lightbox.js, lightbox_pack.js[packed version]:- Contain light box manager scripts. If you are page designer , also responsible with implementing the lightbox on the page, you need to understand the LightBoxManager . LightBoxManager basically contains just two functions showLightBox and closeLightBox.

lightbox.css :- If you know CSS , you can play around with lightbox.css to customize the look-n-feel lightbox.css

index.html: Sample implementation of the lightbox with two different content

lb_underlay_bkg.png :- This is light/simi transparent image that is used the background for the lightbox underlay [Underlay is the layer below the lighbox, which prevents the user from clicking any other entity on the page, while the lightbox is open]. You can use any image or even a solid color for this purpose, depending upon the page design and the requirement.

icon_lb_close.gif : – The image for close lightbox handle on the top right of the light box. Can use any image as per design

View Demo |
Download Lightbox Source Zip (Downloaded 734 times)

Please let us have your comments and feedback …