Images Do Not Display

garyblackpool · October 30, 2009

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>

justsomeguy · October 30, 2009

Do you have this online somewhere where it can be tested? I don't know what happened, but that Javascript is missing all of the plus operators.

garyblackpool · October 30, 2009

Do you have this online somewhere where it can be tested? I don't know what happened, but that Javascript is missing all of the plus operators.

http://www.gardenbelle.co.uk/Personal/pro/...phpslidshow.phpThanks

justsomeguy · October 30, 2009

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.

garyblackpool · October 30, 2009

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>

garyblackpool · October 30, 2009

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>

justsomeguy · October 30, 2009

There are still a few Javascript errors that I'm seeing in Firebug. It's probably best not to give functions or variables the same names as IDs of elements, that may confuse some browsers. You're also missing the increment for the array counter.

garyblackpool · October 30, 2009

There are still a few Javascript errors that I'm seeing in Firebug. It's probably best not to give functions or variables the same names as IDs of elements, that may confuse some browsers. You're also missing the increment for the array counter.

Yes thanks i fixed that now.Cheers

justsomeguy · October 30, 2009

You can also use array.push instead of using a counter. e.g.:$list .= 'pict.push("'.$path .'");';

garyblackpool · October 30, 2009

You can also use array.push instead of using a counter. e.g.:$list .= 'pict.push("'.$path .'");';

Oh wow thank you very much it works now briiliantly cheers.Gary

Sign In

Images Do Not Display

Recommended Posts

garyblackpool

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

garyblackpool

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

garyblackpool

Link to comment

Share on other sites

garyblackpool

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

garyblackpool

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

garyblackpool

Link to comment

Share on other sites

Archived

Browse

Activity