¿como hacer un popup que funcione con un click?

[Kurassier]

Te paso mi Lightbox con JQUERY:

Archivos Necesarios:
http://leandrovieira.com/projects/jquery/lightbox/js/jquery.lightbox-0.5.pack.js (Renombrarlo por jquery.lightbox-0.5.js)
http://code.jquery.com/jquery-1.6.4.min.js (Renombrarlo por jquery.js

Código Javascript:

<!-- Archivos utilizados pelo jQuery lightBox plugin -->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
    <!-- / Fin de Plugin de Jquery -->
    
    <!-- Activar el Plugin -->
    <script type="text/javascript">
    $(function() {
        $('#galeria a').lightBox();
    });
 

Código CSS:

<style type="text/css">
    /* jQuery lightBox plugin - Estilo de Galeria */
    #galeria {
        background-color: #444;
        padding: 10px;
        width: 520px;
    }
    #galeria ul { list-style: none; }
    #galeriaul li { display: inline; }
    #galeria ul img {
        border: 5px solid #3e3e3e;
        border-width: 5px 5px 20px;
    }
    #galeriaul a:hover img {
        border: 5px solid #fff;
        border-width: 5px 5px 20px;
        color: #fff;
    }
    #galeria ul a:hover { color: #fff; }
    </style>
 

Código HTML:

<div id="galeria">
    <ul>
<li><a href="photos/image1.jpg" title="Imagen 1"><img src="photos/thumb_image1.jpg" alt="Descripcion imagen"/></a><li> 
<li><a href="photos/image2.jpg" title="Imagen 1"><img src="photos/thumb_image2.jpg" alt="Descripcion imagen"/></a><li>
<li><a href="photos/image3.jpg" title="Imagen 1"><img src="photos/thumb_image3.jpg" alt="Descripcion imagen"/></a><li>
<li><a href="photos/image4.jpg" title="Imagen 1"><img src="photos/thumb_image4.jpg" alt="Descripcion imagen"/></a><li>
<li><a href="photos/image5.jpg" title="Imagen 1"><img src="photos/thumb_image5.jpg" alt="Descripcion imagen"/></a><li>
    </ul>
</div>
 

Como puedes ver el ID Galeria, le pasa los link (<a href /> ) a nuestro Script el cuál abrirá un popup con la imagen.

Ahora si lo quieres hacer mas dinamico, te recomiendo implementar un poco de PHP, aquí te dejo el código, lo que hace es leer la carpeta donde se encuentran las imágenes y crear las miniaturas de forma automática

Código PHP:

<div id="galeria">
    <ul>
<?php 
 //extensiones validas 
 $arr_ext=array("jpg","png","gif"); 
 //directorio donde se encuentran 
 $mydir=opendir("photos/"); 
 //leer archivos 
 while($archivo=readdir($mydir)) { 
 $ext=substr($archivo,-3); 
 //si la extension del archivo es correcta muestra la imagen 
 if(in_array($ext,$arr_ext))  { 
 echo '<li>
            <a href="photos/'.$archivo.'" title="Imagen '.$archivo.'">
            <img src="photos/'.$archivo.'" width="72" height="72" alt=""/>
            </a>
       </li>'; 
                              } 
                                  }
?> 
    </ul>
</div>
 

Si tienes dudas de como implementarlo, solo pregunta
Enjoy!