Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 3 123 LastLast
Results 1 to 15 of 34
  1. #1
    New Coder
    Join Date
    Oct 2005
    Location
    Bowmanville, Canada
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to get images to change by themselves (JavaScript Problem)

    Hello everyone. Ok, here's the problem. Basically what I would like to happen is, is to have pictures set up, and when you click on a link a new window pops up (this part I already have done, it's the next part I need help with). Then the pictures that I have for my website, will start to scroll though themselves at timed intervals (say 2 - 3 seconds) and will continue to do so until the window is closed, so basically forever. Like I said before though, the pictures should change by themselves without user interaction and without the aid of buttons to change the pictures and such. I have been trying to get this right for some time now, and to no avial, nothing is working. I would extremely appreciate anyone's help, or for even someone to give me (or direct me to) the proper coding I should be using. Any help is appreciated. Thank you for your time.

    - Cory

    P.S. If you do not understand something I've put, or need more information on the problem to help me, feel free to post a reply, or if you would like a quicker response from me, you can reach me at cdallin_77@hotmail.com Thanks once again.
    Last edited by electric_4_ever; 10-15-2005 at 03:59 PM.

  • #2
    Senior Coder
    Join Date
    Apr 2005
    Posts
    1,051
    Thanks
    0
    Thanked 0 Times in 0 Posts
    post what you have now and i'll help.
    public string ConjunctionJunction(string words, string phrases, string clauses)
    {
    return (String)(words + phrases + clauses);
    }
    <--- Was I Helpfull? Let me know ---<

  • #3
    New Coder
    Join Date
    Oct 2005
    Location
    Bowmanville, Canada
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, well here is the coding that I am using. For some reason though, the pictures will not rotate past the 9th picture, for the 10th, 11th, and 12th, nothing happens. thats really the only problem that I need fixed. Thanks. If you need any more info, let me know

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">


    <HTML>
    <HEAD>
    <CENTER>

    <script language="javascript">
    <!-- window =
    window.moveTo(200, 10)
    window.resizeTo(600, 710)
    //-->
    </script>

    <TITLE>Pantera In Concert With Slayer</TITLE>
    <script language="JavaScript">
    <!-- hide from other browsers

    //Pictures to switch in between

    var Rollpic1 = "Pic1.jpg";
    var Rollpic2 = "Pic2.jpg";
    var Rollpic3 = "Pic3.jpg";
    var Rollpic4 = "Pic4.jpg";
    var Rollpic5 = "Pic5.jpg";
    var Rollpic6 = "Pic6.jpg";
    var Rollpic7 = "Pic7.jpg";
    var Rollpic8 = "Pic8.jpg";
    var Rollpic9 = "Pic9.jpg";
    var Rollpic10 = "Pic10.jpg";
    var Rollpic11 = "Pic11.jpg";
    var Rollpic12 = "Pic12.jpg";

    //Start at the what pic:
    var PicNumber=1;
    //Number of pics:
    var NumberOfPictures=12;
    //Time between pics switching in secs
    var HowLongBetweenPic=3;

    //SwitchPic Function
    function SwitchPic(counter){

    if(counter < HowLongBetweenPic){

    counter++;

    //DEBUG in the status bar at the bottom of the screen
    window.status="Switch picture at 3 : "+counter+" PicNumber: "+PicNumber+" ";

    //Display pic in what <IMG> tag roll is what I called the image
    document.roll.src = eval("Rollpic" + PicNumber);

    //function calls itself
    CallSwitchPic=window.setTimeout("SwitchPic("+counter+")",1500);

    }

    else{
    //if its not the last picture goto the next picture
    if(PicNumber < NumberOfPictures){
    PicNumber++;
    SwitchPic(0);
    }
    //its the last picture go to the first one
    else{
    PicNumber=1;
    SwitchPic(0);
    }

    }

    }
    // Stop hiding from old browsers -->
    </script>
    </HEAD>

    <BODY onload="SwitchPic(0)">


    <img src="1.jpg" border="0" name="roll">

    </script>
    </CENTER>
    </BODY>
    </HTML>

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Try this

    PHP Code:
    <HTML>
    <
    HEAD>

    <
    TITLE>Pantera In Concert With Slayer</TITLE>

    <
    script type="text/javascript">
    <!-- 

    //Pictures to switch in between
    var Rollpic1 "Pic1.jpg";
    var 
    Rollpic2 "Pic2.jpg";
    var 
    Rollpic3 "Pic3.jpg";
    var 
    Rollpic4 "Pic4.jpg";
    var 
    Rollpic5 "Pic5.jpg";
    var 
    Rollpic6 "Pic6.jpg";
    var 
    Rollpic7 "Pic7.jpg";
    var 
    Rollpic8 "Pic8.jpg";
    var 
    Rollpic9 "Pic9.jpg";
    var 
    Rollpic10 "Pic10.jpg";
    var 
    Rollpic11 "Pic11.jpg";
    var 
    Rollpic12 "Pic12.jpg";


    var 
    speed=//Time between pics switching in secs
    var NumberOfPictures=12 //Number of pics:

    var PicNumber=1

    function SwitchPic(){

    document.roll.src window["Rollpic" PicNumber]

    PicNumber++

    if(
    PicNumber NumberOfPictures){
    PicNumber=1
    }


    CallSwitchPic=setTimeout("SwitchPic()",speed*1000)
    }

    window.moveTo(20010)
    window.resizeTo(600710)

    //-->
    </script> 
    </HEAD>
    <BODY onload="SwitchPic()">

    <CENTER>

    <img src="1.jpg" border="0" name="roll">


    </CENTER>

    </BODY>
    </HTML> 
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #5
    New Coder
    Join Date
    Oct 2005
    Location
    Bowmanville, Canada
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ya, that coding didn't work for some reason. Thanks all the same though.

  • #6
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,265
    Thanks
    6
    Thanked 48 Times in 48 Posts
    Not that good with javascript, but wouldn't it make more sense to put the images in an array?

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    ya, that coding didn't work for some reason. Thanks all the same though.
    Not a very helpful reply, how exactly did it not work

    I tried it in IE6, Mozilla, Firefox, and NS7

    It is more common to use an array than ordinal numbered variables and would be something like this

    PHP Code:
    <HTML
    <
    HEAD

    <
    TITLE>Pantera In Concert With Slayer</TITLE

    <
    script type="text/javascript"
    <!--  

    Rollpic= new Array()

    Rollpic[0] = "Pic1.jpg"
    Rollpic[1] = "Pic2.jpg"
    Rollpic[2] = "Pic3.jpg"
    Rollpic[3] = "Pic4.jpg"
    Rollpic[4] = "Pic5.jpg"
    Rollpic[5] = "Pic6.jpg"
    Rollpic[6] = "Pic7.jpg"
    Rollpic[7] = "Pic8.jpg"
    Rollpic[8] = "Pic9.jpg"
    Rollpic[9] = "Pic10.jpg"
    Rollpic[10] = "Pic11.jpg"
    Rollpic[11] = "Pic12.jpg"


    var 
    speed=//Time between pics switching in secs 

    var PicNumber=0

    function SwitchPic(){ 

    document.roll.src Rollpic[PicNumber

    PicNumber++ 

    if(
    PicNumber == Rollpic.length){ 
    PicNumber=



    CallSwitchPic=setTimeout("SwitchPic()",speed*1000


    window.moveTo(20010
    window.resizeTo(600710

    //--> 
    </script>  
    </HEAD> 
    <BODY onload="SwitchPic()"> 

    <CENTER> 



    <img src="Pic1.jpg" border="0" name="roll"> 


    </CENTER> 

    </BODY> 
    </HTML> 
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #8
    Senior Coder
    Join Date
    Apr 2005
    Posts
    1,051
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have a nice script that not only scroll through the images, it fades between them.

    seen here @ www.rlemon.com (webdesign)
    public string ConjunctionJunction(string words, string phrases, string clauses)
    {
    return (String)(words + phrases + clauses);
    }
    <--- Was I Helpfull? Let me know ---<

  • #9
    New Coder
    Join Date
    Oct 2005
    Location
    Bowmanville, Canada
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok, the coding is not working for some reason. none of it. none of the pictures show up now. in the coding that I supplied, pictures 1 through 9 will show up and scroll through themselves like they should. all i need is someone to help make the coding work so that picture #'s 10,11, and 12, will show up and scroll through with the rest of the sequence. all thats happening is when it gets to #'s 10, 11 and 12, it just stays blank, and when their "turn" for "showing up" is over, it goes back to the beginning of the loop and starts again. which is what its supposed to do, its just, like i said, 10,11,and 12, wont show up.
    Last edited by electric_4_ever; 10-16-2005 at 09:07 PM.

  • #10
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Try the files in the attachment
    Attached Files Attached Files
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #11
    Senior Coder
    Join Date
    Apr 2005
    Posts
    1,051
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok let me extract the code from my JS file for the site and i'll post it.
    Note, it looks like i've lost the hard copy of it, so this copy will be formatted ugly (i.e i removed whitespace to save room).
    public string ConjunctionJunction(string words, string phrases, string clauses)
    {
    return (String)(words + phrases + clauses);
    }
    <--- Was I Helpfull? Let me know ---<

  • #12
    Senior Coder
    Join Date
    Apr 2005
    Posts
    1,051
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image Scroller / Fader by rlemon.com

    ok, here it is. include this code exactly where i tell you too:

    in the header:
    Code:
    <style type="text/css" media="all">
    
    #photoholder { width:153px; height:130px; background:#fff url('res/loading.gif') 100% 100% no-repeat;}
    #thephoto {	width:153px; height:130px; border: 1px solid #000000; z-index: 1; position: absolute;}
    #thebackground { z-index: 0; width:153px; height:130px;	border: 1px solid #000000;}
    
    </style>
    The next peice of code is optional. it is the image preloader script i got from DreamWeaver. it is pretty simple and i'm sure you could have found it somewhere else. but here it is:

    Code:
    <SCRIPT language="javascript">
    <!--
    function MM_preloadImages() {
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    //-->
    </SCRIPT>
    The following is the gallery functions. this must also go in the header:

    Code:
    <script language="Javascript" type="text/javascript">
    
    // IMAGE SCROLLER
    var img = new Array('image1.jpg','image1.jpg','image3.jpg','image4.jpg','EOF');
    var current = 0; // start image
    var imgPath = "path/to/Image/";
    var previous = "null";
    var to;
    var isLoading = 0;
    var looping = 1;
    function run_gal(interval, loopCount){
    	if(looping <= loopCount){
    	next_img();
    	looping++;
    	window.setTimeout(function() {run_gal(interval, loopCount)}, (interval*1000));
    	} else {
    	looping = 0;
    	}
    }
    
    function next_img() { if(isLoading == 0){ imageId = 'thephoto'; backgroundId = 'thebackground'; bg = document.getElementById(backgroundId); image = document.getElementById(imageId); if(current >= 1){if(img[current] != "EOF"){previous = (current-1);} else { previous = (current-1); current = 0;}}
    if(previous == "null"){previous = 0;} else {bg.src=imgPath+img[previous];} image.src=imgPath+img[current]; current++;
    setOpacity(image, 0); image.style.visibility = 'visible'; fadeIn(imageId,0);}
    return;}
    function setOpacity(obj, opacity) { opacity = (opacity == 100)?99.999:opacity; obj.style.filter = "alpha(opacity:"+opacity+")"; obj.style.KHTMLOpacity = opacity/100; obj.style.MozOpacity = opacity/100; obj.style.opacity = opacity/100;}
    function fadeIn(objId,opacity) { if (document.getElementById) { obj = document.getElementById(objId); if (opacity <= 100) { setOpacity(obj, opacity); opacity += 10; toRate = 50; if(current == 0){ toRate = 0;}
    to = setTimeout("fadeIn('"+objId+"',"+opacity+")", 50); isLoading = 1;} else { isLoading = 0;}
    }
    }
    
    </script>
    configuring of the code above:

    the only things you should need to alter in the JS is the config i have setup:

    Code:
    var img = new Array('image1.jpg','image1.jpg','image3.jpg','image4.jpg','EOF');
    The image array is where all the images you will be scrolling through will be stored. The image names must not include their directory, that is defined below. Example, if the image is stored in "images/image1.gif" in the array you would enter "image1.gif".
    Also note, the array must end with the value 'EOF' (end of file). i know this probably isn't the best way to do this, but the image scroller was eventually spossed to have controls to it, so i set it up this way... so for simplicity sake, just make sure the last array value is 'EOF'

    Code:
    var current = 0; // start image
    This is the image position you wish to start on, generally this should be left as '0' (remember, the array keys start at 0 not 1).

    Code:
    var imgPath = "path/to/Image/";
    This is the path to the images directory. Do not include the entire url if you do not need too. If the images are stored in a folder from the root a simple "folderName/" will work. Note, there must be a trailing slash on this! i.e "folderName" is incorrect, "folderName/" will work.

    Code:
    var previous = "null";
    var to;
    var isLoading = 0;
    var looping = 1;
    The rest of this code should not be changed. From what you have written it should be fine as is.


    The last two things you will need (one if you did not include the image preloader), is the init call from the body onload and the physical html for the gallery.
    First we will do the call to the function.

    in the body tag add the following attributes.

    Code:
    onLoad="setTimeout(function(){run_gal('5','99')},1000)"
    you will notice two values are being passed to the function in this call. if you look at the function you will see this is the interval (for the image scrolling) in seconds, and the number of passes you want it to do. Right now the image will change ever 5 seconds and it will pass through 99 times (repeating images where applicable). This is nice if you want to only show a selective number of images for say, a instructions slideshow? if you want this to appear endless just set the second number to 99 (like what i have done).

    Now, if you wanted to preload these images (to allow them to load faster), you will need to change the attribute above slightly, and append the following :

    Code:
    onLoad="setTimeout(function(){run_gal('5','99')},1000); MM_preloadImages('path/to/image1.jpg','path/to/image1.jpg','path/to/image3.jpg','path/to/image4.jpg');"
    Note, thisis where you must include the path to the images. Not the url, the path. I.E
    www.yourDomain.com/images/image1.jpg
    is WRONG

    images/image1.jpg
    is RIGHT


    and now for the html:

    Code:
    			<div id='photoholder'>
    			<img src='res/blank.gif' alt='Photo' id='thephoto' />
    
    			<img src='res/blank.gif' alt='Photo' id='thebackground' />
    			</div>
    ohh, and here is a link to the two images i have left in here (blank.gif, and loading.gif) you can replace them if you please.

    http://rlemon.com/new_sites/grl/res/blank.gif <-- blank.gif
    http://rlemon.com/new_sites/grl/res/loading.gif <-- loading.gif

    if you are having trouble installing this script post your code and i'll take a look.
    public string ConjunctionJunction(string words, string phrases, string clauses)
    {
    return (String)(words + phrases + clauses);
    }
    <--- Was I Helpfull? Let me know ---<

  • #13
    New Coder
    Join Date
    Oct 2005
    Location
    Bowmanville, Canada
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok, before i try all this coding, i just want to know, does it matter what type of image files you use? will it work with .jpg files? or only .gif?

  • #14
    Senior Coder
    Join Date
    Apr 2005
    Posts
    1,051
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hrmm, i thought having a jpg in the example array would have awnsered that

    but yes jpg is supported, i havn't attempted to run any bmp's or png's in it, but jpg and gif are both supported.

    I also have a thumbnail generator in php (laggy) if you are interested.
    public string ConjunctionJunction(string words, string phrases, string clauses)
    {
    return (String)(words + phrases + clauses);
    }
    <--- Was I Helpfull? Let me know ---<

  • #15
    New Coder
    Join Date
    Oct 2005
    Location
    Bowmanville, Canada
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    alright. thanks. as soon as i get a break from my homework *rolls eyes*, i will try the coding and get back to you and let you know if it works or not. thanks once again


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

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