javascript image array from database
I have a small image gallery where I'm using javascript to show the images in div's and go through the pages. Right now it's hardcoded to a set of images and that works.
However, i have the images on the server with the file path in a table on the database, what is the best way to make this a dynamic array so it updates with the images from the database when i select a category?
However, i have the images on the server with the file path in a table on the database, what is the best way to make this a dynamic array so it updates with the images from the database when i select a category?
<select name="catDropDown" id="catDropDown" onchange="javascript:getCategory()">
<option value="-" selected="selected">Select a Category</option>
<option value="bellTower">Bell Tower</option>
</select>
</p>
</div>
<p> </p>
<p> </p>
<div id="r1c1"></div>
<div id="r1c2"></div>
<div id="r1c3"></div>
<div id="r2c1"></div>
<div id="r2c2"></div>
<div id="r2c3"></div>
<p>
<script type="text/javascript"><!--
var bellTowerArray = new Array();
bellTowerArray[0] = "bellTower01.jpg";
bellTowerArray[1] = "bellTower02.jpg";
bellTowerArray[2] = "bellTower03.jpg";
bellTowerArray[3] = "bellTower04.jpg";
bellTowerArray[4] = "bellTower05.jpg";
bellTowerArray[5] = "bellTower06.jpg";
bellTowerArray[6] = "bellTower07.jpg";
bellTowerArray[7] = "bellTower08.jpg";
bellTowerArray[8] = "bellTower09.jpg";
bellTowerArray[9] = "bellTower10.jpg";
bellTowerArray[10] = "bellTower11.jpg";
bellTowerArray[11] = "bellTower12.jpg";
bellTowerArray[12] = "bellTower13.jpg";
bellTowerArray[13] = "bellTower14.jpg";
bellTowerArray[14] = "bellTower15.jpg";
bellTowerArray[15] = "bellTower16.jpg";
var currArray = new Array();
function getCategory(){
if(document.getElementById("catDropDown").selectedIndex == 1)
currArray = bellTowerArray;
else if(document.getElementById("catDropDown").selectedIndex == 2)
currArray = fountainArray;
if(document.getElementById("catDropDown").selectedIndex > 0){
displayImages(0);
doPagination();
} // end if
} // end of getCategory
function displayImages(start){
// r1c1
if(!(start > currArray.length-1))
document.getElementById("r1c1").innerHTML = "<a id=\"r1c1_a\" href=\"images/" + currArray[start] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th_" + currArray[start] + "\" id=\"r1c1_img\" width=\"160\" height=\"160\" alt=\"This is the static description\" title=\"This is the static description\" /><"+"/a>";
else
document.getElementById("r1c1").innerHTML = "";
// r1c2
if(!(start+1 > currArray.length-1))
document.getElementById("r1c2").innerHTML = "<a id=\"r1c2_a\" href=\"images/" + currArray[start+1] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th_" + currArray[start+1] + "\" id=\"r1c2_img\" width=\"160\" height=\"160\" alt=\"This is the static description\" title=\"This is the static description\" /><"+"/a>";
else
document.getElementById("r1c2").innerHTML = "";
// r1c3
if(!(start+2 > currArray.length-1))
document.getElementById("r1c3").innerHTML = "<a id=\"r1c3_a\" href=\"images/" + currArray[start+2] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th_" + currArray[start+2] + "\" id=\"r1c3_img\" width=\"160\" height=\"160\" alt=\"This is the static description\" title=\"This is the static description\" /><"+"/a>";
else
document.getElementById("r1c3").innerHTML = "";
// r2c1
if(!(start+3 > currArray.length-1))
document.getElementById("r2c1").innerHTML = "<a id=\"r2c1_a\" href=\"images/" + currArray[start+3] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th_" + currArray[start+3] + "\" id=\"r2c1_img\" width=\"160\" height=\"160\" alt=\"This is the static description\" title=\"This is the static description\" /><"+"/a>";
else
document.getElementById("r2c1").innerHTML = "";
// r2c2
if(!(start+4 > currArray.length-1))
document.getElementById("r2c2").innerHTML = "<a id=\"r2c2_a\" href=\"images/" + currArray[start+4] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th_" + currArray[start+4] + "\" id=\"r2c2_img\" width=\"160\" height=\"160\" alt=\"This is the static description\" title=\"This is the static description\" /><"+"/a>";
else
document.getElementById("r2c2").innerHTML = "";
// r2c3
if(!(start+5 > currArray.length-1))
document.getElementById("r2c3").innerHTML = "<a id=\"r2c3_a\" href=\"images/" + currArray[start+5] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th_" + currArray[start+5] + "\" id=\"r2c3_img\" width=\"160\" height=\"160\" alt=\"This is the static description\" title=\"This is the static description\" /><"+"/a>";
else
document.getElementById("r2c3").innerHTML = "";
} // end of displayImages
function doPagination(){
var numpages = (currArray.length / 6) +1;
var numleft = currArray.length % 6;
document.getElementById("pagination").innerHTML = "";
for(i=0; i<numpages-1; i++){
document.getElementById("pagination").innerHTML += "<span onclick='displayImages(" + i*6 + ")'>" + (i+1) + "<"+"/span>";
} // end for
if(numpages <=1)
document.getElementById("pagination").innerHTML = "";
} // end pages
ASKER
I'm pretty new, just learning it all. Would using var bellTowerArray make it static? There are numerous categories that are in the database which can be choose from the drop down and thus bring up those images for that category.
Still trying to get the question clear in my mind. Would this paraphrase it in layman's terms?
"I have a web site with lots of pictures. The pictures are listed in a data base and they are tagged by categories, like 'fish' and 'birds.' I want to write a PHP script that will let the client see a dropdown select box so they can choose the category. Let's say they choose 'fish.' Then when they submit the form, I want to show them all the pictures of fish."
"I have a web site with lots of pictures. The pictures are listed in a data base and they are tagged by categories, like 'fish' and 'birds.' I want to write a PHP script that will let the client see a dropdown select box so they can choose the category. Let's say they choose 'fish.' Then when they submit the form, I want to show them all the pictures of fish."
ASKER
yes, exactly
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
thanks, found full solution myself
Right now you have this array of image names:
var bellTowerArray = new Array();
bellTowerArray[0] = "bellTower01.jpg";
You would generate those array elements in PHP with code something like this:
Open in new window