PHP gallery autogenerated thumb to open larger image in <div> on click

Question

Sorry in advance if it's a stupid question, but I'm a complete newbie and this is the first bit of PHP I've ever looked at in my life.

I've taken the code from this web post about Creating an image gallery from a folder of images automatically and it creates a gallery of thumbnails which, when clicked, open a larger image as a separate page.

What I would like is for the thumbnails to open the larger image inside a 'div' on the same page.

I've managed to achieve this by using 'iframe', but I'm aware that's a solution which is frowned upon:

<iframe id="r5-6c2-4" name="bigimg" src="" width="625px" height="410px" frameBorder="0">
</iframe> 

<div id="r5-6c1">
     <div id="thumbscontainer">
         <ul>
             <?php
                  $images = glob('g-images/*.jpg');
                  $ignore = array('cgi-bin', '.', '..','._');
                  foreach($images as $curimg){
                  if(!in_array($curimg, $ignore)) {
                  echo "<li><a href='".$dirname.$curimg."' target='bigimg'><img src='thumby.php?src=".$dirname.$curimg."&h=193&zc=0' alt='' /></a></li>\n ";
                   }
               }                 
               ?>                    
           </ul>
     </div>          
</div>

Help please! :-)

Answer 1

I'm a newbie too but I'd try this,

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {           
    $('body').append('<div><img id="moo" src=""></div>');
    $("a[target='bigimg']").on('click',function(a){
      a.preventDefault();
      $('img#moo').attr('src',$(this).attr('href'));
    }); 
});
</script>