elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Rompecabezas de Bitcoin, Medio millón USD en premios


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Jquery Galeria de imagenes (ayuda)
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Jquery Galeria de imagenes (ayuda)  (Leído 1,643 veces)
nevermind2403

Desconectado Desconectado

Mensajes: 18


Ver Perfil
Jquery Galeria de imagenes (ayuda)
« en: 13 Noviembre 2013, 05:14 am »

Abri otro post para que se entienda mejor el codigo, el problema surge porque tengo una galeria de fotos que funciona ,pero no se como agregarle el boton cerrar, ya que solo se cierra presionando sobre la foto.
El problema seria asi,al mostrar la imagen en su tamaño real, una vez que es clickeada la miniatura, se debe modificar el script para que la imagen se cierre una vez que se hace click en este botón de cerrar.
Les dejo el codigo fuente,saludos


Código
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Documento sin título</title>
  5. <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
  6. <script type="text/javascript">
  7.  
  8. $(document).ready(function(){
  9. $("#container img").click(function(){
  10. var nombre = $(this).attr("alt") + "_big";
  11. var direccion = nombre + ".jpg";
  12.  
  13. $("#imgFull").attr('src',direccion);
  14. $("#previa").fadeIn();
  15. });
  16.  
  17. $("#imgFull").click(function(){
  18. $("#previa").fadeOut();
  19. });
  20. });
  21. <style type="text/css">
  22. body{
  23. background-image: url('fondo.png');
  24. }
  25. #container{
  26. width: 650px;
  27. margin: 150px auto;
  28. }
  29. #container img{
  30. cursor: pointer;
  31. }
  32. #previa{
  33. background: rgba(0,0,0,0.5);
  34. display: none;
  35. height: 100%;
  36. left: 0;
  37. position: fixed;
  38. top: 0;
  39. width: 100%;
  40. overflow: scroll;
  41. }
  42. #previa div{
  43. margin: 30px auto;
  44. text-align: center;
  45. }
  46.  
  47.  
  48. </head>
  49.  
  50. <div id="previa">
  51. <div>
  52. <img src="" id="imgFull" />
  53. </div>
  54. </div>
  55. <div id="container">
  56. <img src="foto_1_small.jpg" alt="foto_1" width="100" height="75" />
  57.    <img src="foto_2_small.jpg" alt="foto_2" width="100" height="75" />
  58.    <img src="foto_3_small.jpg" alt="foto_3" width="100" height="75" />
  59.    <img src="foto_4_small.jpg" alt="foto_4" width="100" height="75" />
  60.    <img src="foto_5_small.jpg" alt="foto_5" width="100" height="75" />
  61.    <img src="foto_6_small.jpg" alt="foto_6" width="100" height="75" />
  62. </div>
  63. </body>
  64. </html>


« Última modificación: 3 Marzo 2014, 18:34 pm por #!drvy » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Galeria de imagenes
Diseño Gráfico
PhenfiX 8 4,100 Último mensaje 7 Noviembre 2004, 14:56 pm
por TaN€R
Alguien me puede ayudar desde cero como instalar una galeria JQUERY
Desarrollo Web
zenydark 1 4,620 Último mensaje 11 Abril 2011, 03:06 am
por Nakp
[jquery] Hacer galeria jiratoria automatica ? (solved)
PHP
Diabliyo 7 5,763 Último mensaje 22 Febrero 2012, 20:07 pm
por Diabliyo
Como customizar eata galeria jQuery
Desarrollo Web
T0p1t0 1 2,112 Último mensaje 24 Junio 2013, 04:38 am
por #!drvy
Necesito ayuda sobre hacer una galeria de imagenes
PHP
LostMortal 2 1,871 Último mensaje 27 Marzo 2014, 12:26 pm
por patilanz
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines