Projects tagged ‘jquery’ and ‘scale’

AboutImagetool is a simple plugin for jQuery providing basic panning and zooming capabilities for images. It works by wrapping the selected image in a (the viewport) and manipulates css properties ... [More] based on user input. Try the demo Usage$("img").imagetool(options); Options name type required default description allowZoom boolean no true If true, the image is zoomable. allowPan boolean no true If true, the image can be panned. maxWidth number no 2000 The maximum width of the zoomed image in pixels. viewportWidth number no 320 The width (pixels) of the viewport. viewportHeight number no 180 The height (pixels) of the viewport. callback function no none A function that is called after the image has been panned or zoomed. loading string no none Path to an image that is shown while the main image loads. topX number no none Top left corner of the initial visible area. topY number no none Top left corner of the initial visible area. bottomX number no none Bottom right corner of the initial visible area. bottomY number no none Bottom right corner of the initial visible area. [Less]

This jQuery plugin makes it easy to have images resize horizontally and vertically to fit the available container width. It is useful for flexible or fluid web page layouts or when the you don’t ... [More] have control over the dimensions of the images being loaded. How to useIn your HTMLLink the plugin into your page along with jQuery: In your JavaScriptWhere '#content' is a jQuery selector for the container (or containers) inside which you want images to resize: $(function(){ $('#content').imagefit(); });If the images do not have widths and heights explicitly set it is important to ensure they are loaded before the plugin is applied: $(window).load(function(){ $('#content').imagefit(); });Only images whose native size is wider than their container will be resized. Resizing the browser window will cause the images to scale dynamically. Works beautifully in webkit. Needs some work before it is Internet Explorer friendly. More infoDemo http://www.ollicle.com/eg/jquery/imagefit/ Original http://www.ollicle.com/2007/aug/17/nnwstyle_jquery_template.html Used in http://wordpress.org/extend/plugins/wp-imagefit/ [Less]

scalingscaling is an extremely lightweight (2.4k) jQuery plugin which scales images and dom elements to the dimensions of other images/elements on the page, or to any ratio or size. ... [More] FeaturesSupports a number of scaling types: Scale Up Scale Down Scale up to a Minimum Scale down to a Maximum Smart scaling (auto-detects direction) Raw scaling (scales by an exact ratio) Open Source so you can help to improve it/change it for your own needs Scaling Examples jQuery(function(){ // Scale all images down to 10% jQuery('img').scale({mode: SCALE_DOWN, target: '10%'}); // Scale element to no larger than 800x600 jQuery('#element').scale({mode: SCALE_MAX, target: [800,600]}); // Scale all matching elements to the current ratio of the provided element jQuery('.someclass').scale({mode: SCALE_SMART, target: $('#someelement')}); }); [Less]

plugin helps to rotate, scale, move images using canvas. To keep code consistent and easier to support/understand for IE used excanvas.js (http://code.google.com/p/explorercanvas/)