JS and PHP: Click image, display elsewhere

JavaScript
1

Hello!

I’ve been working on this logic for far longer than I care to enclose so I’m finally resorting to the forums.

Here’s what I’m trying to do:

I have images in a directory as well as a database with the filename and category of the image. On my gallery page, I’m displaying thumbnails of each image in the category with a while() statement. I want to be able to click a thumbnail and display that image, bigger, in the main content area.

Here’s my code. Logically, I feel like it should work and I’ve tried a number of things that have given no result.

include "../inc/dbinc.php"; 

//SELECT IMAGES by Category 
$strSQL = mysql_query("SELECT * FROM gallery WHERE Category = 'Weddings' "); 

//Javascript (external)

function imageFocus(){

     var filename = document.getElementById("dynamicImg").value;
     
     //debug
     alert(filename);

     function showImageGallery(){
     
          //debug
          alert("showImage Func");

          if(filename != null){
               document.write(" <img src='../dashboard/imgs/" + filename + "' class='contentPic' ");
          }else{
               document.write("Click a thumbnail to begin...");
          }

     }
}


<div id="mainContent">
     <script type="text/javascript"> showImageGallery(); </script>
</div>


<div id="thumbsDiv">


while($row = mysql_fetch_array($strSQL)){ 
      
          $Filename = $row['Filename']; 
          //$Category = $row['Category']; 
           
          echo " <img src='../dashboard/imgs/" . $Filename . "' class='thumbs' onclick='return imageFocus();' "; 
          echo " <input type='hidden' id='dynamicImg' value='" . $Filename . "' "; 

     } 


</div>

With this bit of code, as you can see, I’ve set up 2 debug alerts. The problem is that I’m not even hitting the second alert (function showImageGallery() ). The first alert works and returns the proper filename.