www.webdeveloper.com
Results 1 to 3 of 3

Thread: multiple image arrays interfere with each other

Hybrid View

  1. #1
    Join Date
    Jul 2012
    Posts
    7

    multiple image arrays interfere with each other

    Hi,

    I was wondering how to have multiple image arrays in a page so that each has a different set of images allocated to it. The image array also has to be clickable to move onto the next image and have next and previous button links. Most of this I've already done its just the arrays interfering with each other that gives me problems. So on clicking next each will show the images from only one given array. I think it may be to do with giving each a specific ID somehow but I'm pretty unsure on how to do that..

    The scripts I'm using are below with part of the site and some dummy images of a friends work. I just need to get the arrays working properly and have been trying for ages by myself.. I'm probably missing something incredibly simple..

    Thanks in advance to anyone who answers back! Any kind of help is welcomed,
    Max



    Code:
    <script language="JavaScript">
    
    /* Here you make an array with all the URL's of the images you would like to have in your slideshow.*/
    
    var image = new Array("http://www.johnbarton.co.uk/Uploads/Jade&Michael/J&M2.jpg", "http://www.johnbarton.co.uk/Uploads/Jade&Michael/J&M6.jpg", 
    "http://www.johnbarton.co.uk/Uploads/Jade&Michael/J&M7.jpg")
    
    var imgNumber=1
    
    /* This number is used to refer to a value of the Array and to know what image should be shown next. */
    
    var numberOfImg = image.length
    
    /* This is the total amount of images you use, it is used to determine if the imgNumber can still grow. */
    
    
    /* Now it's time to make the functions for the next and previous buttons */
    
    function previousImage(){
    if(imgNumber > 1){
    imgNumber--
    }
    
    /* The if statement is used to know if you aren't already at the first image, because if you are, imgNumber may not decrease. */
    
    else{
    imgNumber = numberOfImg
    }
    
    /* If you already are at the first image, and you click the previous button, the slideshow must show the last image. */
    
    
    document.slideImage.src = image[imgNumber-1]
    
    /* Load the image into the document. Don't forget to write imgNumber-1, an array always starts from 0! */
    
    }
    function nextImage(){
    if(imgNumber < numberOfImg){
    imgNumber++
    }
    
    /* The if statement is used to know if you aren't already at the last image, because if you are, imgNumber may not increase. */
    
    else{
    imgNumber = 1
    }
    
    /* If you already are at the last image, and you click the next button, the slideshow must show the first image. */
    
    document.slideImage.src = image[imgNumber-1]
    
    /* Load the image into the document. Don't forget to write imgNumber-1, an array always starts from 0! */
    
    }
    
    </script><!--Imagearray1-->
    
    <script language="JavaScript">
    
    /* Here you make an array with all the URL's of the images you would like to have in your slideshow.*/
    
    var image = new Array("http://www.johnbarton.co.uk/Uploads/Terralec/Te0", "http://www.johnbarton.co.uk/Uploads/Terralec/Te5.jpg", 
    "http://www.johnbarton.co.uk/Uploads/Terralec/Te7.jpg")
    
    var imgNumber=1
    
    /* This number is used to refer to a value of the Array and to know what image should be shown next. */
    
    var numberOfImg = image.length
    
    /* This is the total amount of images you use, it is used to determine if the imgNumber can still grow. */
    
    
    /* Now it's time to make the functions for the next and previous buttons */
    
    function previousImage1(){
    if(imgNumber > 1){
    imgNumber--
    }
    
    /* The if statement is used to know if you aren't already at the first image, because if you are, imgNumber may not decrease. */
    
    else{
    imgNumber = numberOfImg
    }
    
    /* If you already are at the first image, and you click the previous button, the slideshow must show the last image. */
    
    
    document.slideImage1.src = image[imgNumber-1]
    
    /* Load the image into the document. Don't forget to write imgNumber-1, an array always starts from 0! */
    
    }
    function nextImage1(){
    if(imgNumber < numberOfImg){
    imgNumber++
    }
    
    /* The if statement is used to know if you aren't already at the last image, because if you are, imgNumber may not increase. */
    
    else{
    imgNumber = 1
    }
    
    /* If you already are at the last image, and you click the next button, the slideshow must show the first image. */
    
    document.slideImage1.src = image[imgNumber-1]
    
    /* Load the image into the document. Don't forget to write imgNumber-1, an array always starts from 0! */
    
    }
    
    </script><!--Imagearray2-->
    
    
    </head>
    
    <body>
    <div id="contentcentre">
    
    <div id="content">
    
    <div id="bigspace">
    </div>
    
    <!--projectstart-->
    <div id="title" onclick="javascript:animatedcollapse.toggle('profile')">
    <span style=color:#FC0;>Project</span>
    </div>
    
    <div id="space">
    </div>
    
    <div id="profile">
    
    <div>
    <img src="http://www.johnbarton.co.uk/Uploads/Jade&Michael/J&M2.jpg" name="slideImage" onclick="nextImage();"alt="Graze"/>
    </div>
    
    <p></p>
    
    <span style="color: #333;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet cursus nunc, vel semper elit tempor in. Aenean a mauris ac purus sagittis laoreet. <br/>
    &ndash;
    <br/>
    
    <span style="color: #FC3;"><a href="JavaScriptreviousImage()"><</a></span> /
    <span style="color: #FC3;"><a href="JavaScript:nextImage()">></a></span>
    
    </span>
    
    <span style="text-align: right; color:#333"><a href="">fullscreen</a></span>
    
    <p></p>
    
    </div>
    
    </div>
    
    <!--projectend-->
    
    <div id="content">
    
    <!--projectstart-->
    <div id="title" onclick="javascript:animatedcollapse.toggle('project1')">
    <span style=color:#666; margin:10px;>Showboating</span>
    </div> 
    
    </div>
    
    <div id="space">
    </div>
    
    <div id="project1" style="width: 750px; display:none">
    <div>
    <img src="http://www.johnbarton.co.uk/Uploads/Terralec/Te0" name="slideImage1" onclick="nextImage1();"alt="Graze"/> 
    </div>
    <p></p>
    
    <span style="color: #333;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet cursus nunc, vel semper elit tempor in. Aenean a mauris ac purus sagittis laoreet. <br/>
    &ndash;
    <br/>
    
    <span style="color: #FC3;"><a href="JavaScriptreviousImage1()"><</a></span> /
    <span style="color: #FC3;"><a href="JavaScript:nextImage1()">></a></span>
    
    </span>
    
    <span style="text-align: right; color:#333"><a href="">fullscreen</a></span>
    
    <p></p>
    
    </div>
    
    </div>
    
    <!--projectend-->
    
    </div>
    
    </div>
    
    </body>
    </html>

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <script type="text/javascript">
    <!--
    var ary=[
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg',
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg',
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg'
    ];
    
    var ary2=[
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg',
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg',
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg'
    ];
    
    function Slide(id,ary,nu){
     document.getElementById(id).src=ary[nu];
     Slide[id]={nu:nu};  // create a function Slide[id] object with a property of nu recording the current image number
    }
    
    function nextImage(id,ary,ud){
      var nu=(Slide[id]&&Slide[id].nu?Slide[id].nu:0)+ud,lgth=ary.length-1;  // if the function Slide[id] object exists use that or use 0 and add ud
      Slide(id,ary,nu<0?lgth:nu>lgth?0:nu);
    }
    
    //-->
    </script>
    
    
    
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" name="previous" height="46" width="46"  onmouseup="nextImage('slideshow',ary,-1);" id="previous"/>
    
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" name="next" height="46" width="46"  onmouseup="nextImage('slideshow',ary,1)" id="next"/>
    
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" name="slide" id="slideshow"/>
    <a class="slide1" onclick="javascript:Slide('slideshow',ary,0);">1 </a>
    <a class="slide2" onclick="javascript:Slide('slideshow',ary,1);">2 </a>
    <a class="slide3" onclick="javascript:Slide('slideshow',ary,2);">3 </a>
    <br />
    
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" name="previous" height="46" width="46"  onmouseup="nextImage('slideshow2',ary2,-1);" />
    
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" name="next" height="46" width="46"  onmouseup="nextImage('slideshow2',ary2,1)" />
    
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" name="slide2"  id="slideshow2"/>
    <a class="slide1" onclick="javascript:Slide('slideshow2',ary2,0);">1 </a>
    <a class="slide2" onclick="javascript:Slide('slideshow2',ary2,1);">2 </a>
    <a class="slide3" onclick="javascript:Slide('slideshow2',ary2,2);">3 </a>
    </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/

  3. #3
    Join Date
    Jul 2012
    Posts
    7
    Thanks! that was really helpful!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles