Foros del Web » Creando para Internet » CSS »

¿como hacer un popup que funcione con un click?

Estas en el tema de ¿como hacer un popup que funcione con un click? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/10/2011, 15:13
 
Fecha de Ingreso: octubre-2011
Ubicación: oaxaca
Mensajes: 42
Antigüedad: 12 años, 5 meses
Puntos: 0
¿como hacer un popup que funcione con un click?

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
  #2 (permalink)  
Antiguo 17/10/2011, 17:40
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 13 años, 6 meses
Puntos: 63
Respuesta: ¿como hacer un popup que funcione con un click?

Busca por Shadowbox o lightbox de JQUERY.

Saludos
  #3 (permalink)  
Antiguo 17/10/2011, 19:25
 
Fecha de Ingreso: octubre-2011
Ubicación: oaxaca
Mensajes: 42
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: ¿como hacer un popup que funcione con un click?

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
  #4 (permalink)  
Antiguo 17/10/2011, 21:00
 
Fecha de Ingreso: octubre-2011
Mensajes: 27
Antigüedad: 12 años, 5 meses
Puntos: 2
Respuesta: ¿como hacer un popup que funcione con un click?

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:
Ver original
  1. <!-- Archivos utilizados pelo jQuery lightBox plugin -->
  2.     <script type="text/javascript" src="js/jquery.js"></script>
  3.     <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
  4.     <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
  5.     <!-- / Fin de Plugin de Jquery -->
  6.    
  7.     <!-- Activar el Plugin -->
  8.     <script type="text/javascript">
  9.     $(function() {
  10.         $('#galeria a').lightBox();
  11.     });

Código CSS:
Ver original
  1. <style type="text/css">
  2.     /* jQuery lightBox plugin - Estilo de Galeria */
  3.     #galeria {
  4.         background-color: #444;
  5.         padding: 10px;
  6.         width: 520px;
  7.     }
  8.     #galeria ul { list-style: none; }
  9.     #galeriaul li { display: inline; }
  10.     #galeria ul img {
  11.         border: 5px solid #3e3e3e;
  12.         border-width: 5px 5px 20px;
  13.     }
  14.     #galeriaul a:hover img {
  15.         border: 5px solid #fff;
  16.         border-width: 5px 5px 20px;
  17.         color: #fff;
  18.     }
  19.     #galeria ul a:hover { color: #fff; }
  20.     </style>

Código HTML:
Ver original
  1. <div id="galeria">
  2.     <ul>
  3. <li><a href="photos/image1.jpg" title="Imagen 1"><img src="photos/thumb_image1.jpg" alt="Descripcion imagen"/></a><li>
  4. <li><a href="photos/image2.jpg" title="Imagen 1"><img src="photos/thumb_image2.jpg" alt="Descripcion imagen"/></a><li>
  5. <li><a href="photos/image3.jpg" title="Imagen 1"><img src="photos/thumb_image3.jpg" alt="Descripcion imagen"/></a><li>
  6. <li><a href="photos/image4.jpg" title="Imagen 1"><img src="photos/thumb_image4.jpg" alt="Descripcion imagen"/></a><li>
  7. <li><a href="photos/image5.jpg" title="Imagen 1"><img src="photos/thumb_image5.jpg" alt="Descripcion imagen"/></a><li>
  8.     </ul>
  9. </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:
Ver original
  1. <div id="galeria">
  2.     <ul>
  3. <?php
  4.  //extensiones validas
  5.  $arr_ext=array("jpg","png","gif");
  6.  //directorio donde se encuentran
  7.  $mydir=opendir("photos/");
  8.  //leer archivos
  9.  while($archivo=readdir($mydir)) {
  10.  $ext=substr($archivo,-3);
  11.  //si la extension del archivo es correcta muestra la imagen
  12.  if(in_array($ext,$arr_ext))  {
  13.  echo '<li>
  14.            <a href="photos/'.$archivo.'" title="Imagen '.$archivo.'">
  15.            <img src="photos/'.$archivo.'" width="72" height="72" alt=""/>
  16.            </a>
  17.       </li>';
  18.                               }
  19.                                   }
  20. ?>
  21.     </ul>
  22. </div>

Si tienes dudas de como implementarlo, solo pregunta
Enjoy!

Última edición por Kurassier; 17/10/2011 a las 21:11 Razón: Arreglo de Link

Etiquetas: html, popup
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:12.