OMG! I Made a jQuery Plugin!

Click on the image to go to the demo.

It’s an image rotator/slideshow plugin called OMGBillboard and it’s so awesome I couldn’t bear to call it a boring, sensible name like Billboard*.

OMG! What does it do?

OMGBillboard is not your grandma’s image rotator. It takes your images, cuts them into strips, and flips them shut… all to display the next image like those old, mechanical billboards of yore.

If this doesn’t excite you, check out the demo here. (Note the use of beautiful photos to trick you into thinking this plugin is sexy.)

OMG! That looks cool! How do I use the plugin?

Just call OMGBillboard on any element which contains a set of images like this:

$("#container").OMGBillboard();

That’s it. Although, if you’re a control-freak, you may want to fine-tune the following settings:

• imgWidth (integer), imgHeight (integer) – The dimensions (in pixels) of your OMGBillboard. Default is 600 and 400. Ideally, you should set this to the size of your images. Ideally, again, your images would be of the same size.
  But don’t worry. It will still work even if your image size doesn’t match your settings, the images will just be cut-off. Which shouldn’t bother you since you wanted to slice them in the first place. You murderer.
• numSlices (integer) – The number of slices you want your image to be hacked into. Default is 10.
• sliceClass (string) – The CSS class you want to assign to the slices. I used “slice” by default, but if it interferes with your own CSS, you can call it “OMGslice” or something boring like “cuts”.
• rotateSpeed (integer) – The speed, in milliseconds, of the shutters closing/opening effect. Default is 500 or half a second.
• changeSpeed (integer) – The speed, in milliseconds, of how long an image is displayed before it gets changed to the next image. Default is 5000 or 5 seconds.
• bgColor (string) – The color of the background (what people will see while the blinds are closed). It accepts any CSS-acceptable value for color. Default is black (‘#000’).

For example, the demo uses these settings:

$("#container").OMGBillboard({
    'imgHeight':500,
    'imgWidth':750,
    'numSlices':20,
    'sliceClass':'OMGslice'});

OMG! Can I have two billboards on one page?

Yes. You can apply the same settings to multiple elements:

$("#container, .ads").OMGBillboard({
    'imgHeight':100,
    'imgWidth':200});

Or call it with different settings for each group:

$("#container").OMGBillboard({
    'imgHeight':100,
    'imgWidth':200});

$(".ads").OMGBillboard({
    'imgHeight':300,
    'imgWidth':150,
    'bgColor':'#f00'});

OMG! So what’s the catch?

Like those old billboard ads, it doesn’t allow you to jump ahead to the next image. Yet. And no horizontal flipping. Yet. *sadface*

Plus, it’s kind of experimental and it’s my first jQuery plugin. I know bupkis about offering a free jQuery plugin to people. Like where to host it, how to license and how to handle bug reports and feature requests, etc. So please please test it out for me and give me feedback like the awesome person you are.

You can even comment on how much of a noob I am on github.

OMG! Tell me more!

This plugin is a rift from an old jQuery tutorial at Codrops. Problem is, the tutorial requires you to actually slice the image, and you can only have two images, which is sad. Now, I can whine about that in the comments section (poor Mary Lou) or I can build a jQuery plugin for it. Guess which one I chose.

*OMG! That’s cool and all but your plugin’s name really sucks.

Sorry. Actually, I was going to name it something simple, but jQuery Billboard was already taken. The disappointment crushed me and rendered me unable to name things properly. Like that one time when I got too jealous and planned to name my kids something weird…

Ω