SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: image rotator

  1. #1
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image rotator

    I am adapting a script to make an image on a home page:
    http://www.kripalu.org/

    rotate like this
    http://test.kripalu.org/index_rotate.php

    The script is:

    HTML Code:
     <!-- rotating images -->
     
     <!-- Rotating images script -->
     <script language="JavaScript1.2">
    /*
    Rotating image or text(You can use for changing banners)
    Author: Narayan Chand Thakur
    Source: [url="http://ncthakur.itgo.com/"]http://ncthakur.itgo.com/[/url]
    This may be used freely as long as this message is intact.
    */
    <!--
    //you may add your image file or text below
    var item=new Array()
    item[0]="<a href='#'><img src='/uploads/images/1349574951_feature.jpg' border='0'></a>"
    item[1]="<a href='#'><img src='/uploads/images/138522763_04_03_home_page.jpg' border='0'></a>"
    item[2]="<a href='#'><img src='/uploads/images/2000146464_04_04_home_page.jpg' border='0'></a>"
    /*item[3]="<strong><font face='arial' size='4' color='red'>Text without a Link!</font></strong>"
    item[4]="<a href='#'><font face='arial' size='4' color='darkgreen'><B>This text has Link</B></font></a>"
    item[5]="<a href='#'><font face='arial' size='4' color='darkgreen'><B>How do you like that?</B></font></a>"*/
    var current=0
    var ns6=document.getElementById&&!document.all
    function changeItem(){
    if(document.layers){
    document.layer1.document.write(item[current])
    document.layer1.document.close()
    }
    if(ns6)document.getElementById("div1").innerHTML=item[current]
    {
    if(document.all){
    div1.innerHTML=item[current]
    }
    }
    if (current==2) current=0
    else current++
    setTimeout("changeItem()",2000)
    }
    window.onload=changeItem
    //-->
    </script>
    <!-- end rotating images java script -->
    <!-- begin rotating images layer and div -->
     
    <layer id="layer1" left="210" top="250" ></layer>
    <div id="div1" style="position:absolute;left:210;top:250">
    </div>
     <!-- end rotating images layer and div -->
     
    Problems are:

    1) Adapting the script from rotating 6 images to 3 brings up an "undefined" message. I commented out items 3-5 and changed the value of current==6 to current--2, but that doesn't seem to help.

    2) The script seems to interfere with the top navigation bar, which also uses java scripts.

    3) The "layer" thing does not nestle the images into the table where they belong.

    I need to resolve these three issues, or look for another script. Any thoughts?
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  2. #2
    Old Folks 127.0.0.1 pacres's Avatar
    Join Date
    Sep 2003
    Location
    ed.ab.ca.na.ea
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Were you successful running the script with the original 6 images in rotation?

  3. #3
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Modulus (%) is your friend

    Copy-paste:

    Code:
    <script language="JavaScript" type="text/javascript">
    var rotHTML = [
    	"image1",
    	"<b>image2</b>",
    	"<span style='color:red'>image3</span>"
    ];
    var rotPos = -1;
    var rotTime = 600;
    
    function rotate() {
    	document.getElementById("rotDIV").innerHTML = 
    		rotHTML[rotPos = (rotPos + 1) % rotHTML.length];
    	setTimeout("rotate()", rotTime);
    }
    
    window.onload = rotate;
    </script>
    
    <div id="rotDIV"></div>

  4. #4
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Array.length is friendly too.
    Code:
    current = (++current == item.length) ? 0 : current;
    That 'layer' (div1) is absolutely positioned, so it floats above the rest of the content. Try giving it position:relative to put it back inflow, and place it in the table. This'll eliminate NS4 from the mix (ILAYER == bad) but, big deal.
    ::: certified wild guess :::

  5. #5
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Modulus, your script solved problems 1 & 3 and works great at:
    http://test.kripalu.org/index_rotate.php

    I know I control the rate of rotation, in

    Code:
    var rotTime = 600;
    setTimeout("rotate()", rotTime);
    What unit does 600 represent? What number will change the image every 15 seconds?

    Concerning problem 2, interfering with the top navbar: The navbar is also javascript, contained in an include, top.php. Will it help if I attach both index_rotate.php file and the include?
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  6. #6
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The arg of setTimeout is a delay in milliseconds. Millisecond is 1/1000th of second. So if you need 15 secs. provide 15*1000.

    Sincerely yours,
    Modulus

  7. #7
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Feedback from colleagues:
    1) RE: image loading
    The script you are using blanks the image rather than loading a second image in the background for a near instantaneous transition. I recommend continuing your development with a more sophisticated script. On a slower modem connection the blank time while the new image loads will be relatively long.
    Can Modulus's script be adapted to do this? Comments? Suggestions?

    2) RE: dissolves
    Would be cool if the change from photo to photo can be a dissolve. Can you do that?
    Can javascript handle dissolves? Do I need to go to Flash for this? Prefer to keep bandwidth requirements low in order to handle this request.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  8. #8
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Durham
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Javascript can handle dissolves, but it's a bit tricky due to IE handling opacity different. You'll have to browser sniff, and make it do the appropriate method accordingly. Quick example (for safari and moz):
    Code:
        function fadeOut(what) {
             what = document.getElementById(what);
              var opac = 1.0;
              var inter = setInterval(function() {
                                 what.style.opacity = opac;
                                  opac -= 0.1;
                                  if (opac < 0) clearInterval(inter);
                                }, 50);
        }
    Not tested, I'm afraid.

    Oh, and a quick point: Modulus isn't a person or anything - stereofroq was talking about using modulus (percent sign) to your advantage. It returns the remainder of dividing the number to the left of the sign by the number to the right. Just so you know.

  9. #9
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks blackbook and my apologies to stereofrog.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  10. #10
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    > I recommend continuing your development with a more sophisticated script..

    Give me one more chance!..

    Code:
    <script language="JavaScript" type="text/javascript">
    var rotImg = [];
    
    (rotImg[0] = new Image()).src = "pic1.jpg"
    (rotImg[1] = new Image()).src = "pic2.jpg"
    (rotImg[2] = new Image()).src = "pic3.jpg"
    
    var rotPos = -1;
    var rotTime = 600;
    
    function rotate() {
    	var img = rotImg[rotPos = (rotPos + 1) % rotImg.length];
    	if(img.complete)
    		document.images["rotate"].src = img.src;
    	setTimeout("rotate()", rotTime);
    }
    
    window.onload = rotate;
    </script>
    
    <img name="rotate">
    > my apologies to stereofrog

    no problem.

  11. #11
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again, stereofrog. I don't think I installed version 2 correctly, as the images don't display at:
    http://test.kripalu.org/index_rotate.php

    Here's what I did:

    1) referenced version 2

    Code:
     var rotImg = [];
    (rotImg[0] = new Image()).src = "/uploads/images/1349574951_feature.jpg"
    (rotImg[1] = new Image()).src = "/uploads/images/138522763_04_03_home_page.jpg"
    (rotImg[2] = new Image()).src = "/uploads/images/2000146464_04_04_home_page.jpg"
    var rotPos = -1;
    var rotTime = 600;
    function rotate() {
    var img = rotImg[rotPos = (rotPos + 1) % rotImg.length];
    if(img.complete)
    document.images["rotate"].src = img.src;
    setTimeout("rotate()", rotTime);
    }
    window.onload = rotate;
    2) from within the <head></head> tags as:
    Code:
     <script src="/js/rotate.js" type="text/javascript"></script>
    3) calling it from within the body by commenting out the old version and adding the new one as:
    Code:
    <!-- rotate_v1.js <div id="rotDIV"></div> -->
    <!-- rotate_v2.js --><img name="rotate">
    Shouldn't I have a <div id="something"></div> in there? I don't see anything in the code it would relate to. Where am I going wrong?
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  12. #12
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is here:

    (rotImg[0] = new Image()).src = "/uploads/images/1349574951_feature.jpg";

    Semicolon is mandatory, my bad, sorry.

  13. #13
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks stereofrog. That works. I'll run it up the flagpole.
    Paul C.
    ClickBasics
    http://www.clickbasics.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •