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
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
Subscribe to:
Post Comments (Atom)
62 comments:
In IE8rc1, the images are empty.
Holy shit this is bad ass! I was seriously JUST starting to write code on rotating images and saw this on Ajaxian. Well done.
Absolutely great !!!!
Niezłe :)
Great! Thanks.
But how to do something like this: http://www.netzgesta.de/reflex/
with jQuery?
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
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?
Sorry, i should have RTFM :-) Forgot to load excanvas... Runs fine in IE7 and in compatibility mode in IE8!
Thanks!
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.
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
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?
Any idea how to make it rotate my img border as well?
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.
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!!
It don't work with IE6... but don't care much cause it works fine with other browsers.
Very cool effect.
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
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?
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?
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.
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.
I'm on vacation now, sorry all. I will try to prepare a new version soon without this nasty implementation!
Cheers.
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 ?
multiple image is not working in ie8
Is it possible to use the easing jQuery plugin with this?
http://gsgd.co.uk/sandbox/jquery/easing/
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 ;)
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.
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 ? :)
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 :/
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!
Hey, Please ask question about code problems directly to emails :) Right now It will take some time before you will see the response ;)
Should we rotateAnimation to work in IE 7 or 8? Right now the demo does not seem to.
Sorry all of you last fix broke IE6, fix is on the way :/
Can I resize, scale an image in addition of rotation? This is a great script!!!! Thank you!!!
Well I could do that, but then it couldnt be called RotateImage does it ? :) Maybe ImageMatrix would be better name then ? :P ;)
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?
Is it possible to get the current angle of an already rotated/animating object?
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.
@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 ? :)
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.
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 :/
Hi, Awesome work is there a way to get it to display animated gifs in Firefox, Safari, Chrome ?
Works Ok in IE.
Fixed animated gifs, but this might slow down because of constant redraws so use it only if you really need it :) Cheers
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}
where can i see examples???
why did you all removed your test pages?
oh..
Im not sure what you ask for, they're all still there - maybe server stop responding for a while ? :)
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...
Endless loading fixed in new version! Enjoy even better jQueryRotate ever ;)
It still doesnt work, it still endlessly loads :|
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.
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 :)
Very cool, looks like it is resolved. I will do some testing today.
-M.V.
Can I resize the image after rotation?
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
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.
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 :)
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/
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?
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?
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?
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 :)
Interesting article, added his blog to Favorites
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.
Post a Comment