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});
youthsm 