Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

javascript image array from database

Posted on 2010-11-12
6
Medium Priority
?
845 Views
Last Modified: 2012-06-22
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?
<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>&nbsp;</p>
<p>&nbsp;</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

Open in new window

0
Comment
Question by:newmie22
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 34122601
Not sure where you stand on data base programming, so I will just start with what I think might be the explanation.

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:

...In JavaScript
var bellTowerArray = new Array();
<?php
$sql = "SELECT imagename FROM myTable ORDER BY imagename LIMIT 31";
$res = mysql_query($sql) or die( mysql_error() );
$num = 0;
while ($row = mysql_fetch_assoc($res))
{
    echo "bellTowerArray[$num] = \"$row['imagename']\";";
    $num++;
}
// END OF PHP
?>

Open in new window

0
 

Author Comment

by:newmie22
ID: 34122662
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.
0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 34122975
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."
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:newmie22
ID: 34123040
yes, exactly
0
 
LVL 111

Accepted Solution

by:
Ray Paseur earned 1500 total points
ID: 34123446
OK, I think the best answer I can give you in the short term is to suggest a good learning resource for PHP and data bases.  Buy this book and work through the examples - in a month you will be light years ahead.  It is very readable and comes with a downloadable code library that you can copy and paste.
http://www.sitepoint.com/books/phpmysql4/

Your general design pattern for what you want to do would be to query the data base and get all the category information in a query results set.  Then you would use a while() statement to iterate over the result set, generating <option> tags for each category.  When the client submits the form, you would be able to find the selected option in the request array element that corresponds to the <select> name attribute.
0
 

Author Closing Comment

by:newmie22
ID: 34279247
thanks, found full solution myself
0

Featured Post

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

670 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question