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.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2008
    Location
    San Francisco, CA
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Problem with coding multiple slideshows using one script.

    Ok, so first please tell me if I am in the wrong area and I will quickly move this thread elsewhere.

    Im fairly new to javascript and am completely self taught so I know I am missing a lot of basics. I created a script that I use to easily create a slideshow using images named 1 through 6.jpg or other extension I specify that are saved inside a particular folder. The following is an example of working script for a single slideshow with a 2 second delay.

    Code:
    <script type="text/javascript">
    var o="/Images/Work/Locations/numbers/"
    var p=0
    var q=".jpg"
    
    
    function gallery()
    {
    	if (p==6){
    	p=1;
    	document.getElementById('Slide-Show').src = o+1+q;
    	}
    	else {
    	p=p+1;
    	document.getElementById('Slide-Show').src = o+p+q;
    	}
    setTimeout("gallery()",2000)
    }
    
    -->
    </script>
    
    
    <body onLoad="gallery()">
    
    <img id="Slide-Show" height="200" width="200" src="/Images/Work/Locations/numbers/1.jpg">
    
    </body>
    </html>
    Simple right? I know. But what I want to do is create an array for the 'Slide-Show' portion of ".getElementById('Slide-Show').src" to run several slideshows at once, reducing the amount of redundant script on my page. I created an Array, "id", with several portions of URL to direct the script to the appropriate folder depending on which slideshow is started, figuring I could somehow call the function using the "onClick" in a link next to the image starting the slideshow and passing the variable from it as well, I just don't know how. Here is what I have so far..

    Code:
    <script type="text/javascript">
    
    
    function changeLoc(newLoc){
    var Services="/images/Loc-Services.jpg";
    var Portfolio="/images/Loc-Portfolio.jpg";
    	document.getElementById('locImage').src = newLoc;
    }
    
    
    var a="/Images/Work/Locations/gibberish/"
    var b="/Images/Work/Locations/letters/"
    var o="/Images/Work/Locations/numbers/"
    var p=0
    var q=".jpg"
    var id = new Array();
    id[0] = "Slide-Show";
    id[1] = "Slide-Show2";
    id[2] = "Slide-Show3";
    
    
    function gallery(type){
    
    
    	if (p==6){
    	p=1;
    	document.getElementById(id).src = type+1+q;
    	}
    	else {
    	p=p+1;
    	document.getElementById(id).src = type+p+q;
    	}
    setTimeout("gallery()",500)
    }
    -->
    </script>
    <body>
    
    <img border="0" id="Slide-Show" height="200" width="200" src="/Images/Work/Locations/numbers/1.jpg"><a style="text-decoration:none" onClick="gallery(o)" href="#test">Begin this slide-show.</a>
    </body>
    </html>
    I have spent HOURS researching arrays, calling functions and passing variables on several sites and can't find anything remotely dealing with what I am looking for.

    I really appreciate ANY help you can give, and thank you in advance for your time.

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    What's the content of id? You should have set it first:
    Code:
    function gallery(type){
    var id='Slide-Show';
    
    	if (p==6){
    	p=1;
    	document.getElementById(id).src = type+1+q;
    	}
    	else {
    	p=p+1;
    	document.getElementById(id).src = type+p+q;
    	}
    setTimeout("gallery()",500)
    }
    Hope it helps.
    Last edited by rangana; 07-18-2008 at 07:12 AM.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    New to the CF scene
    Join Date
    Jul 2008
    Location
    San Francisco, CA
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you very much for looking at my script, however it looks like you are suggesting defining "id" as "Slide-Show", which is not what I want to do. I accomplished that with the first section of code I posted.

    I want to be able to click a link on the page that has several different slideshows controlled by this single script. Thereby solving the redundancy of having several copies of the same script called separately by different slideshows.

    The onClick should call the function gallery(); and somehow tell Array "id" whether "Slide-Show", "Slide-Show1" or "Slide-Show2"... Was called. (unless there is a better way to do this of course.)

    Actually, a thought just occured to me. I can pass 2 variables while calling a function right? Does calling the function with 2 parameters work? "gallery(id, type)" for instance?

    with several portions of URL to direct the script to the appropriate folder depending on which slideshow is started, figuring I could somehow call the function using the "onClick" in a link next to the image starting the slideshow and passing the variable from it as well, I just don't know how. Here is what I have so far..

    Code:
    <script type="text/javascript">
    
    
    function changeLoc(newLoc){
    var Services="/images/Loc-Services.jpg";
    var Portfolio="/images/Loc-Portfolio.jpg";
    	document.getElementById('locImage').src = newLoc;
    }
    
    
    var a="/Images/Work/Locations/gibberish/"
    var b="/Images/Work/Locations/letters/"
    var o="/Images/Work/Locations/numbers/"
    var p=0
    var q=".jpg"
    
    function gallery(id,type){
    
    
    	if (p==6){
    	p=1;
    	document.getElementById(id).src = type+1+q;
    	}
    	else {
    	p=p+1;
    	document.getElementById(id).src = type+p+q;
    	}
    setTimeout("gallery()",500)
    }
    -->
    </script>
    <body>
    
    <img border="0" id="Slide-Show" height="200" width="200" src="/Images/Work/Locations/numbers/1.jpg"><a style="text-decoration:none" onClick="gallery('Slide-Show',o)" href="#test">Begin this slide-show.</a>
    <img border="0" id="Slide-Show1" height="200" width="200" src="/Images/Work/Locations/letters/1.jpg"><a style="text-decoration:none" onClick="gallery('Slide-Show1',b)" href="#test">Begin this slide-show.</a>
    <img border="0" id="Slide-Show2" height="200" width="200" src="/Images/Work/Locations/gibberish/1.jpg"><a style="text-decoration:none" onClick="gallery('Slide-Show2',o)" href="#test">Begin this slide-show.</a>
    </body>
    </html>
    I need to test this out when I get back to work. But let me know what you think.


  •  

    Posting Permissions

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