[Original] jQuery imgCut

Written in combination with the two articles
Using jQuery UI to partially intercept Images
Use jQuery UI to partially zoom in Images

Call requirements

<Link type = "text/css" href = "redmond/jquery-ui-1.7.2.custom.css" rel = "stylesheet"/>
<Script type = "text/javascript" src = "jquery. js"> </script>
<Script type = "text/javascript" src = "ui. core. js"> </script>
<Script type = "text/javascript" src = "ui. draggable. js"> </script>
<Script type = "text/javascript" src = "ui. resizable. js"> </script>
<Script type = "text/javascript" src = "ui. imgcut. js"> </script>

Call $ (Selector). imgcut (options );

Option
Top: 0, // the initial position of the box
Left: 0, // the initial position of the box
Width: 100, // box size
Height: 100, // box size
ImageWidth: 400, // Image Width
ImageHeight: 400, // Image Height
MinHeight: 30, // minimum Frame
MinWidth: 30, // minimum value of the box
Zoom: 1, // Scaling Factor
Border: {border: 'solid 2px blue '}, // box CSS
Dragopts :{}, // drag options, please refer to jquery official UI
Resizeopts: {}, // size option. For details, refer to jquery official UI.
Idprox: 'imgcut '// id prefix (used when a page calls this UI multiple times)
Src: "abc.jpg" // Image
Obj: "# obj" // saved position of the captured image (jquery selector)

Html <Div id = 'C'> </div>
<Div id = 'O' style = 'top: 500px '> </div>

Example $ ("# C"). imgCut ({
Src: "1.jpg ",
ImageWidth: 732, // image size
Imageheight: 458, // image size
Zoom: 2, // zoom in twice
OBJ: "# O" // The scaled Selector
});

Demo

Download