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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing images in an array

    i have been modifying some javascript i found to change images.

    below are two example pages.

    I want the image to change when the user clicks the left or right arrow under the picture.

    However, i am finding the 'PREV' (<) arrow doesn't work until the user clicks the 'NEXT' (>) arrow. then it works fine. also, the user sometimes has to click the 'NEXT' arrow twice before it responds. I can't work out why. Should i be preloading the images?

    http://uoregon.edu/~josh/gallery_js/bench.html

    http://uoregon.edu/~josh/gallery_js/light.html

    and the javascript:

    http://uoregon.edu/~josh/gallery_js/gallery.js

    any ideas?

    thanks.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    	<SCRIPT LANGUAGE="JavaScript" SRC="http://uoregon.edu/~josh/gallery_js/gallery.js"></SCRIPT>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    var imageArray=new Array();
    var numImages = 0;
    
    function loadImageArray(picnum,projectName)
    {
    	for (i=0; i<picnum; i++)
    	{
    		imageArray[i]=new Image();
    		imageArray[i].src="http://uoregon.edu/~josh/gallery_js/images/"+projectName+(i+1)+".jpg";
    	}
    	numImages = picnum;
    }
    loadImageArray('3','campbench');
    
    var curImage=0;
    var nextImage=0;
    
    function swapImage(direction)
    {
    	if (document.images)
    	{
    		if(direction == "NEXT")
    		{
    			nextImage=curImage+1;
    			if (nextImage>=numImages)
    				nextImage=0;
    			if (nextImage == -1)
    				nextImage = numImages-1;
    		}
            else if(direction == "PREV"){
    			nextImage=curImage-1;
    			if (nextImage>=numImages)
    				nextImage=0;
    			if (nextImage == -1)
    				nextImage = numImages-1;
    		}else if(direction == ""){
    				nextImage=0;
    		}
        if (imageArray[nextImage] && imageArray[nextImage].complete)
        {
          var target=null;
          if (document.images.MainImage)
            target=document.images.MainImage;
          if (document.all && document.getElementById("MainImage"))
            target=document.getElementById("MainImage");
    
          target.src=imageArray[nextImage].src;
          curImage=nextImage;
        }
      }
    }
    
    
    /*]]>*/
    </script></head>
    
    <body>
    
    
    	<div id="content">
    		<IMG SRC="http://uoregon.edu/~josh/gallery_js/images/campbench1.jpg" ID="MainImage" NAME="MainImage" width="590" height="444" alt="Camp/Bench"></IMG>
    
    		<div id="arrows"><a href="javascript:swapImage('PREV');"><</a> <a href="javascript:swapImage('NEXT');">></a></div>
    	</div>
    
    </div>
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

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