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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    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



    <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
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,023
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Well, of course they do. You gave them the same name.

    Why are you reinventing the wheel? There are tons of slideshows out there for free use, most of the more sophisticated than this.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,023
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    You know, your HTML is totally illegal in several ways.

    It would help you *TONS* if you would properly indent your code.

    Here is your HTML re-indented:
    Code:
    <body>
    <div id="contentcentre">
        <div id="content">
            <div id="bigspace"></div>
            <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>
    <div id="content">
        <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="JavaScript:previousImage1()"><</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>
    </div>
    </div>
    
    </body>
    The stuff in red indicates errors. I probably didn't get them all.

    You have WAY more </div>s than you have <div>s.

    You have used the same ID more than once.

    Although this kind of stuff still works:
    <a href="JavaScript:previousImage1()">
    it's been long considered obsolete.

    You should be doing
    Code:
    <a href="#" onclick="previousImage1(); return false;">
    But, really, with modern browsers there's no reason at all to use an <a> for that.

    Just do:
    Code:
    <span style="color: #FC3;" onclick="previousImage1()"><</span>
    Oh...and <script language="..."> is long obsolete, as well.

    **********

    Anyway, you first fix your HTML to be legal and then I'll show you how to get the two slideshows working.
    Last edited by Old Pedant; 07-21-2012 at 01:20 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,023
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Here's one way to do it.

    I have probably destroyed the layout of your page, trying to get the right number of <div>s and get rid of duplicate id's. But the image movement works. Note that it would work for any number of sets of images with any number of images in each set.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    .imageChange {
        color: #FC3;
        font-size: xx-large;
        font-weight: bold;
    }
    </style>
    </head>
    
    <body>
    <div id="contentcentre">
        <div class="content">
            <div class="bigspace"></div>
            <div class="title" onclick="animatedcollapse.toggle('profile')">
                <span style=color:#FC0;>Project</span>
            </div>
    
            <div class="space"></div>
            <div id="profile">
                 <img src="http://www.johnbarton.co.uk/Uploads/Jade&Michael/J&M2.jpg" 
                      id="slide1" onclick="nextImage(1,1);" alt="Graze"/>
                <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 class="imageChange" onclick="nextImage(1,-1)"><</span> /
                    <span class="imageChange" onclick="nextImage(1,1)">></span>
                </span>
                <span style="text-align: right; color:#333"><a href="">fullscreen</a></span>
                <p></p>
            </div><!-- end of project -->
        </div><!-- end of content -->
        <div class="content">
            <div class="title" onclick="animatedcollapse.toggle('project')">
                <span style=color:#666; margin:10px;>Showboating</span>
            </div>
            <div id="space"></div>
            <div id="project"><div>
                <img src="http://www.johnbarton.co.uk/Uploads/Terralec/Te0" 
                     id="slide2" onclick="nextImage(2,1);" alt="Graze"/>
                <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 class="imageChange" onclick="nextImage(2,-1)"><</span> /
                    <span class="imageChange" onclick="nextImage(2,1)">></span>
                </span>
                <span style="text-align: right; color:#333"><a href="">fullscreen</a></span>
                <p></p>
            </div><!-- end of project -->
        </div><!-- end of content -->
    </div><!-- end of id=contentcentre -->
    
    
    <script type="text/javascript">
    var imageSets = {
          "slide1" : ["Jade&Michael/J&M2.jpg",
                      "Jade&Michael/J&M6.jpg",
                      "Jade&Michael/J&M7.jpg" ],
          "slide2" : ["Terralec/Te0",
                      "Terralec/Te5.jpg",
                      "Terralec/Te7.jpg" ]
    };
    
    function nextImage(which,moveBy)
    {
        var set = imageSets["slide"+which];
        var image = document.getElementById("slide"+which);
        var cursrc = image.src;
    
        for ( var cur = 0; cur < set.length; ++cur )
        {
            if ( cursrc.indexOf( set[cur] ) > 0 )
            {
               // found current image in the set
               cur = ( cur + set.length + moveBy ) % set.length;
               image.src = "http://www.johnbarton.co.uk/Uploads/" + set[cur];
               return;
            }
        }
        // ??? how did we get here??
        // play it safe:
        image.src = "http://www.johnbarton.co.uk/Uploads/" + set[0];
    }
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    MaxRyan (07-21-2012)

  • #5
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thats amazing! So much more than I expected in terms of help. Yeh, sorry about the ugly coding, apart from being fairly new to web design I tend to approach it with a fairly 'if it works' approach.. Now combing the rest for more mistakes.. Thanks!


  •  

    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
    •