JS and PHP: Click image, display elsewhere


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;

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

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


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

<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 . "' "; 



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.