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 13 of 13
  1. #1
    New Coder
    Join Date
    Jul 2014
    Location
    NE
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Accessing data in array through a link.

    Hey everyone, I am trying to build an Image slider and have it mostly completed using javascript, but I want to have icons at the bottom of my slider to show which image is being display currently and when I select one to take me to that image. What I am stuck on is all of my images are stored in an array within the javascript directly with just a little html code to have it load as you can see.

    HTML code;
    Code:
    <head>
    <title></title>
    <script type="text/javascript" src="Image_Slider.js"></script>
    <link rel="stylesheet" type="text/css" href=".\Images\e0009492\500x366slidestyle.css">
    </head>
    <body>
        <!-- Load the first image to the img tag. The rest of the images will need to be loaded into the Image_Slider.js file.  -->
        <div class="container">
            <div id="Prev">
                <a href="#" onclick="clearTimeout(timerID); prevImage();"><img src=".\Images\e0009492\prev.png" /></a>
            </div>
            <div id="images">
                <img name="slideImg" src=".\Images\e0009492\500x366\01.jpg" /><br />
            </div>
            <div id="Next">
                <a href="#" onclick="clearTimeout(timerID); nextImage();"><img src=".\Images\e0009492\next.png" /></a>
            </div>
            <ul id="pager"></ul>
            <div id="PlayPause">
                <a href="#" onclick="play()">Play slide show</a>&nbsp;|&nbsp;
                <a href="#" onclick="clearTimeout(timerID)">Pause</a>
            </div>
            
            
        </div> <!-- End of container div -->
        
    </body>
    Here is the Javascript code;
    Code:
    var interval = 1500; //Adjust for auto slide; 1000 = 1 second. 
    var random_display = 0;
    var imageDir = "/Images/e0009492/"; //Change for image location.
    var imageNum = -1;
    var place;
    
    function imageItem(url) {
        this.img = new Image();
        this.img.src = url;
        this.url = url;
    }
    
    //Change to the correct Image files within the doublequotes. 
    var imageArray = [
        new imageItem(imageDir + "01.jpg"),
        new imageItem(imageDir + "02.jpg"),
        new imageItem(imageDir + "03.jpg"),
        new imageItem(imageDir + "04.jpg"),
        new imageItem(imageDir + "05.jpg")
    ];
    
    
    function randNum(x, y) {
        var range = y - x + 1;
        return Math.floor(Math.random() * range) + x;
    }
    
    function getNextImage() {
        imageNum = (random_display) ? randNum(0, imageArray.length-1) : ((imageNum+1) % imageArray.length);
        return imageArray[imageNum];
    }
    
    function getPrevImage() {
        imageNum = (imageNum-1 >= 0) ? (imageNum-1) : (imageArray.length-1);
        return imageArray[imageNum];
    }
    
    function prevImage() {
        var image_item = getPrevImage();
        place.src = place.alt = image_item.url;
    }
    
    function nextImage() {
        var image_item = getNextImage();
        place.src = place.alt = image_item.url;
    }
    
    function play() {
        nextImage();
        timerID = setTimeout(play, interval);
    }
    
    //load the javascript code upon load of the html page.
    window.onload = function(){
        place = document['slideImg'];
        play();
        Pager();
    };
    
    function callImageArray() {
        for (i = 0; i < imageArray.length; ++i){
            var imgNum = imageArray[i];
        }
        switch (imgNum) {
            case 0:
                imageArray[0];
                break;
            case 1:
                imageArray[1];
                break;
            case 2:
                imageArray[2];
                break;
            case 3:
                imageArray[3];
                break;
            case 4:
                imageArray[4];
                break;
            default:
               //alert(imgNum);
        }
    }
    
    //get the total number of items in the array to be displayed in the slider.
    function Pager() {
        var text = "<ul>";
        for (i = 0; i < imageArray.length; ++i){
            text += "<li>" + "<a href='#' onclick='callImageArray(imageArray[i])'" + ">" + parseInt(i + 1) + "</a>" +  "</li>";
        }
        text += "</ul>";
        document.getElementById("pager").innerHTML = text;
        
    }
    and my CSS;

    Code:
    .container
        {
            position: absolute;
            border: 1px solid black;
            padding: 5px;
            width: 600px;
            height: 400px;
            background-color: lightblue;
        }
       
    #Prev
        {
            border: 1px solid black;
            padding: 5px;
            background-color: grey;
            position: relative;
            margin-top: 183px;
            display: inline;
            float: left;
        }
        
    #Images
        {
            position: relative;
            display: inline;
            float: left;
        }
       
    #Next
        {
            border: 1px solid black;
            padding: 5px;
            background-color: grey;
            position: relative;
            margin-top: -183px;
            display: inline;
            float: right;
        }
       
    #PlayPause
        {
            border: 1px solid black;
            padding: 5px;
            background-color: grey;
            position: relative;
            display: inline;
            margin: 100px;
            float: none;
        }
        
    #pager{
    	
    	padding:0px;
    	position:relative;
    	height:50px;
    	margin:auto;
    	margin-top:10px;
            float: left;
    }
    
    #pager li{
    	padding: 0px;
    	margin:5px;
    	width:20px;
    	height:20px;
    	border:1px solid black;
    	color:black;
    	list-style: none;
    	opacity: 0.6;
    	float:left;
    	border-radius: 3px;
    	cursor: pointer;
    }
    
    #pager li:hover{
    	opacity:0.9;
    }
    here is a demo of the slider as it stands currently - Design Team Demo Site. What I have currently shows that there are five images stored, but the links do not move back to the selected image. I tried using a Switch/Case to pull that information but it does not work within the Function callImageArray() and when I un-comment the default alert I get [object Object]. I am at a loss, on how to get it to work like I want it to. I am still learning JavaScript and I know this should be possible, I don't want to just use a slider plugin even though I know there are tons of them out there. I like to learn how it works as I build something. So any help would be appreciated.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,316
    Thanks
    23
    Thanked 613 Times in 612 Posts
    You over complicated things me thinks. I changed your array and code related to it.
    You used a UL <ul id="pager"></ul> to write an other UL into Check the
    Code:
    function Pager() {
        var text = "<ul>";
    ......
    So I changed that. The callImageArray(imgNum) function needed to use the something passed to it and the CASE
    Code:
            case 0:
                imageArray[0];
                break;
    doesn't do anything so changed that.
    Final code
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta content="Quik-Pak, bicycle cargo trailers" name="keywords">
    <title>Quik-Pak products.htm</title>
    <style type="text/css">
    .container
        {
            position: absolute;
            border: 1px solid black;
            padding: 5px;
            width: 600px;
            height: 400px;
            background-color: lightblue;
        }
    
    #Prev
        {
            border: 1px solid black;
            padding: 5px;
            background-color: grey;
            position: relative;
            margin-top: 183px;
            display: inline;
            float: left;
        }
    
    #Images
        {
            position: relative;
            display: inline;
            float: left;
        }
    
    #Next
        {
            border: 1px solid black;
            padding: 5px;
            background-color: grey;
            position: relative;
            margin-top: -183px;
            display: inline;
            float: right;
        }
    
    #PlayPause
        {
            border: 1px solid black;
            padding: 5px;
            background-color: grey;
            position: relative;
            display: inline;
            margin: 100px;
            float: none;
        }
    
    #pager{
    
    	padding:0px;
    	position:relative;
    	height:50px;
    	margin:auto;
    	margin-top:10px;
            float: left;
    }
    
    #pager li{
    	padding: 0px;
    	margin:5px;
    	width:20px;
    	height:20px;
    	border:1px solid black;
    	color:black;
    	list-style: none;
    	opacity: 0.6;
    	float:left;
    	border-radius: 3px;
    	cursor: pointer;
    }
    
    #pager li:hover{
    	opacity:0.9;
    }
    </style>
    </head>
    <body>
    <div class="container">
        <div id="Prev">
            <a href="#" onclick="clearTimeout(timerID); prevImage();"><img src=".\Images\e0009492\prev.png" /></a>
        </div>
    
        <div id="images">
            <img id="slideImg" src=".\Images\e0009492\500x366\01.jpg" /><br />
        </div>
    
        <div id="Next">
            <a href="#" onclick="clearTimeout(timerID); nextImage();"><img src=".\Images\e0009492\next.png" /></a>
        </div>
    
        <div id="pager"></div>
    
        <div id="PlayPause">
            <a href="#" onclick="play()">Play slide show</a>&nbsp;|&nbsp;
            <a href="#" onclick="clearTimeout(timerID)">Pause</a>
        </div>
    </div>
    
    
    
    <script type="text/javascript">
    var interval = 1500; //Adjust for auto slide; 1000 = 1 second.
    var random_display = 0;
    var imageDir = ''; //"/Images/e0009492/"; //   I USED THE IMAGES IN THE SAME FOLDER AS THE HTML. CHANGE FOR YOUR LOCATION.
    var imageNum = -1;
    var place;
    
    function imageItem(url) {
        this.img = new Image();
        this.img.src = url;
        this.url = url;
    }
    
    //Change to the correct Image files within the doublequotes.
    var imageArray = [
        "01.jpg",
        "02.jpg",
        "03.jpg",
        "04.jpg",
        "05.jpg"
    ];
    
    function randNum(x, y) {
        var range = y - x + 1;
        return Math.floor(Math.random() * range) + x;
    }
    
    function getNextImage() {
        imageNum = (random_display) ? randNum(0, imageArray.length-1) : ((imageNum+1) % imageArray.length);
        return imageArray[imageNum];
    }
    
    function getPrevImage() {
        imageNum = (imageNum-1 >= 0) ? (imageNum-1) : (imageArray.length-1);
        return imageArray[imageNum];
    }
    
    function prevImage() {
        var image_item = getPrevImage();
        place.src = image_item;
    }
    
    function nextImage() {
        var image_item = getNextImage();
        place.src = image_item;
    }
    
    function play() {
        nextImage();
        timerID = setTimeout(play, interval);
    }
    
    //load the javascript code upon load of the html page.
    window.onload = function(){
        place = document['slideImg'];
        play();
        Pager();
    };
    
    function callImageArray(imgNum) {
        switch (imgNum) {
            case 0:
                place.src = imageArray[0];
                break;
            case 1:
                place.src = imageArray[1];
                break;
            case 2:
                place.src = imageArray[2];
                break;
            case 3:
                place.src = imageArray[3];
                break;
            case 4:
                place.src = imageArray[4];
                break;
            default:
               //alert(imgNum);
        }
    }
    
    //get the total number of items in the array to be displayed in the slider.
    function Pager() {
        var text = "<ul>";
        for (i = 0; i < imageArray.length; ++i){
            text += "<li>" + "<a href='javascript:callImageArray("+i+")'" + ">" + Number(i + 1) + "</a>" +  "</li>";
        }
        text += "</ul>";
        document.getElementById("pager").innerHTML = text;
    
    }
    </script>
    </body>
    </html>
    You might want to change the anchor numbers from divs to buttons.
    And I did not change the code for the next and previous arrows(?). Got tried, you should do that.

    Changed the name="slideImg" to ID cause an img tags do not recognize a name attribute.
    Code:
    <div id="images">
        <img id="slideImg" src=".\Images\e0009492\500x366\01.jpg" /><br />
    </div>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    Jul 2014
    Location
    NE
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks sunfighter, I will take a look at this and see how it works.

  • #4
    New Coder
    Join Date
    Jul 2014
    Location
    NE
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok, I made the changes to my code as you suggested to get the links going, but when I upload the files, the links work for each image, but now my slider does not. Comes up with Undefined as you can see here, Design Team Demo Site. The path file location is where all the images are stored on our server, so that path is required for each image. The Slider does work without the individual links "pager" and when I user
    Code:
     var imageArray = [new imageItem(imageDir + "01.jpg"), new imageItem(imageDir + "02.jpg"), new imageItem(imageDir + "03.jpg"), new imageItem(imageDir + "04.jpg"), new imageItem(imageDir + "05.jpg")];
    and your code works with both, so I am not sure where I am going wrong.

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,316
    Thanks
    23
    Thanked 613 Times in 612 Posts
    I don't know what to tell you except JS should be the last thing on a page just before the end body and html tags. The css should be high up in the code, normally in the head section. That's just so it's easy to find. And I fixed the next/previous problem. Here's the corrected callImageArray function.
    Code:
    function callImageArray(imgNum) {
        switch (imgNum) {
            case 0:
                place.src = imageArray[0];
    	    imageNum = 0;
                break;
            case 1:
                place.src = imageArray[1];
    	    imageNum = 1;
                break;
            case 2:
                place.src = imageArray[2];
    	    imageNum = 2;
                break;
            case 3:
                place.src = imageArray[3];
    	    imageNum = 3;
                break;
            case 4:
                place.src = imageArray[4];
    	    imageNum = 4;
                break;
            default:
               //alert(imgNum);
        }
    }
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #6
    New Coder
    Join Date
    Jul 2014
    Location
    NE
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I will try this out when I get to work. Thanks Sunfighter.

  • #7
    New Coder
    Join Date
    Jul 2014
    Location
    NE
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I combined all of my CSS, HTML, and JavaScript into one file like you have done, but when I select one of the 'pager' links all it does is give me the file path not the actual image. The images will be stored in a separate location so here is the code I have now.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title>title</title>
    <style type="text/css">
        .container
        {
            position: absolute;
            border: 1px solid black;
            padding: 5px;
            width: 600px;
            height: 400px;
            background-color: lightblue;
        }
       
    #Prev
        {
            border: 1px solid black;
            padding: 5px;
            background-color: grey;
            position: relative;
            margin-top: 183px;
            display: inline;
            float: left;
        }
        
    #Images
        {
            position: relative;
            display: inline;
            float: left;
        }
       
    #Next
        {
            border: 1px solid black;
            padding: 5px;
            background-color: grey;
            position: relative;
            margin-top: -183px;
            display: inline;
            float: right;
        }
       
    #PlayPause
        {
            border: 1px solid black;
            padding: 5px;
            background-color: grey;
            position: relative;
            display: inline;
            margin: 100px;
            float: none;
        }
        
    #pager{
    	
    	padding:0px;
    	position:relative;
    	height:50px;
    	margin:auto;
    	margin-top:-10px;
            float: left;
    }
    
    #pager li{
    	padding: 0px;
    	margin:5px;
    	width:20px;
    	height:20px;
    	border:1px solid black;
    	color:black;
    	list-style: none;
    	opacity: 0.6;
    	float:left;
    	border-radius: 3px;
    	cursor: pointer;
    }
    
    #pager li:hover{
    	opacity:0.9;
    }
    </style>
    </head>
    
    <body>
         <!-- Load the first image to the img tag. The rest of the images will need to be loaded into the Image_Slider.js file.  -->
        <div class="container">
            <div id="Prev">
                <a href="#" onclick="clearTimeout(timerID); prevImage();"><img src=".\Images\e0009492\prev.png" /></a>
            </div>
            <div id="images">
                <img id="slideImg" src=".\Images\e0009492\500x366\01.jpg" /><br />
            </div>
            <div id="Next">
                <a href="#" onclick="clearTimeout(timerID); nextImage();"><img src=".\Images\e0009492\next.png" /></a>
            </div>
            <div id="pager"></div>
            <div id="PlayPause">
                <a href="#" onclick="play()">Play slide show</a>&nbsp;|&nbsp;
                <a href="#" onclick="clearTimeout(timerID)">Pause</a>
            </div>
            
            
        </div> <!-- End of container div -->
        
    <script type="text/javascript">
        var interval = 1500; //Adjust for auto slide; 1000 = 1 second. 
        var random_display = 0;
        var imageDir = "./Images/e0009492/500x366/"; //"/Images/e0009492/"; //Change for image location.
        var imageNum = -1;
        var place;
        
        function imageItem(url) {
            this.img = new Image();
            this.img.src = url;
            this.url = url;
        }
        
        //Change to the correct Image files within the doublequotes. 
        var imageArray = [
            new imageItem(imageDir + "01.jpg"),
            new imageItem(imageDir + "02.jpg"),
            new imageItem(imageDir + "03.jpg"),
            new imageItem(imageDir + "04.jpg"),
            new imageItem(imageDir + "05.jpg")
        ];
        
        
        function randNum(x, y) {
            var range = y - x + 1;
            return Math.floor(Math.random() * range) + x;
        }
        
        function getNextImage() {
            imageNum = (random_display) ? randNum(0, imageArray.length-1) : ((imageNum+1) % imageArray.length);
            return imageArray[imageNum];
        }
        
        function getPrevImage() {
            imageNum = (imageNum-1 >= 0) ? (imageNum-1) : (imageArray.length-1);
            return imageArray[imageNum];
        }
        
        function prevImage() {
            var image_item = getPrevImage();
            place.src = place.alt = image_item.url;
        }
        
        function nextImage() {
            var image_item = getNextImage();
            place.src = place.alt = image_item.url;
        }
        
        function play() {
            nextImage();
            timerID = setTimeout(play, interval);
        }
        
        //load the javascript code upon load of the html page.
        window.onload = function(){
            place = document['slideImg'];
            play();
            Pager();
        };
    
        function callImageArray(imgNum) {
            switch (imgNum) {
                case 0:
                    imageNum = 0;
                    place.src = imageArray[0];
                    break;
                case 1:
                    imageNum = 1;
                    place.src = imageArray[1];
                    break;
                case 2:
                    imageNum = 2;
                    place.src = imageArray[2];
                    break;
                case 3:
                    imageNum = 3;
                    place.src = imageArray[3];
                    break;
                case 4:
                    imageNum = 4;
                    place.src = imageArray[4];
                    break;
            }
        }
    
        //get the total number of items in the array to be displayed in the slider.
        function Pager() {
            var text = "<ul>";
            for (i = 0; i < imageArray.length; ++i){
                text += "<li>" + "<a href='#' onclick='javascript:callImageArray("+i+")'" + ">" + Number(i + 1) + "</a>" +  "</li>";
            }
            text += "</ul>";
            document.getElementById("pager").innerHTML = text;
            
        }
    </script>
        
    </body>
    </html>

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,316
    Thanks
    23
    Thanked 613 Times in 612 Posts
    The biggest problems are how you define the image array.
    You have
    Code:
        var imageArray = [
            new imageItem(imageDir + "01.jpg"),
            new imageItem(imageDir + "02.jpg"),
            new imageItem(imageDir + "03.jpg"),
            new imageItem(imageDir + "04.jpg"),
            new imageItem(imageDir + "05.jpg")
        ];
    It should be:
    Code:
    var imageArray = [
        imageDir + "01.jpg",
        imageDir + "02.jpg",
        imageDir + "03.jpg",
        imageDir + "04.jpg",
        imageDir + "05.jpg"
    ];
    A single flat array!

    And this:
    Code:
    place.src = place.alt = image_item.url;
    In two places.
    S/B:
    Code:
    place.src = image_item;
    in the prevImage() and nextImage() function.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #9
    New Coder
    Join Date
    Jul 2014
    Location
    NE
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Tried that and while it corrected the Pager functionality it ends up breaking the slide functionality in the process since the original array with
    Code:
    var imageArray = [
            new imageItem(imageDir + "01.jpg"),
            new imageItem(imageDir + "02.jpg"),
            new imageItem(imageDir + "03.jpg"),
            new imageItem(imageDir + "04.jpg"),
            new imageItem(imageDir + "05.jpg")
        ];
    it is the only way I have been able to get this to work. I think I did figure something out however while discussing the issue here. I ended up just creating a second array for the pager directly as you have listed above;
    Code:
    var imageArray2 = [
            imageDir + "01.jpg",
            imageDir + "02.jpg",
            imageDir + "03.jpg",
            imageDir + "04.jpg",
            imageDir + "05.jpg"
        ];
    and that does work properly as well as letting the first array handle the slider functions. At this point I may have to just do it this way and have to modify both array's when I add new pictures instead of just having to modify one array like I originally planned. I tried just cloning the original array but with the imageitem in the array it breaks the pager function. So if you have any tips on that great, if not I will leave it as I have now and say thanks for the assistance.

  • #10
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,316
    Thanks
    23
    Thanked 613 Times in 612 Posts
    OK DragynArc, One thing I can't do is look over your shoulder and hand hold. Your talk about
    both array's
    makes me wonder cause I only see one and you never said anything about "place.src = image_item;" The code I gave you works for me and it should work for you as is.
    Good Luck to you sir.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    DragynArc (07-16-2014)

  • #11
    New Coder
    Join Date
    Jul 2014
    Location
    NE
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sunfighter, that was my issue; forgot to remove the '.url' from the end of the 'place.src=image_item' lines. I now have it working like yours. I cannot believe I skipped over that... So I appreciate all of the help you have given me. Now I have to get a few CSS settings completed on it which is a completely different matter, but here is what it looks like currently. Design Team Demo Site

  • #12
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,316
    Thanks
    23
    Thanked 613 Times in 612 Posts
    Have fun.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #13
    New Coder
    Join Date
    Jul 2014
    Location
    NE
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    So I now have another question for anyone that can help. My image slider works great, big thanks to Sunfighter for the assistance. I have changed my div's over to now use buttons for rotating the images as well as to show how many images I have loaded in my array. What I want to do now is when the image changes to highlight or change the background-color of the appropriate button at the top of my slider. I have it so when I click on each one it will change but I would like to have it do so dynamically as well when the slider is rotating through all of the images. Here is a link to the site Design Team Demo Site to view what I have so far.
    Here is my code:
    HTML
    Code:
    <head>
    <title></title>
    <script type="text/javascript" src="Image_Slider.js"></script>
    <link rel="stylesheet" type="text/css" href=".\Images\e0009492\500x366slidestyle.css">
    </head>
    <body>
        <!-- Load the first image to the img tag. The rest of the images will need to be loaded into the Image_Slider.js file.  -->
        <div class="container">
            <div id="images">
                <img id="slideImg" src=".\Images\e0009492\500x366\01.jpg" /><br />
            </div> <!-- End of 'images' DIV -->
            <div id="Prev">
                <form>
                    <button type="button" onclick="clearTimeout(timerID); prevImage();"><img src=".\Images\e0009492\prev.png"/></button>
                </form>
            </div> <!-- End of 'Prev' DIV -->
            <div id="Next">
                <form>
                    <button type="button" onclick="clearTimeout(timerID); prevImage();"><img src=".\Images\e0009492\next.png"/></button>
                </form>
            </div> <!-- End of 'Next' DIV --> 
            <div id="pager">
                <form>
                    <button id='btnPage1' onclick="javascript:callImageArray(0)" type="button"></button>
                    <button id='btnPage2' onclick="javascript:callImageArray(1)" type="button"></button>
                    <button id='btnPage3' onclick="javascript:callImageArray(2)" type="button"></button>
                    <button id='btnPage4' onclick="javascript:callImageArray(3)" type="button"></button>
                    <button id='btnPage5' onclick="javascript:callImageArray(4)" type="button"></button>
                </form>
            </div> <!-- End of 'pager DIV --> 
            <div id="PlayPause">
                <form>
                    <button type="button" onclick="play()"><img src=".\Images\e0009492\play.png"/></button>
                    <button type="button" onclick="clearTimeout(timerID)""><img src=".\Images\e0009492\pause.png"/></button>
                </form>
            </div>
        </div> <!-- End of container div -->
    </body>
    Javascript
    Code:
        //Customize settings for images and file location as well as speed of Image slider.
        //Adjust for Directory and speed of the slider. 
        var imageDir = "/Images/e0009492/"; //Change for image location.
        var interval = 1500; //Adjust for auto slide; 1000 = 1 second. 
        
        //Change to the correct Image files within the doublequotes. 
        var imageArray = [
            imageDir + "01.jpg",
            imageDir + "02.jpg",
            imageDir + "03.jpg",
            imageDir + "04.jpg",
            imageDir + "05.jpg"
        ];
        
        //Do not adjust below settings.  
        var random_display = 0;
        var imageNum = -1;
        var place;
        
        function imageItem(url) {
            this.img = new Image();
            this.img.src = url;
            this.url = url;
        }
        
        function randNum(x, y) {
            var range = y - x + 1;
            return Math.floor(Math.random() * range) + x;
        }
        
        function getNextImage() {
            imageNum = (random_display) ? randNum(0, imageArray.length-1) : ((imageNum+1) % imageArray.length);
            return imageArray[imageNum];
        }
        
        function getPrevImage() {
            imageNum = (imageNum-1 >= 0) ? (imageNum-1) : (imageArray.length-1);
            return imageArray[imageNum];
        }
        
        function prevImage() {
            var image_item = getPrevImage();
            document.getElementById('slideImg').src = image_item;
            HighlightMove();
        }
        
        function nextImage() {
            var image_item = getNextImage();
            document.getElementById('slideImg').src = image_item;
            HighlightMove();
        }
        
        function play() {
            nextImage();
            timerID = setTimeout(play, interval);
            //HighlightMove();
        }
        
        //load the javascript code upon load of the html page.
        window.onload = function(){
            place = document['slideImg'];
            play();
            
        };
    
    //get the total number of items in the array to be displayed in the slider.
       /* function PagerButton() {
            var text =  "<form>";
            for (i = 0; i < imageArray.length; ++i){
                text += "<button type='button' onclick='javascript:callImageArray("+i+")'>" + "</button>";
            }
            text += "</form>";
            document.getElementById("pager").innerHTML = text;
            
        }*/
        function HighlightMove(){
            for (i = 0; i < imageArray.length; ++i){
                Highlight(callImageArray(i));
               
            }
            
            
        }
        function callImageArray(imgNum) {
            switch (imgNum) {
                case 0:
                    imageNum = 0;
                    document.getElementById('slideImg').src = imageArray[0];
                    Highlight(0);
                    break;
                case 1:
                    imageNum = 1;
                    document.getElementById('slideImg').src = imageArray[1];
                    Highlight(1);
                    break;
                case 2:
                    imageNum = 2;
                    document.getElementById('slideImg').src = imageArray[2];
                    Highlight(2);
                    break;
                case 3:
                    imageNum = 3;
                    document.getElementById('slideImg').src = imageArray[3];
                    Highlight(3);
                    break;
                case 4:
                    imageNum = 4;
                    document.getElementById('slideImg').src = imageArray[4];
                    Highlight(4);
                    break;
            }
        }
        
        //Highlight each button in red for each individual image. 
        function Highlight(imgNum){
           switch (imgNum) {
                //case
                case 0:
                    imgNum = 0;
                    document.getElementById('btnPage1').style.backgroundColor = 'Red';
                    document.getElementById('btnPage2').style.backgroundColor = 'White';
                    document.getElementById('btnPage3').style.backgroundColor = 'White';
                    document.getElementById('btnPage4').style.backgroundColor = 'White';
                    document.getElementById('btnPage5').style.backgroundColor = 'White';
                    break;
                case 1:
                    imgNum = 1;
                    document.getElementById('btnPage2').style.backgroundColor = 'Red';
                    document.getElementById('btnPage1').style.backgroundColor = 'White';
                    document.getElementById('btnPage3').style.backgroundColor = 'White';
                    document.getElementById('btnPage4').style.backgroundColor = 'White';
                    document.getElementById('btnPage5').style.backgroundColor = 'White';
                    break;
                case 2:
                    imgNum = 2;
                    document.getElementById('btnPage3').style.backgroundColor = 'Red';
                    document.getElementById('btnPage1').style.backgroundColor = 'White';
                    document.getElementById('btnPage2').style.backgroundColor = 'White';
                    document.getElementById('btnPage4').style.backgroundColor = 'White';
                    document.getElementById('btnPage5').style.backgroundColor = 'White';
                    break;
                case 3:
                    imgNum = 3;
                    document.getElementById('btnPage4').style.backgroundColor = 'Red';
                    document.getElementById('btnPage1').style.backgroundColor = 'White';
                    document.getElementById('btnPage2').style.backgroundColor = 'White';
                    document.getElementById('btnPage3').style.backgroundColor = 'White';
                    document.getElementById('btnPage5').style.backgroundColor = 'White';
                    break;
                case 4:
                    imgNum = 4;
                    document.getElementById('btnPage5').style.backgroundColor = 'Red';
                    document.getElementById('btnPage1').style.backgroundColor = 'White';
                    document.getElementById('btnPage2').style.backgroundColor = 'White';
                    document.getElementById('btnPage3').style.backgroundColor = 'White';
                    document.getElementById('btnPage4').style.backgroundColor = 'White';
                    break;
           }
        }
    and CSS
    Code:
    .container
        {
            position: absolute;
            width: 550px;
            height: 366px;
            z-index: 1;
        }
    #Prev button
        {
            
            position: relative;
            margin-top: 170px;
            margin-left: -550px;
            display: inline;
            float: left;
            opacity: .5;
            z-index: 3;        
        }
    #Prev button:hover
        {
            opacity: 1.0;
        }
        
    #images
        {
            /*border: 1px solid black;*/
            position: relative;
            display: inline;
            float: left;
            overflow: hidden;
            z-index: 1;
        }
       
    #Next button
        {
            position: relative;
            margin-top: -183px;
            opacity: .5;
            display: inline;
            float: right;
            z-index: 3;
        }
    
    #Next button:hover
        {
            opacity: 1.0;
        }
    #pager{
    	
    	padding:0px;
    	position:relative;
    	height:50px;
    	margin:auto;
            margin-top: -366px;
    	margin-right: 225px;
            float: right;
            z-index: 5;
    }
    
    #pager button{
    	margin:5px;
    	width:20px;
    	height:20px;
    	opacity: 0.5;
    	float:left;
    	border-radius: 15px;
    	cursor: pointer;
    }
    
    #pager button:hover
        {
    	opacity:0.9;
        }
    
    /*#pager button:active
        {
            background-color: red;
        }*/
    
    #PlayPause form
        {
            position: relative;
            display: inline;
            margin-left: 200px;
            margin-top: -30px;
            float: left;
            z-index: 5;
        }
    
    #PlayPause button
        {
            opacity: .75;
        }
    #PlayPause button:hover
        {
            opacity: 1.0;
        }


  •  

    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
    •