kvkContBubbles jQuery plugin

Another cool jQuery plugin i made to spice up the content :) It shows cool info bubbles around the desired area with many settings providing flexible customization options. Check it out ...

Documentation


The general idea is very simple. It surrounds target elem with info bubble(s) - their count is optional. Their position is also optional. I'm going to show a small example here to demonstrate the simple initialization (to see actual demo check the view demo link on the bottom of this article).

var items = [];
 
items[0] = {
    text: 'Some text 4 example',
    side: 'top',
    pos: '25%'
};
 
var opts = {
    name: 'kvak',
    items: items
};
 
$('div.cont').kvkContBubbles(opts);
 
//
 
$('#ctrl').click(function () {
   $('div.cont').kvkCbShow(); 
});


This initialization doesn't have to look like this, you can pass your settings directly as a parameter, but i've chosen this one since i used it in the demo too. So - the options consist of two parts, the first one represents the kvkContBubbles plugin options and second defines items (bubbles) to show around content ... In the code given above i've added only one item. Also there's just the name parameter set.

As i described all my plugins i'm going to explain all possible parameters for this plugin:

name - this should be an unique name for one element used for kvkContBubbles;
bubbleWidth - integer value representing the width of a info bubble (default 300);
imgFolder - kvkContBubbles also uses a few images and this option should define correct path to them (default "img");
showInterval - interval between launching each bubble show animation in ms (default 250);
items - array of items shown around content, each of these need to be defined as objects (see the code above). They have their own options, their description follows:

side - you can define on which content side would you like to show this bubble, possilbe options are - "top","right","bottom","left";
pos - relative position of a bubble from the start of given side (if it's horizontal it takes X axis, otherwise axis Y is used). You can pass an integer value or a string with percentage value - "50%";
text - text of this info bubble;
link - if you want to show your content as a link set this parameter to your desired location;
plusTop - if for some reason you want to modify item position you can use this option to modify the Y axis value (can be both positive or negative integer);
plusLeft - the same as plusTop but for the X axis values;

So, that's about everything you can customize with my plugin, i think it's pretty flexible :) I'm not currently considering making the green color customizable, but if you want you can contact me and i can send you my PSD file where you can easily do your changes and apply them for your copy of kvkContBubbles :)

Ok, enough talking, check out my demo to see my plugin in action :)

Package contents


Few useful infos about the package you'll download. All these things are required for kvkContBubbles to work properly. There are few images (*), CSS file and both packed and full version of JS code (use whichever you want, if you don't want any changes i recommend the packed version).

* - one last thing i didn't mention before. If you use some custom path for your images changing the imgPath param (described above) is not enough. You'll also have to edit the given CSS file and update img paths there (7 lines).

Final statement


Feel free to do whatever you want with this plugin and its contents. You can edit the code, implement it into your projects ... Enjoy :)
Zobraziť demo Stiahnuť