Member Avatar for Walter Faber

so i found this script which is perfect.. it loads all my content from my ftp and randomizes them.... BUT you always have to refresh the site.. my question now is.. how can i add a fixed frame or just a button which allows me to refresh the pictures instead of the whole page..
[already got an refrsh button.. but like i sad..for the whole page -.- not just the content.]

Thanks for any help and greets from germany.

<p align="center"><script type="text/javascript">
function random_imglink(){

<?php
function returnimages($dirname="./content/") {
   $pattern="\.(jpg|jpeg|png|gif|bmp)$";
   $files = array();
   $curimage=0;
   if($handle = opendir($dirname)) {
       while(false !== ($file = readdir($handle))){
               if(eregi($pattern, $file)){
                 echo 'myimages[' . $curimage .']="' . $dirname . $file . '";' . "
";
                 $curimage++;
               }
       }

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

echo "var myimages=new Array();" . "
";
returnimages();
?>

var ry=Math.floor(Math.random()*myimages.length)
document.write('<img src="'+myimages[ry]+'" border=0>')
}
random_imglink()
</script>
<br>
<a href="javascript:document.location.reload();"
ONMOUSEOVER="window.status='Refresh'; return true"
ONMOUSEOUT="window.status='ah... that was good'">
<img src="images/refresh_button.jpg"
width="100" height="50" border="0" /></a>
</p>
  • 3 Contributors
  • 6 Replies
  • 232 Views
  • 3 Hours Discussion Span
  • Latest Post Latest Post by noelthefish

Dani AI

Generated

As ’s code shows, the server (PHP) is already generating a client-side list of image URLs. The easiest, safest fix is to stop using document.write() and instead place a single persistent <img> in the page, then swap its src with JavaScript when the “refresh” button is clicked. That updates only the picture area — no full-page reload needed. As noted, PHP runs server-side so the swap must happen in client-side JS; and was right that picking another random array index will do the trick — it just needs to be applied to an existing DOM element instead of re-writing the document.

Minimal example (replace the initial src and rely on the myimages array your PHP already emits):

<img id="randImg" src="placeholder.jpg" alt="random image">

<button id="refreshBtn">New image</button>

<script>
function refreshImage(){
  var i = Math.floor(Math.random()*myimages.length);
  document.getElementById('randImg').src = myimages[i] + '?_=' + Date.now(); // cache-buster
}
document.getElementById('refreshBtn').addEventListener('click', refreshImage);
</script>

If the page does not already contain a JS array of URLs, add a small server endpoint that returns a JSON list and fetch it from the client (or have PHP echo the array into the page). Troubleshooting notes: avoid calling document.write() after load (it can overwrite the page), ensure image URLs are HTTP/HTTPS accessible (not raw ftp://), and append a timestamp or random query string when swapping src to avoid browser caching.

Recommended Answers

All 6 Replies

Member Avatar for fheppell

PHP is server side which means there is no way to actually refresh the data without reloading the page unless you use AJAX which is releativley complicated, and it's more of a JS thing so you'd be better of asking there.

Hope this helps!

Member Avatar for Walter Faber

ah dang it!

thought of something like this would come up, but thx for the quick answer!!

Member Avatar for fheppell

If you think this question has been sufficently answered, please click the button at the bottom that says 'Mark question solved' and if possible, upvote the answer that helped you. This means that people can easily see your issue has been resolved. Thanks!

Member Avatar for noelthefish

You have stored all the images in an array so all you need to do is to run the same 2 lines of code and it will pick another random image.it's line 28 and 29.

Member Avatar for fheppell

You have stored all the images in an array so all you need to do is to run the same 2 lines of code and it will pick another random image.it's line 28 and 29.

The OP doesn't want a way to generate another set of images, they want to be able to get a new set replacing the old one without refreshing the whole page.

Member Avatar for noelthefish

Choosing another random array position number and then writing it to the document does not generate a new set of images it just changes the image there without refreshing the page which is my understanding of what they need

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.