Link to home
Create AccountLog in
Avatar of Dada44
Dada44Flag for Spain

asked on

Circulation Rotation Script plus Text

Hi all,

Some days ago LeeKowalkowski published a gorgeous rotation script. I copy the code below. This script rotates a set of images in a clockwise direction. As jay_eire, the person who asked for the code, I have a round circular image on my page and I want to rotate a set of images around this circle.

LeeKowalkowski nailed it, but in my case I would need also some text below each image to rotate with it. I also need to make this text linkable and of course, has to be working in most accepted browsers.

I have been trying to do it for a long time, but I cannot make it no matter what I try.

Thanks very much in advance!

<head>
    <title>Rotation</title>
    <style type="text/css">
      #orbit
      {
        position:absolute;
        width:100px;
        height:100px;
        left:50px;
        top:50px;
        background:url(bigCircle.gif) no-repeat;
      }
      #orbit img
      {
        position:absolute;
        background:#ff0;
      }
      #orbit ul
      {
        list-style:none;
      }
      #orbit li
      {
        display:inline;
      }
    </style>
  </head>
  <body>
    <div
      id="orbit"
    >
      <ul>
        <li><img src="icon1.gif" width="10" height="10"></li>
        <li><img src="icon2.gif" width="10" height="10"></li>
        <li><img src="icon3.gif" width="10" height="10"></li>
      </ul>
    </div>
    
    <script type="text/javascript">
      var Orbit = new function()
      {
        var eAnim = document.getElementById('orbit'); // animation element
        var imgs = eAnim.getElementsByTagName('img'); // images to space evenly in a circle
        var il = imgs.length; // cached number of images for speed
        var da = Math.PI * 2 / il; // difference in angle between images
        var ca = 0; // current angle
        var oc = [50, 50]; // orbit centre[x,y] (anim width / 2 + anim left, anim height / 2 + anim top)
        var or = 75; // orbit radius
        var os = .02; // orbit speed .02 = slow, .15 = fast (negative for anti-clockwise)
 
        function render() // position all images
        {
          for(var i = 0; i < il; i++)
          {
            var ang = i * da + ca; // angle of this image
            imgs[i].style.left = Math.cos(ang) * or + oc[0] - imgs[i].width / 2 + 'px';
            imgs[i].style.top = Math.sin(ang) * or + oc[1] - imgs[i].height / 2 + 'px';
          }
        }
        render();
        
        this.animate = function()
        {
          ca += os;
          render();
        }
 
        window.setInterval('Orbit.animate()', 50);
      }
    </script>
  </body>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of sledgebox
sledgebox
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
FYI: You might notice that if the text in the anchor is wider than the image, it will wrap and unwrap depending on the div's position about the axis. To fix this, you need to explicitly set the "white-space" style property for the anchor like this:
      #orbit a
      {
        white-space: nowrap;
      }
Wrap the "render" function  and it can auto-start:
(function render() { // position all images
    for(var i = 0; i < il; i++) {
        var ang = i * da + ca; // angle of this image
        imgs[i].style.left = Math.cos(ang) * or + oc[0] - imgs[i].offsetWidth / 2 + 'px';
        imgs[i].style.top = Math.sin(ang) * or + oc[1] - imgs[i].offsetHeight / 2 + 'px';
    }
})();

Open in new window

Oh - and you do not need line 64 if you do the above:
/* render(); Not necessary anymore */

Open in new window

Avatar of Dada44

ASKER

Thank you!!!
Now I want to do something with the script's links and PHP & mysql. I'll be posting it in the PHP chapter. Thanks once again!