<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Cool Javascripts &#187; image effects</title>
	<atom:link href="http://cool-javascripts.com/tag/image-effects/feed" rel="self" type="application/rss+xml" />
	<link>http://cool-javascripts.com</link>
	<description>The best javascripts for your site</description>
	<lastBuildDate>Tue, 22 Mar 2011 14:35:13 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1</generator>
<xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" />
		<item>
		<title>10 jQuery plugins for manipulating images</title>
		<link>http://cool-javascripts.com/effects/10-jquery-plugins-for-manipulating-images.html</link>
		<comments>http://cool-javascripts.com/effects/10-jquery-plugins-for-manipulating-images.html#comments</comments>
		<pubDate>Thu, 05 Mar 2009 14:42:02 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Effects]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[image effects]]></category>
		<category><![CDATA[image manipulation]]></category>

		<guid isPermaLink="false">http://cool-javascripts.com/?p=207</guid>
		<description><![CDATA[This time, I want to list some jQuery plugins that work with images or manipulate images some how. I didn&#8217;t consider scripts for slide shows or image viewer. You may be also interested in the following posts, 10 jQuery plugins for showing image gallery Which is the best lightbox clone for jQuery ? Image Reflection [...]


Related posts:<ol><li><a href='http://cool-javascripts.com/jquery/3-jquery-plugins-to-show-context-menu.html' rel='bookmark' title='Permanent Link: 3 jQuery plugins to show context menu'>3 jQuery plugins to show context menu</a> <small>A context menu (also contextual menu, shortcut menu and, popup...</small></li><li><a href='http://cool-javascripts.com/galleries/10-jquery-plugins-for-showing-image-gallery.html' rel='bookmark' title='Permanent Link: 10 jQuery plugins for showing image gallery'>10 jQuery plugins for showing image gallery</a> <small>An image gallery is part of the modern web 2.0...</small></li><li><a href='http://cool-javascripts.com/jquery/jquery-plugins-to-show-data-in-table-format-or-chart-format.html' rel='bookmark' title='Permanent Link: jQuery plugins to show data in table format or chart format'>jQuery plugins to show data in table format or chart format</a> <small> Need to show data in a tabular format or...</small></li></ol>

Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.]]></description>
			<content:encoded><![CDATA[<p>This time, I want to list some jQuery plugins that work with images or manipulate images some how. I didn&#8217;t consider scripts for slide shows or image viewer. </p>
<p><img src="http://cool-javascripts.com/wp-content/uploads/2009/03/image-manipulation.jpg" /></p>
<p>You may be also interested in the following posts,</p>
<ul>
<li><a href="http://cool-javascripts.com/galleries/10-jquery-plugins-for-showing-image-gallery.html">10 jQuery plugins for showing image gallery</a></li>
<li><a href="http://cool-javascripts.com/galleries/which-is-the-best-lightbox-clone-for-jquery.html">Which is the best lightbox clone for jQuery ?</a></li>
</ul>
<p><span id="more-207"></span></p>
<h3>Image Reflection</h3>
<p>Image reflection is a common technique that designers use for a visual appeal. This jQuery plugin can create the reflection automatically for images. It is very light &#038; faster because it uses the Canvas object in supported browsers and DirectX filters in Internet Explorer.</p>
<p><img src="http://cool-javascripts.com/wp-content/uploads/2009/03/digitaliabe-reflectionjs-for-jquery.jpg" /></p>
<p><b><br />
Features</b></p>
<ul>
<li>Light weight (Less than 2KB)</li>
<li>Easy to use</li>
<li>Customizable</li>
</ul>
<table border="0">
<tbody>
<tr>
<th>Dependencies</th>
<td>jQuery 1.2.3 +</td>
</tr>
<tr>
<th>Size</th>
<td class="alt">Less than 2KB </td>
</tr>
<tr>
<th>Restrictions</th>
<td>None</td>
</tr>
<tr>
<th>Compatible Browsers</th>
<td>IE 6+,Firefox 1.5+, Opera 9+, Safari 2+, Camino and Google Chrome</td>
</tr>
<tr>
<th>Demo &#038; Downlod</th>
<td><a class="opensame" rel="shadowbox" href="http://www.digitalia.be/software/reflectionjs-for-jquery#demo">Open</a> | <a class="opennew" href="http://www.digitalia.be/software/reflectionjs-for-jquery#demo" target="_blank">Open in new window</a></td>
</tr>
</tbody>
</table>
<p class="note">For a stand alone reflection script, please visit <a href="http://cow.neondragon.net/stuff/reflection/" target="_blank">http://cow.neondragon.net/stuff/reflection/</a> </p>
<h3>jqZoom &#8211; Image magnifier for jQuery</h3>
<p>It is a good script to zoom into some part of an image. The idea is to use two images. A smaller image which shows initially and a high resolution copy of that image which will be shown (part of the image corresponding to the mouse position).</p>
<p><img src="http://cool-javascripts.com/wp-content/uploads/2009/03/exzoom.jpg" /></p>
<table border="0">
<tbody>
<tr>
<th>Dependencies</th>
<td>jQuery 1.2.6 +</td>
</tr>
<tr>
<th>Size</th>
<td class="alt">Less than 9KB </td>
</tr>
<tr>
<th>Restrictions</th>
<td>None (GPL)</td>
</tr>
<tr>
<th>Compatible Browsers</th>
<td>Firefox 2+, Opera 9+, IE6+, Safari 2+, Google Chrome</td>
</tr>
<tr>
<th>Demo</th>
<td><a class="opensame" rel="shadowbox" href="http://www.mind-projects.it/projects/jqzoom/demos.php">Open</a> | <a class="opennew" href="http://www.mind-projects.it/projects/jqzoom/demos.php" target="_blank">Open in new window</a></td>
</tr>
</tr>
<tr>
<th>Dowload &#038; Info</th>
<td<a class="opennew" href="http://www.mind-projects.it/projects/jqzoom/" target="_blank">Open in new window</a></td>
</tr>
</tbody>
</table>
<h3>jQPanView</h3>
<p>This script is useful if we need to show a high resolution image in a a small area. Using this script, user can pan around the images using a small thumbnail view (like google map).</p>
<p><img src="http://cool-javascripts.com/wp-content/uploads/2009/03/jqpanview.jpg" /></p>
<table border="0">
<tbody>
<tr>
<th>Dependencies</th>
<td>jQuery 1.2.6 +</td>
</tr>
<tr>
<th>Size</th>
<td class="alt">Less than 3KB (Uncompressed) </td>
</tr>
<tr>
<th>Restrictions</th>
<td>None</td>
</tr>
<tr>
<th>Demo &#038; Download</th>
<td><a class="opensame" rel="shadowbox" href="http://projects.sevir.org/storage/jpanview/index.html">Open</a> | <a class="opennew" href="http://projects.sevir.org/storage/jpanview/index.html" target="_blank">Open in new window</a></td>
</tr>
</tr>
</tbody>
</table>
<h3>jCrop &#8211; Select an image area</h3>
<p>It can be used to draw a selection inside an image. Then this data can be used to crop that image in server side. A very good interface that matches to professional image cropping applications. Probably it is useful in a CMS or for web based image manipulation.</p>
<p><img src="http://cool-javascripts.com/wp-content/uploads/2009/03/jcrop-image-cropping-demos.jpg" /></p>
<table border="0">
<tbody>
<tr>
<th>Dependencies</th>
<td>jQuery 1.2.6 +</td>
</tr>
<tr>
<th>Size</th>
<td class="alt">10KB (Compressed) </td>
</tr>
<tr>
<th>Restrictions</th>
<td>None (MIT)</td>
</tr>
<tr>
<th>Compatible Browsers</th>
<td>Firefox 3, Opera 9.5, IE6+, Safari 3, Google Chrome</td>
</tr>
<tr>
<th>Demo</th>
<td><a class="opensame" rel="shadowbox" href="http://deepliquid.com/projects/Jcrop/demos.php">Open</a> | <a class="opennew" href="http://deepliquid.com/projects/Jcrop/demos.php" target="_blank">Open in new window</a></td>
</tr>
</tr>
<tr>
<th>Dowload</th>
<td<a class="opennew" href="http://deepliquid.com/content/Jcrop_Download.html" target="_blank">Open in new window</a></td>
</tr>
</tbody>
</table>
<h3>imgAreaSelect</h3>
<p>This script also serves the same purpose as JCrop but with some more customization options. Lots of examples provided.</p>
<p><img src="http://cool-javascripts.com/wp-content/uploads/2009/03/imgareaselect-examples-odyniecnet.jpg" /></p>
<table border="0">
<tbody>
<tr>
<th>Dependencies</th>
<td>jQuery 1.2.6 +</td>
</tr>
<tr>
<th>Size</th>
<td class="alt">11KB (Minified) </td>
</tr>
<tr>
<th>Restrictions</th>
<td>None (Dual Licensed GPL + MIT)</td>
</tr>
<tr>
<th>Demo</th>
<td><a class="opensame" rel="shadowbox" href="http://odyniec.net/projects/imgareaselect/examples.php">Open</a> | <a class="opennew" href="http://odyniec.net/projects/imgareaselect/examples.php" target="_blank">Open in new window</a></td>
</tr>
</tr>
<tr>
<th>Info &#038; Dowload</th>
<td<a class="opennew" href="http://odyniec.net/projects/imgareaselect/" target="_blank">Open in new window</a></td>
</tr>
</tbody>
</table>
<h3>360 degree panorama</h3>
<p>This script creates a 360 degree panoramic view of any objects using an array of images. The script is simple to use. Shoot the photos of the object in all possible angles and give it as an array to the script. The image preloader will load all images. Can be activated in mouse move or click.</p>
<p><img src="http://cool-javascripts.com/wp-content/uploads/2009/03/360panorama.jpg" /></p>
<table border="0">
<tbody>
<tr>
<th>Dependencies</th>
<td>jQuery 1.2.3 +</td>
</tr>
<tr>
<th>Size</th>
<td class="alt">Less than 3KB (Uncompressed) </td>
</tr>
<tr>
<th>Restrictions</th>
<td>None</td>
</tr>
<tr>
<th>Demo &#038; Download</th>
<td><a class="opensame" rel="shadowbox" href="http://www.mathieusavard.info/threesixty/demo.html">Open</a> | <a class="opennew" href="http://www.mathieusavard.info/threesixty/demo.html" target="_blank">Open in new window</a></td>
</tr>
</tbody>
</table>
<h3>Spherical Panorama</h3>
<p>It can create a spherical panorama from given images. It will need a lot of images and those are handled well using a good loading animation. All the process are explained well in their site (It is in French, I have given a google translated link).</p>
<p><img src="http://cool-javascripts.com/wp-content/uploads/2009/03/spherical-panorama.jpg" /></p>
<table border="0">
<tbody>
<tr>
<th>Dependencies</th>
<td>jQuery 1.2.3 +</td>
</tr>
<tr>
<th>Size</th>
<td class="alt">Less than 7KB (Uncompressed) </td>
</tr>
<tr>
<th>Restrictions</th>
<td>None (GPL)</td>
</tr>
<tr>
<th>Demo &#038; Download</th>
<td><a class="opensame" rel="shadowbox" href="http://www.openstudio.fr/jQuery-spherical-panorama-viewer.html">Open</a> | <a class="opennew" href="http://www.openstudio.fr/jQuery-spherical-panorama-viewer.html" target="_blank">Open in new window</a></td>
</tr>
<tr>
<th>Translated page in English</th>
<td<a class="opennew" href="http://translate.google.com/translate?prev=hp&#038;hl=en&#038;u=http%3A%2F%2Fwww.openstudio.fr%2FjQuery-spherical-panorama-viewer.html&#038;sl=fr&#038;tl=en" target="_blank">Google English translation</a></td>
</tr>
</tbody>
</table>
<h3>jQuery Virtual Tour</h3>
<p>This is a good script for creating panoramic views with hot spots. The animation is good and there are controls which pops up on mouse over to control the direction or pause. We only need to give the image and the hotspots can be given using image maps. </p>
<p><img src="http://cool-javascripts.com/wp-content/uploads/2009/03/jquery-virtual-tour.jpg" /></p>
<table border="0">
<tbody>
<tr>
<th>Dependencies</th>
<td>jQuery 1.2.3 +</td>
</tr>
<tr>
<th>Size</th>
<td class="alt">Less than 10KB including all supported scripts </td>
</tr>
<tr>
<th>Restrictions</th>
<td>None (GPL)</td>
</tr>
<tr>
<th>Demo &#038; Download</th>
<td><a class="opensame" rel="shadowbox" href="http://openstudio.fr/jquery-virtual-tour/">Open</a> | <a class="opennew" href="http://openstudio.fr/jquery-virtual-tour/" target="_blank">Open in new window</a></td>
</tr>
<tr>
<th>Info &#038; Download</th>
<td><a class="opennew" href="http://www.openstudio.fr/jQuery-virtual-tour.html?lang=en" target="_blank">Open</a></td>
</tr>
</tbody>
</table>
<p class="note">For a more simple panorama viewer (without support for hot spot), please check <a href="http://www.openstudio.fr/jquery.panorama/" target="_blank">http://www.openstudio.fr/jquery.panorama/</a> </p>
<h3>Image Cube</h3>
<p>It is a jQuery plugin  that sets a division to rotate between images as if they were on the faces of a cube.</p>
<blockquote><p>The image cube functionality can easily be added to a division with appropriate default settings. It then displays the images contained within the targetted division in a cycle every two seconds. A random rotation is chosen each time to move to the next image. Highlights and shadows are used to enhance the 3D effect.</p></blockquote>
<p><img src="http://cool-javascripts.com/wp-content/uploads/2009/03/imagecube.jpg" /></p>
<table border="0">
<tbody>
<tr>
<th>Dependencies</th>
<td>jQuery 1.2.6 +</td>
</tr>
<tr>
<th>Size</th>
<td class="alt">Less than 8KB (Compressed)</td>
</tr>
<tr>
<th>Restrictions</th>
<td>None (GPL + MIT)</td>
</tr>
<tr>
<th>Demo &#038; Download</th>
<td><a class="opensame" rel="shadowbox" href="http://keith-wood.name/imageCube.html">Open</a> | <a class="opennew" href="http://keith-wood.name/imageCube.html" target="_blank">Open in new window</a></td>
</tr>
</tbody>
</table>
<h3>jqPuzzle &#8211; for creating sliding puzzles</h3>
<blockquote><p>
jqPuzzle lets you easily create sliding puzzles for your web page. Select an image, put it in your page, and add some magic – jqPuzzle will automagically turn it into a full-blown sliding puzzle! If you want, you can highly customize and style your sliding puzzle according to your needs. The interface is available in several languages, and you can add your own texts on the fly. </p></blockquote>
<p><img src="http://cool-javascripts.com/wp-content/uploads/2009/03/jqpuzzle.jpg" /></p>
<table border="0">
<tbody>
<tr>
<th>Dependencies</th>
<td>jQuery 1.2.1 +</td>
</tr>
<tr>
<th>Size</th>
<td class="alt">Less than 10KB (Compressed)</td>
</tr>
<tr>
<th>Restrictions</th>
<td>None (GPL + MIT)</td>
</tr>
<tr>
<th>Demo &#038; Download</th>
<td><a class="opensame" rel="shadowbox" href="http://www.2meter3.de/jqPuzzle/demos.html">Open</a> | <a class="opennew" href="http://www.2meter3.de/jqPuzzle/demos.html" target="_blank">Open in new window</a></td>
</tr>
</tbody>
</table>


<p>Related posts:<ol><li><a href='http://cool-javascripts.com/jquery/3-jquery-plugins-to-show-context-menu.html' rel='bookmark' title='Permanent Link: 3 jQuery plugins to show context menu'>3 jQuery plugins to show context menu</a> <small>A context menu (also contextual menu, shortcut menu and, popup...</small></li><li><a href='http://cool-javascripts.com/galleries/10-jquery-plugins-for-showing-image-gallery.html' rel='bookmark' title='Permanent Link: 10 jQuery plugins for showing image gallery'>10 jQuery plugins for showing image gallery</a> <small>An image gallery is part of the modern web 2.0...</small></li><li><a href='http://cool-javascripts.com/jquery/jquery-plugins-to-show-data-in-table-format-or-chart-format.html' rel='bookmark' title='Permanent Link: jQuery plugins to show data in table format or chart format'>jQuery plugins to show data in table format or chart format</a> <small> Need to show data in a tabular format or...</small></li></ol></p>
<p>Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.</p>]]></content:encoded>
			<wfw:commentRss>http://cool-javascripts.com/effects/10-jquery-plugins-for-manipulating-images.html/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

