Scroom : A jQuery plugin

I was working on project and client ask for something but after a lot of Googling, I didn’t find anything that matches my expectations. But there was a lot of searches related to that.
I thought someone has to build a plugin which will fulfill this requirement, then I thought that someone could be me.

And here it is the Scroom jQuery plugin.

# The Scroom plugin will basically have features like
1. Scroll the big images.
2. zoom in and out.
4. Selection of area.
5. Open modal after selection.
6. Savable form data and co-ordinates.
7. Removable selection with form data and co-ordinates.
8. Visualization of selection details.

Scroom keys
1. boxes : For populating selected areas.
2. saveDataUrl : URL which will handle the form data.
3. saveCoordinateUrl : URL which will handle the coordinates.
4. deleteUrl : URL which will use for deletion of saved selected area.
5. hoverData : Fields name display on hover with values.

# For populating saved selected area
var savedBoxes = [
{“id”:”square-306-238″,”left”:”306″,”top”:”238″,”width”:”40″,”height”:”27″},
{“id”:”square-660-312″,”left”:”660″,”top”:”312″,”width”:”80″,”height”:”51″},
{“id”:”square-380-265″,”left”:”380″,”top”:”265″,”width”:”180″,”height”:”124″}
];

$(‘#scroom-block’).scrollZoom({boxes: savedBoxes});

# For displaying details of selected area on hover
var savedBoxes = [
{“id”:”square-306-238″,”left”:”306″,”top”:”238″,”width”:”40″,”height”:”27″, “name”:”test1″, “description”:”testdes1″},
{“id”:”square-660-312″,”left”:”660″,”top”:”312″,”width”:”80″,”height”:”51″, “name”:”test2″, “description”:”testdes2″},
{“id”:”square-380-265″,”left”:”380″,”top”:”265″,”width”:”180″,”height”:”124″, “name”:”test3″, “description”:”testdes3″}
];

var displayFields = [‘name’, ‘description’];

$(‘#scroom-block’).scrollZoom({boxes: savedBoxes, hoverData: displayFields});

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s