red
Newbie Member
11Mar2010,07:57   #11
red's Avatar
This code is great! I have a quick question - well two questions.

1) Is there anyway to have my three images rotate once and then stop?

2) Can I use some Javascript so the rotation only occurs on the home page of my site and not on any subsequent pages?

Thank you!
Rachel
Newbie Member
31Mar2010,22:04   #12
shiqinzhang's Avatar
Hi experts,

I saw enough codes on the internet telling me how to Swap Image between images. But I want someone to tell me how to swap between images and Flash .swf files. My design was after a user clicks on a thumbnail on the top of a web page, the bigger picture below that will swap accordingly. Those bigger pictures include be both .jpg images or .swf files. Thanks a lot!!!!!

03/31/2010
Newbie Member
27Aug2010,11:26   #13
dichotom's Avatar
Quote:
Originally Posted by phisolophe View Post
A simplified version with just one set of images...with some URLs attached to the images...The timeout is in miliseconds...3000 = 3 seconds...

Hope this helps...

Code:
<body>
<a id="imageurl" ><img id="Rotating1" border="0"></img></a>
<script language="JavaScript">
  
   function RotateImages(Start)
  {
      var a = new Array("image1.jpg","image2.jpg","image3.jpg", "image4.jpg");
      var c = new Array("url1", "url2", "url3", "url4");
      var b = document.getElementById('Rotating1');
      var d = document.getElementById('imageurl');
      if(Start>=a.length)
          Start=0;
      b.src = a[Start];
      d.href = c[Start];
      window.setTimeout("RotateImages(" + (Start+1) + ")",3000);
  }
  
  RotateImages(0);
  
  </script>

</body>

I just wanted to thank you for this code snippet, I have been scouring for a small fast loading script that worked in all browsers (at least ie6 and above) and had the exact features of rotation and url's assigned to each one. I was looking at jquery scripts, which are awesome, but it's just too much overhead for my project. I am hand coding a site and I want: 1) no external libraries 2) small as possible overhead 3) xhtml 1.0 transitional certified

You helped me accomplish 1 and 2, here is 3:

Code:
<a id="imageurl" name="imageurl"><img src="Rotating1" id="Rotating1" border="0" alt="Rotating1" name="Rotating1" /></a>
<script language="javascript" type="text/javascript">
  
   function RotateImages(Start)
  {
      var a = new Array("1.jpg","2.jpg","3.jpg", "4.jpg");
      var c = new Array("url1", "url2", "url3", "url4");
      var b = document.getElementById('Rotating1');
      var d = document.getElementById('imageurl');
      if(Start>=a.length)
          Start=0;
      b.src = a[Start];
      d.href = c[Start];
      window.setTimeout("RotateImages(" + (Start+1) + ")",3000);
  }
  
  RotateImages(0);
  
  </script>
Minor changes, I know, but if someone wants/needs xhtml 1.0 transitional there it is. I started out going for xhtml 1.0 strict, but it become to restraining (see: bitchy)
Thank you so much, I hope someone finds this useful!
Newbie Member
27Aug2010,11:37   #14
dichotom's Avatar
Anyone have an idea as to how to make the rotation pause on mouseover? If I find it first, I will post back..
Newbie Member
27Aug2010,13:36   #15
dichotom's Avatar
Code:
<a id="imageurl" name="imageurl"><img src="Rotating1" id="Rotating1" border="0" alt="Rotating1" name="Rotating1" onmouseover="StopRotation();" onmouseout="RotateImages();"/></a>
<script language="javascript" type="text/javascript">

  var currentImage = 0;
  function RotateImages()
  {
    var a = new Array("1.jpg","2.jpg","3.jpg", "4.jpg");
    var c = new Array("url1", "url2", "url3", "url4");
    var b = document.getElementById('Rotating1');
    var d = document.getElementById('imageurl');

    currentImage++;

    if(currentImage>= a.length)
      currentImage=0;

    b.src = a[currentImage];
    d.href = c[currentImage];

    rotator = window.setTimeout("RotateImages(" + (currentImage+1) + ")",3000);
  }

  function StopRotation()
  {
    window.clearTimeout(rotator);
  }

  RotateImages();

</script>
There we go, pauses on mouseover, and then continues to next image on mouseout. Still xhtml 1.0 trasitional certified.
Newbie Member
27Aug2010,13:38   #16
dichotom's Avatar
Change:

Code:
 var currentImage = 0;
to

Code:
 var currentImage = -1;
so it starts on the first image in the array.
Newbie Member
16Sep2010,07:02   #17
tativitsic's Avatar
How do I add a soft transition between the images?
Go4Expert Founder
16Sep2010,08:41   #18
shabbir's Avatar
Quote:
Originally Posted by tativitsic View Post
How do I add a soft transition between the images?
jQuery supports all sorts of transitions. Try using it.
Newbie Member
16Sep2010,09:30   #19
tativitsic's Avatar
Sorry, but I'm a designer... No idea how to do that.
Can you show me an example please?
Go4Expert Founder
16Sep2010,09:45   #20
shabbir's Avatar
Quote:
Originally Posted by tativitsic View Post
Sorry, but I'm a designer... No idea how to do that.
Can you show me an example please?
Check out http://leandrovieira.com/projects/jquery/lightbox/
Page 2 of 3
1
2
3