JavaScript - Get Images From Folders On My Server Instead Of List Of Image Links

<div id="faqBox">
	 <h1 id="faqHeader"><u>F.A.Q's</u></h1>
	 <ul>
		 <li><a href="#" onclick="">What is the purpose of this website?</a></li>
		 <li><a href="#">What type of achievements would someone of had to do to be eligable?</a></li>
		 <li><a href="#">Why was this award created?</a></li>
		 <li><a href="#">How do we nominate somebody?</a></li>
		 <li><a href="#">How are people presented with this award?</a></li>
	 </ul>
</div>
<div id="faqInfoBox">
	 <img src="images/content1.png" name="allimage" id="allimage" alt="content1" border="0" />
</div>

#faqInfoBox {width: 40%;
             border: 5px ridge;
			 height: 310px;
			 background: #606626;
			 float: right;
			 margin-right: 3%;}
			 
#faqBox ul li{font-family: trebuchet ms;
              line-height: 30px;
			  list-style-type: square;}

var imgArray = new Array(4);

     imgArray[0] = 'images/content1.png';
     imgArray[1] = 'images/content2.png';
     imgArray[2] = 'images/content3.png';
     imgArray[3] = 'images/content4.png';
     imgArray[4] = 'images/content5.png';
	 
	 var currIndex = 0;
 
     function imgChange(that)
     {
	 if(currIndex < myImages.length - 1) {
         that.src = myImages[++currIndex];
         }else {
         currIndex = 0;
         that.src = myImages[currIndex];
         }
     }

/**
 * @author Bruno Bornsztein <bruno@missingmethod.com>
 * @copyright 2007 Curbly LLC
 * @package Glider
 * @license MIT
 * @url http://www.missingmethod.com/projects/glider/
 * @version 0.0.3
 * @dependencies prototype.js 1.5.1+, effects.js
 */
/*  Thanks to Andrew Dupont for refactoring help and code cleanup - http://andrewdupont.net/  */

Glider = Class.create();
Object.extend(Object.extend(Glider.prototype, Abstract.prototype), {
    initialize: function(wrapper, options){
        this.handStopped = false;
        this.animating = false;
        this.wrapper = $(wrapper);
        this.scroller = this.wrapper.down('div.scroller');
        this.contentDiv = this.scroller.down('div');
        this.current = $(this.contentDiv.children[0].id);
        this.sectionWidth = this.contentDiv.children[0].getWidth();
        this.slideRelations = {};

        this.options = Object.extend({
            effectType: 'mosaic',
            duration: 3.0,
            frequency: 3,
            eRows: Prototype.Browser.IE ? 3 : 6,
            eCols: Prototype.Browser.IE ? 6 : 12,
            eColor: '#FFFFFF'
        }, options || {});

        this.effects = {
            'scroll'        : this.scroll,
            'speedscroll'   : this.speedscroll,
            'fade'          : this.fade,
            'blend'         : this.blend,
            'mosaic'        : this.mosaic
        };

        this.sections = this.wrapper.getElementsBySelector('div.section');
        for (var i = 0; i < this.sections.length; i++) {
            var nextSibling = this.sections[i].nextSiblings()[0];
            if (nextSibling){
                this.slideRelations[this.sections[i].id] = nextSibling.id;
            } else {
                this.slideRelations[this.sections[i].id] = this.sections[0].id;
            }
            this.effects[this.options.effectType].bind(this)().prepare(this.sections[i], i);
        }

        this.events = {
            mouseover: this.pause.bind(this),
            mouseout: this.resume.bind(this)
        };

        this.addObservers();
		

        if (this.options.autoGlide) {
            this.start();
        } else {
            this.handStopped = true;
        }
    },
	
	

    scroll: function() {
        var glider = this;
        return {
            prepa  function(el, i) {
                if (i > 0) {
                    $(el).setStyle('left: ' + glider.sectionWidth + 'px;');
                } else {
                    glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
					
                }
            },
            animate: function(elementIdToShow, direction) {
                $(elementIdToShow).setStyle('left: ' + (direction === 'normal' ? glider.sectionWidth : -glider.sectionWidth) + 'px;');

                new Effect.Parallel([
                    new Effect.Move(elementIdToShow, {
                        sync: true,
                        x: 0,
                        y: 0,
                        mode: 'absolute'
                    }),
                    new Effect.Move(glider.current.id, {
                        sync: true,
                        x: direction === 'normal' ? -glider.sectionWidth : glider.sectionWidth,
                        y: 0,
                        mode: 'absolute'
                    })
                ], {
                    duration: glider.options.duration,
                    afterFinish: function() {
                        glider.setAnimating(false);
                    }.bind(glider)
                });

            }
        }
    },
	
	

    speedscroll: function() {
        var glider = this;
        return {
            prepa  function(el, i) {
                if (i > 0) {
                    $(el).setStyle('left: ' + glider.sectionWidth + 'px;');
                } else {
                    glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);

                }
            },
            animate: function(elementIdToShow, direction) {
                $(elementIdToShow).setStyle('left: ' + (direction === 'normal' ? glider.sectionWidth : -glider.sectionWidth) + 'px;');
                $(elementIdToShow).setStyle({zIndex: 5});
                $(glider.current.id).setStyle({zIndex: 1});
                var currentId = glider.current.id;

                new Effect.Move(elementIdToShow, {
                    x: 0,
                    y: 0,
                    mode: 'absolute',
                    transition: Effect.Transitions.linear,
                    duration: glider.options.duration / 2,
                    afterFinish: function() {
                        moveCurrent.cancel();
                        $(currentId).setStyle('left: ' + (direction === 'normal' ? -glider.sectionWidth : glider.sectionWidth) + 'px;');
                        glider.setAnimating(false);
                    }
                });

                var moveCurrent = new Effect.Move(glider.current.id, {
                    x: direction === 'normal' ? -glider.sectionWidth : glider.sectionWidth,
                    y: 0,
                    mode: 'absolute',
                    transition: Effect.Transitions.linear,
                    duration: glider.options.duration
                });
            }
        }
    },

    fade: function() {
        var glider = this;
        return {
            prepa  function(el, i) {
                if (i > 0) {
                    el.setOpacity(0);
                    $(el).setStyle({ zIndex : '0' });
                } else {
                    glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
                    $(el).setStyle({ zIndex : '998' });
                    $$('.easyslidecontrolwr')[0].setStyle({ zIndex : '999' });
                }
            },
            animate: function(elementIdToShow, direction) {
                $(elementIdToShow).setStyle({ zIndex : '998' });
                $(glider.current.id).setStyle({ zIndex : '0' });

                new Effect.Opacity(glider.current.id, {
                duration: glider.options.duration,
                from: 1.0,
                to: 0.0,
                afterFinish: function() {
                    new Effect.Opacity(elementIdToShow, {
                        duration: glider.options.duration,
                        from: 0.0,
                        to: 1.0,
                        afterFinish: function() {
                            glider.setAnimating(false);
                        }.bind(glider)
                    });

                }.bind(glider)
            });
            }
        }
    },

    blend: function() {
        var glider = this;
        return {
            prepa  function(el, i) {
                if (i > 0) {
                    el.setOpacity(0);
                    $(el).setStyle({ zIndex : '0' });
                } else {
                    glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
                    $(el).setStyle({ zIndex : '998' });
                    $$('.easyslidecontrolwr')[0].setStyle({ zIndex : '999' });
                }
            },
            animate: function(elementIdToShow, direction) {
                $(elementIdToShow).setStyle({ zIndex : '998' });
                $(glider.current.id).setStyle({ zIndex : '0' });
                new Effect.Parallel([
                    new Effect.Opacity(glider.current.id, {
                        sync: true,
                        duration: glider.options.duration,
                        from: 1.0,
                        to: 0.0
                    }),
                    new Effect.Opacity(elementIdToShow, {
                        sync: true,
                        duration: glider.options.duration,
                        from: 0.0,
                        to: 1.0
                    })
                ], {
                    duration: glider.options.duration,
                    afterFinish: function() {
                        glider.setAnimating(false);
                    }.bind(glider)
                });
            }
        }
    },

    mosaic: function() {
        var glider = this;
        var delayedAppear = function(eSquare) {
            var opacity = Math.random();
            new Effect.Parallel([
                new Effect.Appear ( eSquare, {from: 0, to: opacity, duration: this.options.duration} ),
                new Effect.Appear ( eSquare, {from: opacity, to: 0, duration: this.options.duration/1.25} )
            ], {sync: false});
        };
        return {
            prepa  function(el, i) {
                if (i > 0) {
                    el.setStyle({ zIndex : 0 });
                    el.hide();
                } else {
                    el.setStyle({ zIndex : 999 });
                    glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
					
					
                }
                if (i == (glider.sections.length - 1)) {
                    glider.eSquares 	= [];
                    var elDimension	 	= el.getDimensions();
                    var elWidth  		= elDimension.width;
                    var elHeight 		= elDimension.height;

                    var sqWidth 		= elWidth / glider.options.eCols;
                    var sqHeight 		= elHeight / glider.options.eRows;

                    $R(0, glider.options.eCols-1).each(function(col) {
                        glider.eSquares[col] = [];
                        $R(0, glider.options.eRows-1).each(function(row) {
                            var sqLeft = col * sqWidth;
                            var sqTop  = row * sqHeight;
                            glider.eSquares[col][row] = new Element('div').setStyle({
                                opacity         : 0,
                                backgroundColor : glider.options.eColor,
                                position        : 'absolute',
                                zIndex          : 5,
                                left            : sqLeft + 'px',
                                top             : sqTop + 'px',
                                width           : sqWidth + 'px',
                                height          : sqHeight + 'px'
                            });

                            el.up('div').insert(glider.eSquares[col][row]);
                        }.bind(glider))
                    }.bind(glider));
                }
            },

            animate: function(elementIdToShow, direction) {
                $(elementIdToShow).setStyle({ zIndex : 999 });
                $(glider.current.id).setStyle({ zIndex : 0 });
                new Effect.Parallel([
                    new Effect.Fade(glider.current.id, {sync: true}),
                    new Effect.Appear(elementIdToShow, {sync: true})
                ], {
                    duration: glider.options.duration,
                    afterFinish: function() {
                        glider.setAnimating(false);
                    }.bind(glider)
                });
                $R(0, glider.options.eCols-1).each(function(col) {
                    $R(0, glider.options.eRows-1).each(function(row) {
                        var eSquare = glider.eSquares[col][row];
                        var delay = Math.random() * (glider.options.duration / 3) * 1000;
                        setTimeout(delayedAppear.bind(glider, eSquare), delay);
                    }.bind(this))
                }.bind(this));
            }
        }
    },

    setAnimating: function(flag) {
        this.animating = flag;
        if (flag) {
            $$('.easyslidecontrolwr')[0].addClassName('disabled');
        } else {
            $$('.easyslidecontrolwr')[0].removeClassName('disabled');
        }
    },

    addObservers: function(){
        this.wrapper.observe('mouseover', this.events.mouseover);
        this.wrapper.observe('mouseout', this.events.mouseout);

        var descriptions = this.wrapper.getElementsBySelector('div.sliderdescription');
        descriptions.invoke('observe', 'mouseover', this.makeActive);
        descriptions.invoke('observe', 'mouseout', this.makeInactive);

        //Nubmbers
        var controls = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslidedirect');
        controls.invoke('observe', 'click', this.numClick.bind(this));

        //Arrows
        var stop = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslidestop');
        stop.invoke('observe', 'click', this.stop.bind(this));

        var play = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslideplay');
        play.invoke('observe', 'click', this.start.bind(this));

        var prev = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslideprev');
        prev.invoke('observe', 'click', this.previous.bind(this));

        var next = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslidenext');
        next.invoke('observe', 'click', this.next.bind(this));
    },

    numClick: function(event){
        var element = Event.findElement(event, 'a'); /*clicked link*/
        var nextElementId = element.href.split('#')[1];
        var direction = 'normal';
        for (var i in this.slideRelations) {
            if (i === this.current.id) {
                direction = 'normal';
                break;
            }
            if (i === nextElementId) {
                direction = 'reverse';
                break;
            }
        }
        this.animate(nextElementId, direction);
        Event.stop(event);
    },

    animate: function(elementIdToShow, direction){
        if (this.animating || this.current.id == elementIdToShow) {
            return;
        }
        this.setAnimating(true);
        this.toggleControl($$('a[href="#' + elementIdToShow + '"]')[0]);
		
	
        this.effects[this.options.effectType].bind(this)().animate(elementIdToShow, direction);

        this.current = $(elementIdToShow);
    },

    next: function(event){
        var nextMove = '';
        nextMove = this.slideRelations[this.current.id];
        this.animate(nextMove, 'normal');
        if (event) {
            Event.stop(event);
        }
    },

    previous: function(event){
        var prevMove = '';
        for (var i in this.slideRelations) {
            if (this.slideRelations[i] == this.current.id) {
                prevMove = i;
                break;
            }
        }
        this.animate(prevMove, 'reverse');
        if (event) {
            Event.stop(event);
        }
    },

    makeActive: function(event){
        var element = Event.findElement(event, 'div');
        element.addClassName('active');
    },

    makeInactive: function(event){
        var element = Event.findElement(event, 'div');
        element.removeClassName('active');
    },

    toggleControl: function(el){
        if (!el) return false;
        $$('.easyslidercontrol a').invoke('removeClassName', 'active');
        el.addClassName('active');
    },

    stop: function(event){
        this.handStopped = true;
        clearTimeout(this.timer);
        Event.stop(event);
    },

    start: function(event){
        this.handStopped = false;
        this.periodicallyUpdate();
        if (event) {
            Event.stop(event);
        }
    },

    pause: function(event){
        if (!this.handStopped) {
            clearTimeout(this.timer);
            this.timer = null;
        }
        Event.stop(event);
    },

    resume: function(event){
        if (!this.handStopped) {
            this.periodicallyUpdate();
        }
    },

    periodicallyUpdate: function(){
        if (this.timer != null) {
            clearTimeout(this.timer);
            this.next();
        }
        this.timer = setTimeout(this.periodicallyUpdate.bind(this), this.options.frequency * 1000);
    }
});

<script>
function changeImage(filename) 
{
   document.main.src = filename; 
}
</script>

<table><tr><td><img name="main" src="images/4.gif"></td>
<td>
<a href="#" onClick="javascript:changeImage('images/1.gif')"><img src="images/11.gif"></a><br>
<a href="#" onClick="javascript:changeImage('images/2.gif')"><img src="images/22.gif"></a><br>
<a href="#" onClick="javascript:changeImage('images/3.gif')"><img src="images/33.gif"></a><br>
</td></tr></table>

<img src="notactiveimagemenu1.jpg" alt="">
<ul id="menu1">
   <li>link</li>
   <li>link</li>
   <li>link</li>
</ul>
<img src="notactiveimagemenu2.jpg" alt="">
<ul id="menu2">
   <li>link</li>
   <li>link</li>
   <li>link</li>
</ul>

// i was thinking about something like this:

// first put menu items in a array

// then use document.getElementById(id).onmouseover = function()
// and make some sort of check to see which src should be changed.

<script type="text/javascript">

var preload_ctrl_images=true;

//And configure the image buttons' images he 
var previmg='left.gif';
var stopimg='stop.gif';
var playimg='play.gif';
var nextimg='right.gif';

var slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own.
slides[0] = ["http://jpl.coj.net/pics/nav/home2/beaches-anniversary.jpg", "", "http://jaxpubliclibrary.org/progs/jb/25th-anniversary.pdf"];

slides[1] = ["http://jpl.coj.net/pics/nav/home2/young-author-visit.jpg", "", "http://jaxpubliclibrary.org/progs/mh/writers-express.pdf"];

slides[2] = ["http://jpl.coj.net/pics/nav/home2/jea-green.jpg", "", "http://jaxpubliclibrary.org/progs/jpl/home-energy-evaluation.html"];

slides[3] = ["http://jpl.coj.net/pics/nav/home2/tropic-cancer.jpg", "", "http://jaxpubliclibrary.org/progs/main/tropic-cancer.pdf"];

slides[4] = ["http://jpl.coj.net/pics/nav/home2/childrens-summer-reading.jpg", "", "http://jpl.coj.net/kids/kids-summer-reading2011.pdf"];

slides[5] = ["http://jpl.coj.net/pics/nav/home2/teen-summer-reading.jpg", "", "http://jpl.coj.net/teens/teens-summer-reading2011.pdf"];

slides[6] = ["http://jpl.coj.net/pics/nav/home2/harry-potter.jpg", "", "http://jpl.coj.net/progs/jpl/harry-potter-programs.pdf"];

slides[7] = ["http://jpl.coj.net/pics/nav/home2/internet-safety.jpg", "", "http://jaxpubliclibrary.org/Training/Internet-Safety/internet-safety.html"];

slides[8] = ["http://jpl.coj.net/pics/nav/home2/zines-art-walk.jpg", "", "http://jaxpubliclibrary.org/progs/main/zine-month.pdf"];

slides.no_descriptions=1; //use for no descriptions displayed //use for no descriptions displayed
//above slide show uses only the defaults
</script>

<script src="http://jpl.coj.net/common/javascripts/swissarmy.js" type="text/javascript">

</script>

window.onload = initAll;
var xhr = false;

function initAll() {
document.getElementById("makeTextRequest").onclick = getNewFile;
document.getElementById("makeXMLRequest").onclick = getNewFile;
}

function getNewFile() {
makeRequest(this.href);
return false;
}

function makeRequest(url) {
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) { }
}
}

if (xhr) {
xhr.onreadystatechange = showContents;
xhr.open("GET", url, true);
xhr.send(null);
}
else {
document.getElementById("updateArea").innerHTML = "Sorry, but I couldn't create an XMLHttpRequest";
}
}

function showContents() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
if (xhr.responseXML && xhr.responseXML.contentType=="text/xml") {
var outMsg = xhr.responseXML.getElementsByTagName("choices")[0].textContent;
}
else {
var outMsg = xhr.responseText;
}
}
else {
var outMsg = "There was a problem with the request " + xhr.status;
}
document.getElementById("updateArea").innerHTML = outMsg;
}
}

<!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">
<head>
<title>My First Ajax Script</title>
<script type="text/javascript" src="script01.js"></script>
</head>
<body>
<p><a id="makeXMLRequest" href="http://www.weather.gov/xml/current_obs/KOJC.xml">Request an XML file</a></p>
<div id="updateArea">&nbsp;</div>
</body>
</html>

<script language="JavaScript1.1">
<!--
/*
JavaScript Image slideshow
*/

var slideimages=new Array()
var slidelinks=new Array()

function slideshowimages(){
  for (i=0;i<slideshowimages.arguments.length;i++){
  slideimages[i]=new Image()
  slideimages[i].src=slideshowimages.arguments[i]
  }
}

function slideshowlinks(){
  for (i=0;i<slideshowlinks.arguments.length;i++)
  slidelinks[i]=slideshowlinks.arguments[i]
}

function gotoshow(){
  if (!window.winslide||winslide.closed)
    winslide=window.open(slidelinks[whichlink])
  else
    winslide.location=slidelinks[whichlink]
    winslide.focus()
}
//-->
</script>

<script>
		<!--
		//configure the paths of the images, plus corresponding target links
		slideshowimages("images/services/3d_meter.jpg", "images/services/3d_prototype.jpg", "images/services/3d_stage_renderings.jpg", "images/services/atsite.jpg", "images/services/netstar.jpg", "images/services/photo_manipulation.jpg", "images/services/powerpoint.jpg")
		slideshowlinks("/", "/", "/", "/", "/", "/", "/")

		//configure the speed of the slideshow, in miliseconds
		var slideshowspeed=8000
		var whichlink=0
		var whichimage=0

		function slideit(){
  		if (!document.images)
    		return
    		document.images.slide.src=slideimages[whichimage].src
    		whichlink=whichimage

  		if (whichimage<slideimages.length-1)
    		whichimage++
  		else
    		whichimage=0
    		setTimeout("slideit()",slideshowspeed)
		}
		slideit()
		//-->
		</script>

<?
//PHP SCRIPT: getimages.php
Header("content-type: application/x-javascript");

//This function gets the file names of all images in the current directory
//and ouputs them as a JavaScript array
function returnimages($dirname=".") {
$pattern="(\.jpg$)|(\.jpeg$"); //valid image extensions
$files = array();
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){ //if this file is a valid image
//Output it as a JavaScript array element
echo 'gallery['.$curimage.']="'.$file .'";';
$curimage++;
}
}

closedir($handle);
}
return($files);
}

echo 'var gallery=new Array();'; //Define array in JavaScript
returnimages() //Output the array elements containing the image file names
?>

<script type="text/javascript">

var curimg=0
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "images/"+gallery[curimg])
curimg=(curimg<gallery.length-1)? curimg+1 : 0
}

window.onload=function(){
setInterval("rotateimages()", 2500)
}
</script>

<div style="width: 170px; height: 160px">
<img id="slideshow" src="images/bear.gif" />
</div>

<img src="gallery[gallery.length-11]" /> </dd>

<script type="text/javascript">
var curimg=0
function newestimg(){
document.getElementById("largethumb").setAttribute("src", "images/"+gallery[curimg])
curimg=(curimg<gallery.length-1)? gallery.length-1 : curimg
} 

</script>

addEventListener("load", configurator, false);

function configurator() {
    var model = document.getElementById("Model").value
    var afbeelding = document.getElementById("modelafbeelding")

    

    switch (model) {
        case "Audi A1":

            var foto = "./images/audia1.png"
       
            afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
            break;
        case "Audi A3":

            var foto = "./images/audia3.png"

            afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
            break;
        case "Audi A4":

            var foto = "./images/audia4.png"

            afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
            break;
        case "Audi A5":

            var foto = "./images/audia5.png"

            afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
            break;
        case "Audi A6":

            var foto = "./images/audia6.png"

            afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
            break;
        case "Audi R8":

                var foto = "./images/audir8.png"

        afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
            break;


    }
}

   <tr>                    
                        <td><select id="Model" name="Model">
                            <option>Audi A1</option>
                            <option>Audi A3</option>
                            <option>Audi A4</option>
                            <option>Audi A5</option>
                            <option>Audi A6</option>
                            <option>Audi R8</option>
                        </select></td>
                        <div id="modelafbeelding"></div>
                    </tr>

function changeimg(){
document.getElementById('colors').src=document.getElementById('color_dropdown_options').value
}

 <label>
<select name="color" class="dropdown_options" id="color_dropdown_options" onchange="changeimg()">
<option value="/images/thumbnails/image1.jpg">White</option>
<option value="/images/thumbnails/image2.jpg">Blue</option>
<option value="/images/thumbnails/image3.jpg">Green</option>
</select>
</label>

<div id="display"><img src="/images/thumbnails/image1.jpg" width="270" height="382" alt="" id="colors" />