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.
Place your div with width and height where you want place your albums.
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.
Here is the list of all the options we can set in this plugin.
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.
|