Saturday, February 11, 2012

jQuery Google Plusify

I recently created new plugin to imitate Google Plus photo album. I will try to explain briefly how to use this plugin. For demo click here and you can also download full and minified version over here.
To start with, include minified (for production) or full version (for development) in your page.


<script type="text/javascript" src="<javascript folder path>/jquery.imagePlusify-1.0.min.js" ></script>


Place your div with width and height where you want place your albums.


<div id='plusifyPics' ></div>


Remember to set style for the div. Set your width and height to cover the area where you want to display your photo album. 


On document ready, initialize your imagePlusify and pass the options.


$(function () {
    $.AjaxGet({
        url: imgUrl,
        callback: function (data) {
            $('#plusifyPics').imagePlusify({
                backgroundColor: 'white',
                source: data,
                displayLabel: true,
                onClick: function (id, name, src) {
                    alert('you have clicked on album with id: [' + id + '] with name "' + name + '" and ' + 'it has total of ' + src.length +' images !!!');
                }
            });
        }
    });
});

Here is the list of all the options we can set in this plugin.

Property Values Additional Info
border
valid css border style
'1px solid gray' is default value
borderOnMouseOver
valid css border style
'1px solid black' is default value
padding
valid css padding size
'5px' is default value
backgroundColor
valid css color
 '#fff' is default value
displayLabel
true / false
by default its false
labelColor
valid css color for the text color
'#000' is default value
randomize
true / false
by default its true
margin
margin between the image albums
'30px' is the default value
width
album width
'200px' is the default width
height
album height
'200px' is the default height
slideBy
int distance by which images should slide
30 is the default value
source
images, name and id as source to display image albums
source can be sent in 3 ways
1. Array of string where string is url of images
2. Object with id, name and array of string as members
3 Array of object where object has id, name and array of string as members
onClick
Callback event raised on click of album
album id, album name and all images url as array are returned in the callback function.