Search, Support and Rent

Custom Search



Here are mine references:
Experts-Exchange

Please support this site via:
- clicking on advertise at the begining of this site,
- donating wilq32@gmail.com account on PayPal:










If you want to rent me to write your own class, just mail me with details on wilq32@gmail.com

Thursday, 29 January 2009

jQuery image rotate

I've just finished a new addOn to jQuery based on Wilq32.PhotoEffect functionality. You can see more details here, together with file to download.
http://beneposto.pl/wilq/jQueryRotate/Wilq32.jQueryRotate.html

Direct addOn download

62 comments:

Anonymous said...

In IE8rc1, the images are empty.

Joe McCann said...

Holy shit this is bad ass! I was seriously JUST starting to write code on rotating images and saw this on Ajaxian. Well done.

Anonymous said...

Absolutely great !!!!

Anonymous said...

Niezłe :)

Anonymous said...

Great! Thanks.
But how to do something like this: http://www.netzgesta.de/reflex/
with jQuery?

Pawel (Wilq32) Witkowski said...

The idea of doing http://www.netzgesta.de/reflex/
is the same idea that rotates images here. Maybe when I got some more time I'll make that effect also. Cheers

Pieter said...

Great plugin, just what i need for a kompas-style navigation. This rotates the needle perfectly!

Could you let me know what the chances are for a version that IE7/IE8 can handle?

Pieter said...

Sorry, i should have RTFM :-) Forgot to load excanvas... Runs fine in IE7 and in compatibility mode in IE8!

Thanks!

Jason said...

Hey! Love the plugin, awesome. As for it not working in IE 8...that is unfortunately true. However, try putting this magic little tag in your header:
[left-pointy bracket]meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /[right-pointy-bracket]

I use this tag anyway because of the huge inconsistencies with IE 8 in CSS rendering. It's even worse than 7 IMHO.

Mikael Norling said...

Hi, Pawel! Awesome plugin.

I'm experiencing a problem at the moment though. The canvas element that replaces the image are larger than the original image. The width and height of the img is both 630 and the canvas attributes get the value 890. Any idea why that might me? The same thing happens in both FF3 and Safari 3 on Mac.

Here's a link: http://mikaelnorling.se/utv/ambigram.php

You'll find the JS file here:
http://mikaelnorling.se/utv/js/rotate.js

Gregg said...

great stuff! i wanted to use it to generate a fanned-out stack of photos (which i got to work).

sample: http://www.kingmixerstudios.com/fanPhotos.html

problem was when i tried to hookup onmouseover to "slide up out of stack" and onmouseout to "slide back into stack":
-- the images are rotated, but apparently the part that onmouseover sees is still unrotated. any ideas?

Nick Brown said...

Any idea how to make it rotate my img border as well?

Pawel (Wilq32) Witkowski said...

Well first of all, this site will be removed by google because of google idea to kill this googlepages project... Pretty sux...

Second of all I will try to help you on mail directly but cant asure you that it will be fast, I still have own life to work on too ;D

Borded is possible to do, but not using current version of mine plugin. You can do one of two things:

- add a border directly on image,
- add a border directly in plugin implementation, by creating rectangle bigger that image in canvas just before puting image, next image will be put over this rectangle making sure that there will be nice border around.

Petty said...

Question:

I have a page that contains an actual canvas element & want to use something like jQueryRotate.js ...

Is there a similar plugin you recommend; or is it possible to modify your plugin to manipulate canvas elements as well as img elements?

Thanks!!

Rahul said...

It don't work with IE6... but don't care much cause it works fine with other browsers.

Very cool effect.

Pawel (Wilq32) Witkowski said...

Well... I open this in mine IE6 and everything work well... Can you try to refresh page ? Maybe you got an old script in cache? If not please give me some errors for it so I can improve it. Basically it should work on IE6

Mr.Shoes said...

Wonderful script! It's working great for me. The only problem is that I cannot do more than rotateAnimation effects at the same time. They seem to conflict and result in both image getting rotated the same distance. Any ideas?

Lior said...

Great plugin. Thanks !

One problem thought:
In IE7 - the inner image element is not positioned inside the span when the span is using position:absolute

Any help on this?

james said...

I got IE8/7 to work using:

if(jQuery.browser.msie)
{
document.namespaces.add('v', 'urn:schemas-microsoft-com:vml', "#default#VML");
document.createStyleSheet().addRule('v\\:image', "behavior: url (#default#VML);display:inline-block");
}

at the bottom of the js file.

ctepeo said...

Good day! Real good one plugin, thank You a lot of! But I still have a problem: how can I attach rotateAnimation on document ready? I've tried something like this:

$(document).ready(function(){
$("#myElementID").rotateAnimation({ angle:-1440,
callback:function(){
alert('done!'); }
});

});


but there is no errors at FireBug and no animation/alert. Can You place example at plugin's page, that uses animation, but not binded on event? Thank You again.

Pawel (Wilq32) Witkowski said...

I'm on vacation now, sorry all. I will try to prepare a new version soon without this nasty implementation!

Cheers.

Mayo said...

hi, i'am using jquery dragable dropable resizable scripts and i want to use this one rotate script, but on click image/div. can you help me how ?

Ranjoy said...

multiple image is not working in ie8

Anonymous said...

Is it possible to use the easing jQuery plugin with this?

http://gsgd.co.uk/sandbox/jquery/easing/

Anonymous said...

Hi,
what about the rotateAnimation on document ready? Will you think of a solution in the near future?

Would be really nice. Your script is perfect then ;)

Dr Adam said...

Hi this script is awesome! I too am wondering if it is possible to have the rotateAnimation on page load (or at least be able to put them at some degrees rotated to begin with).

Awesome scripts though. I have had a blast learning what can be done with these. Next step is to try to get lighbox to play nice with it so I can make an awesome slideshow bar.

Pawel (Wilq32) Witkowski said...

I'm not quite sure what you mean about using a rotateImage on document ready. I though that examples that I wrote are using document.ready() already or I did not get something there ? :)

Anonymous said...

hm maybe i read something over. My problem is that i want a picture that rotates when someone comes to the site. like this:
$(document).ready(function(){
$('#image1').rotateAnimation(145);
});

But i dont get the right syntax for this :/

Anonymous said...

Hi, great plugin

but my callback is never called:

$(document).ready(function()
{

rot=$('#image3').rotate({maxAngle:1,minAngle:-1,
callback:
function() {
rot[0].rotateAnimation(-10);
},
bind:
[
{"mouseover":function(){
rot[0].rotateAnimation(10);
}},
]
});

});

what am i doing wrong?

Thx!

Pawel (Wilq32) Witkowski said...

Hey, Please ask question about code problems directly to emails :) Right now It will take some time before you will see the response ;)

axiom said...

Should we rotateAnimation to work in IE 7 or 8? Right now the demo does not seem to.

Pawel (Wilq32) Witkowski said...

Sorry all of you last fix broke IE6, fix is on the way :/

Julio said...

Can I resize, scale an image in addition of rotation? This is a great script!!!! Thank you!!!

Pawel (Wilq32) Witkowski said...

Well I could do that, but then it couldnt be called RotateImage does it ? :) Maybe ImageMatrix would be better name then ? :P ;)

Changkyu-ji said...

Hello ~! :)

I From Korea!

Google Searching For The Project

Your Site Visit Great Soruce Finds!

But, Problems!

ex 1)var rot=$('#target').rotate({maxAngle:360,minAngle:-360});

ex 1 Problem) Image Loading Continuous Wait!

ex 2)$('#target').rotateAnimation(0);

ex 2 Problem) Trembling In The Images!

Please! What should I do to solve this problem?

Erik said...

Is it possible to get the current angle of an already rotated/animating object?

Changkyu-Ji said...

Written comments is right above him.
Answer Thank you.
Clicking the bigger or smaller or variable, and the angle.
It is the animating object 0 is the only cause flicker.
How do solve?
In addition, the initial image to the extent applicable 360/-360 the image loading is repeated.

Pawel (Wilq32) Witkowski said...

@Erik: Ugly way of doing it (no nice one for now) would be:

$("#image").Wilq32.PhotoEffect._angle


@Changkyu-ji:

I'm not exactly sure what do you mean :) Can you please provide me with some example test page ? :)

Changkyu-ji said...

i'm sorry!

test page : http://2pleweb.com/test/

1. Click the square box is back at 0 degrees ( 'image quake')
2. Page load ( 'image continues to read')

Please let know how to solve.

Pawel (Wilq32) Witkowski said...

Please contact me on mail, because "comments" are just for comments :) Anyway I dont see any problem with loading? And not sure about flickering if you can - please send me detailed explanation because first I have to see what is wrong to fix it :/

Anonymous said...

Hi, Awesome work is there a way to get it to display animated gifs in Firefox, Safari, Chrome ?
Works Ok in IE.

Pawel (Wilq32) Witkowski said...

Fixed animated gifs, but this might slow down because of constant redraws so use it only if you really need it :) Cheers

Akume said...

i'm having a little trouble. i have an image container that has a png background. i want to be able to rotate the two in conjunction with each other. can your plugin do this, or will i have to modify it?



css
.banner-image-container{background-image:url(../images/banner-back-home.png); height:370px; width:514px; }
.banner-image-container img{margin:15px}

Anonymous said...

where can i see examples???
why did you all removed your test pages?
oh..

Pawel (Wilq32) Witkowski said...

Im not sure what you ask for, they're all still there - maybe server stop responding for a while ? :)

Anonymous said...

This is a very good plugin.

But why is it in IE8, the images were loaded on the screen but the page does not end in loading.
If the images are not the cache of the browser, images continuous loading like Changkyu-ji said...

Pawel (Wilq32) Witkowski said...

Endless loading fixed in new version! Enjoy even better jQueryRotate ever ;)

Mike said...

It still doesnt work, it still endlessly loads :|

Mike said...

I just verified that it isnt working on your site.

If you look at the bottom left of your IE 8 browser you will see where it says (image loading).

This library is nice, I would like to use it because Raphael's library causes multiple postbacks in Chrome in certain scenarios.

At any rate, I will give it a few weeks and see if you can resolve the issue :)

-M.V.

Pawel (Wilq32) Witkowski said...

Sorry Mike you were right - I fixed one IE problem but it seems that there was also an another one... Now it should be ok :)

Mike said...

Very cool, looks like it is resolved. I will do some testing today.

-M.V.

Anonymous said...

Can I resize the image after rotation?

Pawel (Wilq32) Witkowski said...

For now on only rotation is possible, but due to many requests I starting to consider putting optional resizing/border/rounded border options inside plugin

Anonymous said...

I tried the following code with jquery 1.4.2, it work on IE and Safari but not FF, the href tag failed (not clickable after the first click). I only have one image and href tag in the page.

function rotate(v){
$('#imgTag').rotate(90*v);
$('#hrefTag').unbind();
$('#hrefTag').click(function(){
rotate(v+1);
});
};

$(document).ready(function(){
$('#hrefTag').click(function(){
rotate(1);
});
});

Thanks for great plugin.

Pawel (Wilq32) Witkowski said...

This is wrong approach to bind events on images. Anyway please refeer to a google source code of this plugin as a comment system here is not good enough to reply :)

Dimitar Hubenov said...

Hi,
I saw many questions about plugin not working with $(document).ready(...);
Well, document.ready() fires when Document Object Model (DOM) is ready. It doesn't mean all the images are loaded. So the browser knows there will be some image there but there is no information about image details.
To solve this issue use .load() function instead. Something like:
$(window).load(function () {
// run code
});

You can get more details at jQuery API - load event/

FM4k said...

I have a question: I can't seem to nest a function inside of the rotateAnimation() function...

I've been trying this:

jQuery(".icon", this).rotateAnimation(90, function() { alert("foobar"); });

But the interior function (alert) never gets triggered?? Is there was a way around this?

Glenn said...

This is great. My question is can this be applied to a set of elements, say 'li' at different random rotations between a min and max rotation?

Glenn said...

This is great. My question is can this be applied to a set of elements, say 'li' to rotate images/div at random with a min and max rotation?

Pawel (Wilq32) Witkowski said...

Please ask question directly on my mail :) Yes it is possible to apply that but not so easily - you would have to use .each function to create a different set of parameters (with random value) for element to be rotated :)

generic cialis 20mg said...

Interesting article, added his blog to Favorites

viagra 100 mg said...

That is very good comment you shared.Thank you so much that for you shared those things with us.Im wishing you to carry on with ur achivments.All the best.