Question

i am new to Javascript and i have created the code below it works fine no problem at all however i want to know what is i want to pull the image dynamically using php and javascript from mysql database how can i refactor my code bellow. thanks in advance for your contribution.

var myimage = document.getelementById("mainImage");
var imageArray =["images/overlook.jpg","images/garden.jpg","images/park.jpg"];

var imageIndex =0;

function changeimage(){
      myimage.setAttribute("src",imageArray[imageIndex]);
      imageIndex++;
      if(imageIndex >= imageArray.length){
      imageIndex = 0;
}

setInterval(changeimage, 5000);

Answer 1

One of several options.

1. Query the database for the column with the URL of the images.

   $query = mysql_query("SELECT url FROM images");
   

2. Then something like this to get an array out of it:

   $images = array();
   while($row = mysql_fetch_array($query)){
       $images[] = $row['url'];
   }
   

3. Then generate this string (that you use in the Javascript provided):

   var imageArray = ["images/overlook.jpg","images/garden.jpg","images/park.
   

   using the array you retrieved from the database. You could use json_encode in PHP for this if you don’t want to mess around with error prone string building.

   $imagesAsJsonArray = json_encode($images);  
   

4. Echo it. Done.

Not the most elegant of solutions. But it gives you something to play with. Check out a few PHP tutorials online and you’ll soon get the hang of it.