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 8 of 8

Thread: Super Simple?

  1. #1
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Super Simple?

    hey guys, first timer here =D

    trying to add some javascript to my online portfolio.

    so im trying to make a gallery, where you can cycle through my images.

    I figured i could accomplish this by creating a string array (named img) and using onClick functions to update your location in the array.

    Below is currently what i have come up with.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    <title>Untitled</title>
    <script language='javascript' type="text/javascript">
    var img = new Array("razor1.jpg", "razor2.jpg");
    var desc = new Array("a", "b");
    var picindex = 1;
    function next(){
     if(document.getElementById) {
      document.getElementById('placeholder').src = img[picindex];
      document.getElementById('d').innerHTML = desc[picindex];
    	picindex=picindex+1;
    	if(picindex==img.length){
    	picindex=0;
    	}
      return false;
     } else {
      return true;
     }
    }
    
    function prev(){
     if(document.getElementById) {
      document.getElementById('placeholder').src = img[picindex];
      document.getElementById('d').innerHTML = desc[picindex];
    	picindex=picindex-1;
    	if(picindex==img.length){
    	picindex=0;
    	}
      return false;
     } else {
      return true;
     }
    }
    
    </script>
    
    <link rel="stylesheet" href="deco.css" type="text/css" media="screen" />
    </head>
    <body>
    
    <div id="container">
    
    	<div>
    		<img src="razor1.jpg" id="placeholder" alt="">
    	</div>
    
    	<div id="d">
    		a
    	</div>
    		<P><a href="#" onclick="next();" id="link">Next</a></p>
    		<P><a href="#" onclick="prev();" id="link">Back</a></p>
    	
    
    </div>
    
    
    </body>
    </html>
    sorry if the code is too long!

    You can view it in action over at my webpage.
    Here


    there is probably an easier way to do this entire project, if so, please enlighten me, but if this is going good here is my problem.

    I want to be able to stop the onClick function once I reach the end of the array, or when I am at the beginning.(meaning, if i am at the end, the next button should not work)

    Thank you in advance for your time!

  • #2
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    All you really need to do is disable the function once it reaches that point. Add this as the very first thin in next()
    Code:
    if(picindex == img.length){
         return false;
    }else{
         //the rest of your code goes here
    }
    And this to prev()
    Code:
    if(picindex == 0){
         return false;
    }else{
         //the rest of your code goes here
    }

  • #3
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hey, i tried this, but it still CHANGES the picindex number either + or - , but instead it just doesnt show the image, or says undefined.

    so im thinking, is there a way to determine what the picindex is BEFORE the function happens, like

    if the picindex == 0 return false, else RUN THE FUNCTION.

    that would work right?

  • #4
    Regular Coder
    Join Date
    Sep 2007
    Location
    AZ, USA
    Posts
    685
    Thanks
    6
    Thanked 46 Times in 46 Posts
    Yes, if I'm not mistaken that's pretty much what he meant by
    //the rest of your code goes here

  • #5
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    http://babel.massart.edu/~jdegruttol...r/testthis.htm

    =\

    still operates poorly..

    more thinkin' me do!

  • #6
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    I made these changes to your functions:

    Code:
    if(picindex > img.length){
         picindex = img.length;
         return false;
    }else{
         //the rest of your code goes here
    }

    Code:
    if(picindex < 0){
         picindex = 0;
         return false;
    }else{
         //the rest of your code goes here
    }
    I also modified both your functions
    Code:
    function next(){
            ++picindex
    	if(picindex>img.length){
    	picindex == img.length;
            return false;
    	}
    	else
    	{
    	 document.getElementById('placeholder').src = img[picindex];
    	document.getElementById('d').innerHTML = desc[picindex];
    	}
    	}
    
    function prev(){
            --picindex
    	if(picindex < 0){
             picindex = 0;
             return false;
    	}
    	else
    	{
    	document.getElementById('placeholder').src = img[picindex];
    	document.getElementById('d').innerHTML = desc[picindex];
    	}
    	}

  • #7
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you very much for this, but!

    when i click the next button to the end of the array, then click it once more to see if it stopped, it will display the last image in the array, then for a descript it will say 'undefined'

    then it will sieze working!

    =\

    ive tried moving the ++picindex to different places, even erasing it, but to no avail.

  • #8
    New Coder
    Join Date
    Jun 2008
    Posts
    81
    Thanks
    2
    Thanked 16 Times in 16 Posts
    Hi,

    It works with a couple of modifications to the code just above:

    Code:
    function next(){
      ++picindex;
      if(picindex == img.length){
        picindex = img.length - 1;
    And just make sure the picindex variable is initiated to 0 (not 1) at the top of the script.


  •  

    Posting Permissions

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