¿como hacer un popup que funcione con un click?

[chivassa]

bueno encontre este tema en otra pagian
http://blogandweb.com/css/visualizacion-pop-up-de-una-imagen-con-css/
ignoro todo lo que esta escrito pero instigo para saber que hace cada cosa
pero necesito ayuda quiero que todo funcione igual solo que el pop aparesca cuando le di click a la imagen y desaparesca cuando le di clik al pop y no solo eso sino q cuando poga el cursor sobre la imagen aparesca un lupo con +, y cuando olo ponga sobre el pop aparesca una lupa con el -
aqui encontre eso
gemablog-.blogspot.com/2009/06/anadiendo-una-lupa.html
pero no lo aplica al pop y no le entindo asi que alguien me ayude, esplique y me diga como hacer todo esto grax, para mayor referencia estoy usando una hoja de estilos externa

[Batan]

Busca por Shadowbox o lightbox de JQUERY.

Saludos

[chivassa]

hay otra forma de hacerlo la verdad aun no estoy muy seguro que es JQUERY y como funciona la verdad e encontrado bueno efectos y demas con JQUERY pero no se como trabajar con el y si hay que instalarlo o que ademas yo uso un programa llamado EasyPHP cuando trabajo con mis paginas

[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!