get images from folders on my server instead of list of image links

[cjdjackson2hot]

hey guys this is my first post, looking at the sheer wwealth of knowledge on here i thought you guys would be the best people to ask.

I have created a photography website myself and coded it all in dreamweaver cs4. Now i have created it using html, as i didnt want to limit it to flash users and loading times etc etc. So today i found myself a nice simple slideshow tool that uses html and javascript. i created it using a site online (which i will not post as i dont think we are allowed to post to online sites).

The slideshow loads images up in the background, and it plays them in a random order.

Now i am able to define individual image links to either a url of the an image, or point it to individual images, listing them one by one in my coding, which as a photographer having differet galleries is goign to be a royal pain when i want to have new images showing up.

So my idea is to replace the code that retrieves in dividual images from url's, to replace it with a piece of code that will display an image from a list of about 7 or 8 folders on my server all containing images....

i.e. displays an image from the folder .../images/models/pic01.jpg then it brings up an iamge from a different folder .../images/portrait/pic08.jpg.

Is there a way to do this and how can i go about it?

this is the code i currently have:

<script type="text/javascript">
theimage = new Array();


// The dimensions of ALL the images should be the same or some of them may look stretched or reduced in Netscape 4.
// Format: theimage[...]=[image URL, link URL, name/description]
theimage[0]=["/images/models/photo01.jpg", "", ""];
theimage[1]=["/images/models/photo02.jpg", "", ""];
theimage[2]=["/images/models/photo03.jpg", "", ""];
theimage[3]=["/images/models/photo04.jpg", "", ""];
theimage[4]=["/images/models/photo05.jpg", "", ""];

///// Plugin variables

playspeed=3000;// The playspeed determines the delay for the "Play" button in ms
dotrans=1; // if value = 1 then there are transitions played in IE
transtype='revealtrans';// 'blendTrans' or 'revealtrans'
transattributes='0';// duration=seconds,transition=#<24
//#####
//key that holds where in the array currently are
i=0;


//###########################################
//if random
function SetRandom() {
	tempimage = new Array();
	for(p=0; p<theimage.length; p++){
		for(p1=0; p1>-1; p1) {
			tempNum = Math.floor(Math.random()*theimage.length)
			if(!tempimage[tempNum]){
				tempimage[tempNum]=theimage[p];
				break;
			}
		}
	}
	for(p=0;p<theimage.length;p++)theimage[p]=tempimage[p];
}

//if random order
SetRandom()


//###########################################
window.onload=function(){

	//preload images into browser
	preloadSlide();

	//set transitions
	GetTrans();

	//set the first slide
	SetSlide(0);

	//autoplay
	PlaySlide();
}

//###########################################
function SetSlide(num) {
	//too big
	i=num%theimage.length;
	//too small
	if(i<0)i=theimage.length-1;

	//switch the image
	if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Apply()')
	document.images.imgslide.src=theimage[i][0];
	if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Play()')

}


//###########################################
function PlaySlide() {
	if (!window.playing) {
		PlayingSlide(i+1);
		if(document.slideshow.play){
			document.slideshow.play.value="   Stop   ";
		}
	}
	else {
		playing=clearTimeout(playing);
		if(document.slideshow.play){
			document.slideshow.play.value="   Play   ";
		}
	}
	// if you have to change the image for the "playing" slide
	if(document.images.imgPlay){
		setTimeout('document.images.imgPlay.src="'+imgStop+'"',1);
		imgStop=document.images.imgPlay.src
	}
}


//###########################################
function PlayingSlide(num) {
	playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed);
}


//###########################################
//desc: picks the transition to apply to the images
function GetTrans() {
	//si=document.slideshow.trans.selectedIndex;

		if((document.slideshow.trans && document.slideshow.trans.selectedIndex == 0) || (!document.slideshow.trans && dotrans==0)){
		dotrans=0;
	}
	else if ((document.slideshow.trans && document.slideshow.trans.selectedIndex == 1) || (!document.slideshow.trans && transtype == 'blendTrans')){
		dotrans=1;
		transtype='blendTrans';
		document.imgslide.style.filter = "blendTrans(duration=1,transition=1)";
	}else{
		dotrans=1;
		transtype='revealtrans';
		if(document.slideshow.trans) transattributes=document.slideshow.trans[document.slideshow.trans.selectedIndex].value;
		document.imgslide.style.filter = "revealTrans(duration=1,transition=" +transattributes+ ")";
	}

}
//###########################################
function preloadSlide() {
	for(k=0;k<theimage.length;k++) {
		theimage[k][0]=new Image().src=theimage[k][0];
	}
}


</script>

then this is the little bit of html

<!-- slide show HTML -->
<form name="slideshow">

<table border="1" cellpadding="2" cellspacing="0">
<tr>
	<td align="center">
	<a href="#" onMouseOver="this.href=theimage[i][1];return false">
	<script type="text/javascript">
		document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
	</script>
	</a>
	</td>
</tr>
</table>

</form>
<!-- end of slide show HTML -->

hope someone can shed a little light on this for me

thank you

Chris

p.s. i found this which maybe able to help someone...... this is similar to what i would like just like to be able to pull from more than one directory, although i have no knowledge of how to use php really

http://www.dynamicdrive.com/forums/s...ad.php?t=24304


thanks

[djr33]

You will need to use a serverside language like PHP to be able to access information about the server.

You can use Ajax (a method within Javascript) to request the PHP result behind the scenes, rather than needing to reload the page.


The PHP isn't that hard to write, but how do you want to organize this: do you want to have 7-8 different galleries, or just throw all of the folders into one gallery?


There is already a script like this on dynamic drive, the PHP Photo Album, and it could be modified to search more than one directory. Or you could merge the two scripts to create a new one.

The question is really how you want to approach the problem, and if you want someone to do this for you or if you want help learning how to do it. If you just want someone to do it for you, you might be best posting in the paid requests section, and it probably wouldn't be too expensive. Or you could try yourself and we can offer advice as you continue.

[cjdjackson2hot]

Basically for this i just need to find out how i can get this slideshow to call up images from the different folders on my server that will llook like this.

-root folder of site
- images
-portraits
-landscapes
-weddings
- etc etc


Theres a folder in the root of my site named images. In here there will then be several different folders containign a different type of photograph, so i want this slideshow on my home page to simply load up alll the photos in the background as this code currently does with this one folder...........but then it will display random photos from each of the folders and not just the one folder as it currently does

This slideshow is on my home page......the users can wtch a few of these images flick through before deciding to go to my gallery page wich contains several differnt links to differnt pages to display all the images in the particular folders,

example: home page gallery will load up all the photos (this is what it currently does but only for the one directory) then it plays them all for 3 seconds each in a random order. So instead i want it to be able to load up(in random order) a picture from weddings, then a picture from protraits then possibly another from weddings then one from landscapes etc etc


id rather learn how to do it as seeing as im not making profit from the site i cant afford to pay, but yeah id like advice on how to do it

thanks

CHris