Calling images dynamicly using javascript and php

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);

am just storing them as usual as a varchar url address. and what is What is blobs — Salim Almughairi
– Salim Almughairi, Commented Jul 30, 2012 at 0:02

Charlie Rudenstål · Accepted Answer · 2012-07-30 00:22:00Z

1

One of several options.

Query the database for the column with the URL of the images.
```
$query = mysql_query("SELECT url FROM images");
```

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

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

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);  
```
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.

edited Jul 30, 2012 at 0:22

answered Jul 30, 2012 at 0:13

Charlie Rudenstål

4,3681 gold badge16 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Salim Almughairi Over a year ago

Your the man thanks alot for your time that gives me a very good idea, but onemore thing do i put<script> tag within the php code to assign the array from php to the array of Javascript

Charlie Rudenstål Over a year ago

Yes. You could do it like that. <script type="text/html">var imageArray = <?php echo json_encode($imageArray); ?>;</script>

jfriend00 · Accepted Answer · 2012-07-30 00:02:28Z

0

Two choices:

Using PHP when your page is created, put an array of images in the page and use page-level javascript to cycle among them.
Using Ajax in the page, call from the page to the server to get the next image and then use client-side javascript to make that returned image visible on the page.

answered Jul 30, 2012 at 0:02

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

3 Comments

Salim Almughairi Over a year ago

can you show me an example if you do not mind to get a better fell of what your saying

jfriend00 Over a year ago

@SalimAlmughairi - That sounds like a pretty basic question. Since I don't know what toolset you're using on the client, I'd suggest you read up on ajax which is how a client makes a call to the server while staying on the same web page. Then, after you familiarize yourself a bit with the technology, you can ask a more specific question. There are hundreds of thousands of articles on the web about ajax.

Salim Almughairi Over a year ago

thank you but it sound basic because i am still new to javascript.

Collectives™ on Stack Overflow

Calling images dynamicly using javascript and php

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related