CODEWITHSUNDEEP
javascriptjqueryhtmlimageslider
Bill Johnson
Bill Johnson

Reputation: 303

Rotating images

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

Upvotes: 2

Views: 1228

Answers (4)

Spudley
Spudley

Reputation: 168685

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:

-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 */
transform: rotate(45deg);  /* plain CSS3 (for when it gets supported) */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
filter: progid\:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */

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.

Upvotes: 1

jason m
jason m

Reputation: 6835

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.

Upvotes: 0

mingos
mingos

Reputation: 24502

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

Upvotes: 2

Squirkle
Squirkle

Reputation: 933

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

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

Upvotes: 4

Related Questions