Rotating images

Question

Hi all,

Just wondering if someone can help me code the following.

I want to use a fading effect to rotate a series of images (7 in total), within the CSS and code already defined below:

<style="text/css">
.rotate {float: left;width: 160px;height: 215px;background-color: #FFFFFF;border: 2px solid #0066CC;margin: 0px 10px 10px 0px;text-align: center;overflow: hidden;}
</style>


<div class="rotate">
    <span>
        <a href="#">
            <img border="0" src="catimage.jpg" width="160" height="160" alt="" class="" />
        </a>
    </span>
    <div onclick="javascript:document.location.href='/';">
        <a href="/"></a>
    </div>
</div>

Can someone please help me code this.

Many thanks

Answer 1

Try the jQuery Rotate extension. This sounds like it might be what you are looking for.

http://code.google.com/p/jquery-rotate/

Answer 2

I found this jQuery plugin that's apparently capable of rotating images by a given angle AND works in all browsers. I haven't tried it, but it's a starting point.

http://wilq32.adobeair.pl/jQueryRotate/Wilq32.jQueryRotate.html

If you don't mind your code working in webkit browsers only, rotating can be done in CSS only, using the CSS transition. Here's a demo with code:

http://nettuts.s3.amazonaws.com/581_cssTransitions/demos.html

Answer 3

this is more of a combo question. if you make your own resource (ajax listener) to utilize php's function.imagerotate you will quickly solve your own problem.

Answer 4

If you need a slider with fadeIn & fadeOut effect, May be this helps http://www.wiseblog.info/examples/slider

Answer 5

You can do rotation with CSS. The good news is that it works in just about every web browser out there. The bad news is, it's very much a browser-by-browser thing, so it takes quite a bit of code! For example, to rotate an element by 45 degrees, you would do something like this:

transform: rotate(45deg);  /* plain CSS3 (for when it gets supported) */
-ms-transform: rotate(45deg); /* IE9 */
-moz-transform: rotate(45deg);  /* FF3.5+ */
-o-transform: rotate(45deg);  /* Opera 10.5 */
-webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */
filter: progid\:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */

You'll notice that the MS versions use bizarre numbers instead of degrees. These are (I believe) radians. You'll need to convert between them for any values you want to use.

Anyway, once you've got this worked out, it's (relatively) easy to use Javascript (or JQuery) to modify the styles at run-time, and get the rotation animated.

Enjoy.