HI, Is there a way by which I can rotate an image inside a div clockwise or anticlockwise.
I have a main fixed width div[overflow set to hidden] with images loaded from database. There is a scroll bar for showing the images inside the div. When image is clicked then I need to show the rotating animation either in clockwise or anticlockwise direction.
I have done it using Matrix filter. I would like to know whether it is possible to be done in IE only without using any filters.
try this: http://raphaeljs.com/image-rotation.html
uses canvas but also supports IE
If you're using jQuery, jQueryRotate is a small (less than 3Kb minified+gzipped) plugin that rotates images:
http://jqueryrotate.com/
The only way I can think of for rotating images on the client-side in IE is using filters. For somewhat recent versions the other browsers you can use the <canvas> control.
Your alternative is to use a server-side script to rotate the image. Then you can send the information on how to rotate it with JavaScript (i.e. generate a path to the image such as /rotate?image=img.jpg&amount=90)
CSS3 supports rotation, but it isn't widely supported.
As you asked for JavaScript solution, here's one, but I don't think you can get smooth images.
There is other way to rotate images without any filters / html5.. it's nasty and useless in real world, but possible.
You can store your image as array of pixels, for javascript. Write function to perform rotation with it and encode it to base64 datauri, bmp could be easy and replace image.src with it.
There will be some limitation about filesize and support in old browser and of course terrible performance..
Related
I am looking for a javascript zoom library, similar this
However, most ones out there require that you have thumbnails images for the unzoomed image which is a bit of an annoyance for me since I am only viewing 2-3 images per page and everything is preloaded.
Does anyone know of a similar library which would allow me to do this with a css scaled down version of my image rather than generating the thumnbails in the backend?
Thanks!
Yay for CSS3 transforms:
img.thumb {
-webkit-transform:scale(0.5,0.5);
-ms-transform:scale(0.5,0.5);
-moz-transform:scale(0.5,0.5);
-o-transform:scale(0.5,0.5);
transform:scale(0.5,0.5);
}
I was wondering if there was any jQuery library that will allow us to change the perspective of an image.
I know that modern browsers already support vendor specific rotate() in CSS but it doesn't quite give the desired result. Most of them just vary the width of the image but doesn't shrink the height of one side and increase the height of one side to produce the effect that you are viewing the image from another angle.
Any more details that you may need, please tell me. Thanks!
EDIT
I already tried transforms but they don't increase the height of the side that is moving towards you and decrease the one that is moving away from you. And I don't do full rotations, i just tilt the image a few degrees so the change in height has to really be there
Have a look at script3D.js
http://minimal.be/lab/Sprite3D/
could be usefull for 3D css animations.
CSS3 has 2D-transforms and 3D-transforms. While the first is well supported (by all browsers, not by all used versions [1]) the second is currently only supported by mozilla and webkit [2]. Both features mostly need vendor-prefixes.
And of course you can animate them with jQuery, if you want to.
I'm using some javascript to make my images draggable
I want to be able to move my images over each other and create a similar effect to the multiply blending mode in photoshop.
I've seen how this is possible with static images, but I want these to change as they are moved around the screen, rather than just loading up with the effect already applied.
Is this possible within the canvas? Is there a better way?
Yes, it is possibile with Canvas and processing.js, but you will not be able to use your actual draggable plugin (it doesn't seem HTML5).
Read this http://processingjs.org/reference/blend_/ but remember Blending on Canvas could be very slow (it depends by images' resolution and by Browser' engine).
I am dynamically sizing a transparent .gif on my web page using JavaScript. The original image size is around 200x200 pixels and it’s typically resized to between 600x600 and 800x800. In IE8 and FF3, the resized image results in a nice looking gradient where the colors appear to be stretched. However, in older browsers such as IE7 and FF2, the resized image does not show a gradient, but just blocks of the same color. Obviously, there is something built into the browsers that causes this however I am curious if there is a way around this without having to change my original image.
There isn't. Older browsers just take the pixels in the image, and multiply them according to the new size you gave the image.
Newer browsers seem to have more advanced image rendering with anti-aliasing and such, but older browsers just aren't capable of that. If you want the image to look good in all sizes, take the biggest you can and then let it shrink if needed. Upsizing a small image will look ugly, expecially in the old browsers, and there's nothing you can do.
If you are just using it as a gradient, why not just whip up a new one in Photoshop/Gimp that's at the correct resolution for what you need. It will be far simpler in the long run then trying to get an up-scaled image to display properly in all browsers.
It looks like IE7 supports bicubic if you add "-ms-interpolation-mode:bicubic;" to your img css style. I haven't tried it myself, and wonder if it'd work on gifs or if it'd only work on true color images.
I have a web page which displays a large image, for example a page from a magazine. I have no control over the image size or orientation. It's possible that the image may need to be rotated by the user to orient it correctly.
Are there any Javascript or Flash solutions that will allow someone to rotate and zoom a given image? Ideally I'd specify a single image and the dimensions to use when displaying it. If the image is larger than those dimensions, the user could zoom in and view a portion of the image in greater detail.
I've seen a couple of solutions for rotating images with straight Javascript and CSS. Raphael would do the trick. There is apparently even an example featuring rotating an image. (it uses SVG but is support on all major browsers)
This one is not cross browser, but is an interesting exercise nevertheless.
As for flash rotation etc...
For rotating images, I used jquery-rotate and it works very well.
It is not totally cross-browser, it doesn't work with IE6 (and probably other old browsers).
For zooming, I guess you could make your own implementation using javascript, you can just resize the image (easy with jQuery).