Showing images in a db with javascript

jredwilli

I have an array in javascript that holds the images stored in the db, and the script works for the most part since the images show up. But the problem is there are separate arrays created for each image and I want them to be in the same array. I cant figure out how to write the for loop so the array declaration is not apart of the for loop.

Heres the page that shows what Im talking about.
http://tweakurpages.com/test.php

This is where the problem is Im pretty sure:

	while ($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
		$id = $row['id'];
		$t = $row['title'];

for ($i = 0; $i <= $num_pics; $i++) {

	echo '<script type="text/javascript">';

            	echo 'var images=new Array()
		  images[' . $i . ']=["modules/pic.php?id=' . $id . '", "' . $t . '", "modules/show_pic.php?id=' . $id . '", "300px"]
		  ';

	echo 'var thepics=new photogallery(images, 3, 2, "500px", "600px", ["Browse Images:", "Page"])';

	echo '</script>';

} //end for loop

} //end while

Here is the whole code incase that helps:

// Count the number of records
$query = "SELECT COUNT(*) FROM images ORDER BY id DESC";
$result = @mysql_query ($query);
$row = mysql_fetch_array ($result, MYSQL_NUM);
$num_pics = $row[0];


$query = "SELECT id, title, name FROM images ORDER BY id DESC";
$result = @mysql_query ($query); // Run the query.
if (mysql_num_rows($result) > 0) {


while ($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
	$id = $row['id'];
	$t = $row['title'];

for ($i = 0; $i <= $num_pics; $i++) {

	echo '<script type="text/javascript">';
		//Define your own array to hold the photo album images
		//Syntax: ["path_to_thumbnail", "opt_image_title", "opt_destinationurl", "opt_linktarget"]

	echo 'var images=new Array()

		  images[' . $i . ']=["modules/pic.php?id=' . $id . '", "' . $t . '", "modules/show_pic.php?id=' . $id . '", "300px"]
		  ';
	//initiate a photo gallery
	//Syntax: new photogallery(imagearray, cols, rows, tablewidth, tableheight, opt_[paginatetext_prefix, paginatetext_linkprefix])

	echo 'var thepics=new photogallery(images, 3, 2, "500px", "600px", ["Browse Images:", "Page"])';

	echo '</script>';
}

} //end while

} // end IF

jmallory

Did you try nesting your loops?

First you need to get the total number of images returned form the query in your frst loop...then create a second loop going through the total number of images adding them to the array with their attributes.

jredwilli

jmallory wrote:
Did you try nesting your loops?

First you need to get the total number of images returned form the query in your frst loop...then create a second loop going through the total number of images adding them to the array with their attributes.

It isn't just a matter of how this code is nested, because I would think it would work if I just started the for loop after echoing the <script type> and new Array(), and before echoing the var thepics= new photogallery() part.

	for ($i = 0; $i <= $num_pics; $i++) {

	echo '<script type="text/javascript">';

     	      echo 'var images=new Array()

		  images[' . $i . ']=["modules/pic.php?id=' . $id . '", "' . $t . '", "modules/show_pic.php?id=' . $id . '", "300px"]
		  ';

	echo 'var thepics=new photogallery(images, 3, 2, "500px", "600px", ["Browse Images:", "Page"])';

	echo '</script>';

} // end for loop

I dont know javascript too well, so I wouldn't know why that wouldn't work.
I'm not sure I understand what you mean about nesting loops. Are you saying use a for loop to get the number of images, with another for loop nested in the first loop that loops through the total number, adding them to the array?

If thats what you mean then how could I go about looping through the total number of images, and add them to the array?

jmallory

You trying to add all of the images from your DB to one single Javascript array, yes?

Then you wold need to get the total cound of image returned and nest loops to create a multi-dimentional array.

for (i = 0; i < count; i++) {
image found, add it to the main array[i] = new Array()
for(j = 0; j < count; j++) {
add it to the array[i][0] = new image, property, property
}
}

jmallory

Realistically you should just be using a look up table to return one query of results instead of two.

jredwilli

Ok this is the source code I am stuck on, because the when I look at the source code of the output there doesn't seem to be any thing wrong, but the images don't show up.

$query = "SELECT id, title, name FROM images ORDER BY id DESC";
$result = @mysql_query ($query); // Run the query.
if (mysql_num_rows($result) > 0) {

echo '<script type="text/javascript">';
while ($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
	$id = $row['id'];

	echo 'for (i = 0; i < count; i++) {'; //image found, add it to the main 
		echo 'images[i] = new Array()';

		echo 'for(j = 0; j < count; j++) {'; //add it to the 
			echo 'images[i][0] = ["modules/pic.php?id=' . $id . '", "' . $t . '", "modules/show_pic.php?id=' . $id . '"]
				}
		}';	

} //end while
			echo 'var thepics=new photogallery(images, 3, 2, "400px", "300", ["Browse Images:", "Page"])';
		echo '</script>';

} // end IF

This is the exact source that get outputted on the page.

<script type="text/javascript">
for (i = 0; i < count; i++) {
images[i] = new Array()
     for(j = 0; j < count; j++) {
images[i][0] = ["modules/pic.php?id=3", "", "modules/show_pic.php?id=3"]
      }
}
for (i = 0; i < count; i++) {
images[i] = new Array()
     for(j = 0; j < count; j++) {
images[i][0] = ["modules/pic.php?id=1", "", "modules/show_pic.php?id=1"]
     }
}
var thepics=new photogallery(images, 3, 2, "400px", "300", ["Browse Images:", "Page"])
</script>

Where am I missing something?