forked from trepmag/jrac
-
Notifications
You must be signed in to change notification settings - Fork 0
jQuery Resize And Crop (jrac) is a jQuery plugin that build a viewport around a given image permitting to visually resize an image and place a crop
License
ramphy/jrac
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
* SUMMARY * jQuery Resize And Crop (jrac) is a jQuery plugin that build a viewport around a given image permitting to visually resize an image and place a crop. Then it is possible to use the coordinates data to be used for any purpose. * DEMO * http://www.trepmag.ch/z/jrac/example/ * FEATURES * - Resize and move image - Resize and move crop - Resize viewport - Aims to be integrated with any server side image processor * INSTRUCTIONS * The 'jrac' method implement the whole business which can take an optional setting object argument: $('img').jrac(); The default setting object is the following: var settings = { 'crop_width': 200, 'crop_height': 100, // The two following properties define the crop position (relative to the // image). 'crop_x': 0, 'crop_y': 0, 'crop_resize': true, 'image_width': null, 'image_height': null, 'zoom_min': 100, 'zoom_max': 3000, 'viewport_image_surrounding': false, // Set the viewport to surround the image on load 'viewport_width': null, 'viewport_height': null, 'viewport_resize': true, // The two following properties allow to position the content (negative // value allowed). It can be use to focus the viewport on the cropped // part of the image. 'viewport_content_x': 0, 'viewport_content_y': 0, // Submit here a callback function (context is the viewport), see below. 'viewport_onload': null }; The 'viewport_onload' property can take an function callback which interface is: function() // which the context is $viewport The $viewport context is a div jQuery wrapped element that surrounds the target image. This object has the following subsequent properties: - $viewport.$container: a container holding the viewport and the zoom widget. - $viewport.$image: the target image, jQuery-wrapped. - $viewport.$crop: the crop object. - $viewport.observator: an object which processes all events of the viewport. The main method of the $viewport.observator is 'register' which registers an element for an event: $viewport.observator.register(String event_name, jQuery wrapped elements[, callback onevent_callback]) To unregister an event, use: $viewport.observator.unregister(string event_name) The observator events are the following which you can then trigger some actions on with the jQuery bind method or by giving a function to the onevent_callback argument: jrac_crop_x jrac_crop_y jrac_crop_width jrac_crop_height jrac_image_width jrac_image_height Example: $('img').jrac({'viewport_onload', function() { var $viewport = this; $viewport.register('jrac_crop_x', $('input#cropx'), function(event_name, element, value) { element.val(value); } } There is also an event 'jrac_events' which is triggered on every events of the previous decribed viewport observator. Use the jQuery bind method to act on it. Destroy jrac (not much tested) is done by running jrac with the 'destroy' argument: $('img').jrac('destroy'); * REQUIREMENTS * jrac use jQuery and jQuery-UI. - Developped with jQuery 1.6.1 and jQuery-UI 1.8.13 - Tested with jQuery 1.4.4 and jQuery-UI 1.8.7 * ACKNOWLEDGEMENT * - The jrac/images/loading.gif image file come from http://www.ajaxload.info/. - The picture used in the example is provided (perhaps) by courtesy of Loulou from Sos-Chats Geneve http://www.sos-chats.ch/. - Syntax Highlighting in JavaScript (SHJS) used for the display of the code in the example, http://shjs.sourceforge.net/. * DOWNLOAD * https://github.com/trepmag/jrac
About
jQuery Resize And Crop (jrac) is a jQuery plugin that build a viewport around a given image permitting to visually resize an image and place a crop
Resources
License
Stars
Watchers
Forks
Releases
No releases published
Packages 0
No packages published