securobo2 Posted September 4, 2010 Share Posted September 4, 2010 I have a directory with alot of images with very different names. I would like to read the directory and put the image file names into an array, which I can use with various javascript functions. How can I do this using javascript.I am using an Image object and I would like to read into the Image.src property. An array of objects if you will. Link to comment Share on other sites More sharing options...
jeffman Posted September 5, 2010 Share Posted September 5, 2010 JavaScript cannot read your directory in a direct way. The closest you can come is to allow directory indexing on your server, use AJAX or an iFrame to get the document returned by http://www.mysite.com/mydirectory/ , and find a way to parse the links. This is totally doable, but kind of a hassle. And who really permits directory listing anymore?ORIf you can live with a static directory, then just copy the file names and write them into a JavaScript array. This is not a good solution if the directory contents are dynamic and you want an automated system.ORThe best thing would be to learn enough PHP to generate a directory listing and write it into your document as a JavaScript array. This wouldn't require very much code at all.In fact, heck, here's something you could use. (Adapted from something I had lying around, but not tested as such.) Change the pathname as needed. If things don't work, View Source in your browser and see what it outputs. What you see should suggest ways to change the PHP.Note: you'll probably have to change your file extension to .php <script type="text/javascript"> image_array = new Array();<?php $mydir = 'images'; chdir($mydir); $ims = glob('*'); $i = 0; foreach ($ims as $im) { if (is_file($im) ) { echo " image_array[$i] = '$mydir/$im';\n"; } ++$i; }?></script> Link to comment Share on other sites More sharing options...
thescientist Posted September 5, 2010 Share Posted September 5, 2010 is there any benefit to this way vs. having PHP return JSON? Link to comment Share on other sites More sharing options...
dsonesuk Posted September 5, 2010 Share Posted September 5, 2010 gallery_js.php imagearray = new Array();imgheight = new Array()<?php$imgdir = '../images/';$filename=glob($imgdir."*.gif"); echo 'var pathlength = '.strlen($imgdir).';'."\n";for($i=0;$i<count($filename);$i++){$size=getimagesize($filename[$i]);echo 'imagearray['.$i.']="'.$filename[$i].'";'."\n";echo 'imgheight['.$i.']="'.$size[1].'";'."\n";}?>var x=0;window.onload=function(){prevref=document.getElementById("prev");nextref=document.getElementById("next");prevref.onclick=function(){keeptrack(this)};nextref.onclick=function(){keeptrack(this)};document.getElementById("slideshow").src=imagearray[x];document.getElementById("slideshow").alt=imagearray[x].substr(pathlength);document.getElementById("slideshow").title=imagearray[x].substr(pathlength);document.getElementById("slideshow").style.marginTop=(450-imgheight[x])/2+"px";prevref.disabled=true;}function keeptrack(element) { if(element.id == "prev") { x--; } else { x++; } changeimg(); }function changeimg(){if(x>0) { prevref.disabled=false; }else { prevref.disabled=true; }if(x>=(imagearray.length-1)) { nextref.disabled=true; }else { nextref.disabled=false; }document.getElementById("slideshow").src=imagearray[x];document.getElementById("slideshow").alt=imagearray[x].substr(pathlength);document.getElementById("slideshow").title=imagearray[x].substr(pathlength);document.getElementById("slideshow").style.marginTop=(450-imgheight[x])/2+"px";} gallery.htm <!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><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript" src="gallery_js.php"></script><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">#gallery_outer{width:600px; overflow:hidden; margin:0 auto; background-color:#9900CC;}#gallery_inner{ height:450px; background-color:#99CC66; text-align:center; width:580px; margin:10px;overflow:hidden;}#left_controls, #right_controls{ height:50px;width:50%; background-color:#006699; overflow:hidden;}#prev{float:right;}#next, #right_controls, #left_controls{float:left;}#next, #prev { margin:12px; height:25px; font-size:10px; font-family:Verdana, Arial, Helvetica, sans-serif; padding:0 5px;}</style></head><body><div id="gallery_outer"><div id="gallery_inner"><img id="slideshow" src="" alt="" title="" /></div><div id="left_controls"><input type="button" id="prev" value="<<" /></div><div id="right_controls"><input type="button" id="next" value=">>" /></div></div></body></html> Link to comment Share on other sites More sharing options...
jeffman Posted September 5, 2010 Share Posted September 5, 2010 is there any benefit to this way vs. having PHP return JSON?JSON's great for AJAX. In fact, the code I stripped my part from originally did generate JSON for an AJAX app. I didn't sense that OP was doing AJAX. It's simple enough to change, though. Link to comment Share on other sites More sharing options...
thescientist Posted September 5, 2010 Share Posted September 5, 2010 I didn't sense that OP was doing AJAX.That's what I thought, but I wasn't sure what the "best practice" would be technically be. I imagine handling the directory searching and array creation on one end would be practical and then all Javascript has to do is worry about (error) handling the JSON array. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.