Jump to content

Images Do Not Display


garyblackpool
 Share

Recommended Posts

Hi i have this php to get images from a directory and then putting them into a slide show. Unfortunatly rather than displaying the images it writes them file names (in the page source).Thanks for help

<html><head><script language="javascript" type="text/javascript" ><?phpob_start(); //Output buffering$imgDir = "images/"; // the directory the iimages reside in$counter = 0; // our file counter;$list = "";//regex pattern to check file extensions$pattern="(.jpg$)|(.png$)";//read through the dir and create the img listif($dir = opendir($imgDir)) {while(false !== ($file = readdir($dir))){if(eregi($pattern, $file)){$path = $imgDir . $file;$list .= 'pict['.$counter.']="'.$path .'";' /*.chr(13)*/;$counter ;}}closedir($dir);}//echo the array declarationecho "pict = new Array();" /*. chr(13)*/;echo $list;ob_end_flush();?>var i=0;var paused=false;var running=false;function next(){if(running==true){stop();}if(i<pict.length-1){i ;document.getElementById('picture').src=pict[i];document.getElementById('number').innerHTML="Picture " (i 1);}else{i=0;document.getElementById('picture').src=pict[i];document.getElementById('number').innerHTML="Picture " (i 1);}}function prev(){if(running==true){stop();}if (i>0){i--;document.getElementById('picture').src=pict[i];document.getElementById('number').innerHTML="Picture " (i 1);}else{i=pict.length-1;document.getElementById('picture').src=pict[i];document.getElementById('number').innerHTML="Picture " (i 1);}}function startSlide(){running=true;interval = setInterval(FFSlideshow,3000);document.getElementById("slideshow").disabled=true;document.getElementById('number').innerHTML="Picture " (i 1);}function FFSlideshow(){if (i<pict.length-1){document.getElementById("slideshow").disabled=true;idocument.getElementById('picture').src=pict[i];document.getElementById('number').innerHTML="Picture " (i 1);}else{i=0;document.getElementById('picture').src=pict[i];document.getElementById('number').innerHTML="Picture " (i 1);}}function pause(){if(running==true){if(paused==false){paused=true;document.getElementById("pause").value="resume";clearInterval(interval);document.getElementById('number').innerHTML="Paused";}else{startSlide()paused=false;document.getElementById("pause").value="pause";}}}function stop(){document.getElementById("slideshow").disabled=false;document.getElementById('number').innerHTML="End of slideshow";running=false;paused=false;document.getElementById("pause").value="pause";clearInterval(interval);}</script></head><body><center><div id="pictureContainer"><img id="picture" name="picture" src="images/1.png" /></div><br /><input id="prev" type="button" value="prev" onclick="prev()" /><input id="next" type="button" value="next" onclick="next()" /><input id="slideshow" type="button" value="slideshow" onclick="startSlide()" /><input id="stop" type="button" value="stop" onclick="stop()" /><input id="pause" type="button" value="pause" onclick="pause()" /><br /><div id="number">Picture 1</div></center></body></html>

Link to comment
Share on other sites

The code online is the same as here, so it's missing several plus operators. e.g. this:

i;document.getElementById('picture').src=pict[i];document.getElementById('number').innerHTML="Picture " (i 1);

should be this:

i++;document.getElementById('picture').src=pict[i];document.getElementById('number').innerHTML="Picture " + (i + 1);

It looks like there are several other places where those got removed also, check for error messages.

Link to comment
Share on other sites

Hi I belive that i have sorted that out now but its still not working all the pictures have 0 as the array value.thanks

<html><head><script language="javascript" type="text/javascript">   var i=0;   var finished=false;   var paused=false;   var running=false;    <script language="javascript" type="text/javascript" >   <?ob_start(); //Output buffering$imgDir = "images/"; // the directory the iimages reside in$counter = 0; // our file counter;$list = "";//regex pattern to check file extensions$pattern="(.jpg$)|(.png$)";//read through the dir and create the img listif($dir = opendir($imgDir)) {while(false !== ($file = readdir($dir))){if(eregi($pattern, $file)){$path = $imgDir . $file;$list .= 'pict['.$counter.']="'.$path .'";' /*.chr(13)*/;$counter ;}}closedir($dir);}//echo the array declarationecho "pict = new Array();" /*. chr(13)*/;echo $list;ob_end_flush();?>         function next()   {      finished=false;      if(i<pict.length-1)      {         i++;         document.getElementById('picture').src=pict[i];         document.getElementById('number').innerHTML="Picture "+1*(i+1);      }      else      {         i=0;         document.getElementById('picture').src=pict[i];         document.getElementById('number').innerHTML="Picture "+1*(i+1);      }   }   function prev()   {      finished=false;      if (i>0)      {         i--;         document.getElementById('picture').src=pict[i];         document.getElementById('number').innerHTML="Picture "+1*(i+1);      }      else      {         i=pict.length-1;         document.getElementById('picture').src=pict[i];         document.getElementById('number').innerHTML="Picture "+1*(i+1);      }   }   function startSlide()   {      running=true;      if(navigator.appVersion.indexOf("MSIE") == -1)      {         interval = setInterval(FFSlideshow,5000);      }      else      {         interval = setInterval(slideshow,5000);      }      document.getElementById("slideshow").disabled=true;      document.getElementById('number').innerHTML="Picture "+1*(i+1);   }   function slideshow()   {      if (i<pict.length-1)      {         document.getElementById('pictureContainer').filters[0].Apply();         document.getElementById("slideshow").disabled=true;         i++;         document.getElementById('picture').src=pict[i];         document.getElementById('number').innerHTML="Picture "+1*(i+1);         document.getElementById('pictureContainer').filters[0].Play();      }      else if (i==pict.length-1 && finished==false)      {         document.getElementById("slideshow").disabled=false;         document.getElementById('number').innerHTML="End of slideshow";         finished=true;         running=false;         clearInterval(interval);      }      else      {         document.getElementById('pictureContainer').filters[0].Apply();         i=0;         finished=false;         document.getElementById('picture').src=pict[i];         document.getElementById('number').innerHTML="Picture "+1*(i+1);         document.getElementById('pictureContainer').filters[0].Play();      }   }   function FFSlideshow()   {      if (i<pict.length-1)      {         document.getElementById("slideshow").disabled=true;         i++         document.getElementById('picture').src=pict[i];         document.getElementById('number').innerHTML="Picture "+1*(i+1);      }      else if (i==pict.length-1 && finished==false)      {         document.getElementById("slideshow").disabled=false;         document.getElementById('number').innerHTML="End of slideshow";         finished=true;         running=false         clearInterval(interval);      }      else      {         i=0;         finished=false;         document.getElementById('picture').src=pict[i];         document.getElementById('number').innerHTML="Picture "+1*(i+1);      }   }   function pause()   {      if(running==true)      {         if(paused==false)         {            paused=true;            document.getElementById("pause").value="resume";            clearInterval(interval);            document.getElementById('number').innerHTML="Paused";         }         else         {            startSlide()            paused=false;            document.getElementById("pause").value="pause";         }      }   }</script></head><body onload="loadPics()">   <center>      <div id="pictureContainer" style="width:560px; filter:progid:DXImageTransform.Microsoft.Fade(duration=1.0,overlap=1.0)">         <img id="picture" name="picture" src="1.jpg" /></div><br />         <input id="prev" type="button" value="prev" onclick="prev()" />         <input id="next" type="button" value="next" onclick="next()" />         <input id="slideshow" type="button" value="slideshow" onclick="startSlide()" />         <input id="pause" type="button" value="pause" onclick="pause()" /><br />      <div id="number">Picture 1</div>   </center></body></html>

Edited by garyblack
Link to comment
Share on other sites

okay i have sorted that bit out but its still not working. is it the array cos all of the items are have the value of 0.

<html><head><script language="javascript" type="text/javascript">   var i=0;   var finished=false;   var paused=false;   var running=false;    <script language="javascript" type="text/javascript" >   <?ob_start(); //Output buffering$imgDir = "images/"; // the directory the iimages reside in$counter = 0; // our file counter;$list = "";//regex pattern to check file extensions$pattern="(.jpg$)|(.png$)";//read through the dir and create the img listif($dir = opendir($imgDir)) {while(false !== ($file = readdir($dir))){if(eregi($pattern, $file)){$path = $imgDir . $file;$list .= 'pict['.$counter.']="'.$path .'";' /*.chr(13)*/;$counter ;}}closedir($dir);}//echo the array declarationecho "pict = new Array();" /*. chr(13)*/;echo $list;ob_end_flush();?>         function next()   {      finished=false;      if(i<pict.length-1)      {         i++;         document.getElementById('picture').src=pict[i];         document.getElementById('number').innerHTML="Picture "+1*(i+1);      }      else      {         i=0;         document.getElementById('picture').src=pict[i];         document.getElementById('number').innerHTML="Picture "+1*(i+1);      }   }   function prev()   {      finished=false;      if (i>0)      {         i--;         document.getElementById('picture').src=pict[i];         document.getElementById('number').innerHTML="Picture "+1*(i+1);      }      else      {         i=pict.length-1;         document.getElementById('picture').src=pict[i];         document.getElementById('number').innerHTML="Picture "+1*(i+1);      }   }   function startSlide()   {      running=true;      if(navigator.appVersion.indexOf("MSIE") == -1)      {         interval = setInterval(FFSlideshow,5000);      }      else      {         interval = setInterval(slideshow,5000);      }      document.getElementById("slideshow").disabled=true;      document.getElementById('number').innerHTML="Picture "+1*(i+1);   }   function slideshow()   {      if (i<pict.length-1)      {         document.getElementById('pictureContainer').filters[0].Apply();         document.getElementById("slideshow").disabled=true;         i++;         document.getElementById('picture').src=pict[i];         document.getElementById('number').innerHTML="Picture "+1*(i+1);         document.getElementById('pictureContainer').filters[0].Play();      }      else if (i==pict.length-1 && finished==false)      {         document.getElementById("slideshow").disabled=false;         document.getElementById('number').innerHTML="End of slideshow";         finished=true;         running=false;         clearInterval(interval);      }      else      {         document.getElementById('pictureContainer').filters[0].Apply();         i=0;         finished=false;         document.getElementById('picture').src=pict[i];         document.getElementById('number').innerHTML="Picture "+1*(i+1);         document.getElementById('pictureContainer').filters[0].Play();      }   }   function FFSlideshow()   {      if (i<pict.length-1)      {         document.getElementById("slideshow").disabled=true;         i++         document.getElementById('picture').src=pict[i];         document.getElementById('number').innerHTML="Picture "+1*(i+1);      }      else if (i==pict.length-1 && finished==false)      {         document.getElementById("slideshow").disabled=false;         document.getElementById('number').innerHTML="End of slideshow";         finished=true;         running=false         clearInterval(interval);      }      else      {         i=0;         finished=false;         document.getElementById('picture').src=pict[i];         document.getElementById('number').innerHTML="Picture "+1*(i+1);      }   }   function pause()   {      if(running==true)      {         if(paused==false)         {            paused=true;            document.getElementById("pause").value="resume";            clearInterval(interval);            document.getElementById('number').innerHTML="Paused";         }         else         {            startSlide()            paused=false;            document.getElementById("pause").value="pause";         }      }   }</script></head><body onload="loadPics()">   <center>      <div id="pictureContainer" style="width:560px; filter:progid:DXImageTransform.Microsoft.Fade(duration=1.0,overlap=1.0)">         <img id="picture" name="picture" src="1.jpg" /></div><br />         <input id="prev" type="button" value="prev" onclick="prev()" />         <input id="next" type="button" value="next" onclick="next()" />         <input id="slideshow" type="button" value="slideshow" onclick="startSlide()" />         <input id="pause" type="button" value="pause" onclick="pause()" /><br />      <div id="number">Picture 1</div>   </center></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...