Ver originales (Francés)

Cómo agrandar una imagen al hacer clic

Resuelto
lutchi-lutcho Mensajes publicados 23 Estado Miembro -  
lutchi-lutcho Mensajes publicados 23 Estado Miembro -
Buenas tardes, compañía,

Vuelvo a un tema que ya se ha resuelto, pero que no está muy bien explicado para los principiantes. https://forums.commentcamarche.net/forum/affich-11179466-agrandir-image-sur-clic
Tengo algunas bases en HTML, CSS, PHP y SQL, me gustaría saber cómo agrandar una imagen al hacer clic en ella.

La solución es propuesta por este blog: http://www.huddletogether.com/projects/lightbox2/

El problema que encuentro, y no creo ser el único, es que no sé qué hacer después de haber descargado la carpeta.
Se dice que hay que cargar el archivo en nuestra página HTML (¿Cómo hacerlo claramente?)

¿Alguien podría aclararme y proponerme un "manual de instrucciones" claro? :)
Digamos como regalo de Navidad!

Gracias por sus respuestas

¡Felices fiestas a todos!

Lutchi-Lutcho

7 respuestas

  1.
    RAD ZONE Mensajes publicados 5362 Estado Colaborador 1 360
     
    una página completa con el enlace a la imagen, notarás que para la miniatura he puesto petite_Saulalvarez.jpeg porque se desaconseja encarecidamente redimensionar una imagen con CSS, debes hacer una miniatura a 203px/134px! 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title> RAD ZONE Webcreation </title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <!-- ENLACES A LOS JS en la carpeta /js --> <script src="js/jquery-1.10.2.min.js" type="text/javascript"> </script> <script src="js/lightbox-2.6.min.js" type="text/javascript"> </script> <!-- FIN --> <!-- ENLACE A LA CSS en la carpeta /css --> <link href="css/lightbox.css" rel="stylesheet" type="text/css" /> <!-- FIN --> </head> <body> <a href="IMAGES/Saulalvarez.jpeg" data-lightbox="Saulalvarez" title="Saulalvarez"><img src= "IMAGES/petite_Saulalvarez.jpeg" width="203" height="134" alt="img" /></a> </body> </html>


    a+

    --

    ♣ El mayor error que puede cometer un hombre es tener miedo de cometer uno. ♣
    6
    1. lutchi-lutcho Mensajes publicados 23 Estado Miembro
       
      He hecho como me inscribiste RAD y sí, es mejor.
      Ahora hay un enlace en la foto.
      Cuando hago clic en él, la imagen se abre en grande pero en otra ventana.
      No se muestra en la misma ventana con esa especie de zoom y el sitio de fondo, como en el ejemplo: http://www.huddletogether.com/projects/lightbox2/

      ¿Qué he fallado?

      Recapitulo lo que he hecho:
      1- He descargado la carpeta (en Mac, así que no descomprimí)
      2- He puesto las carpetas CSS, JS e IMÁGENES (que he renombrado IMÁGENES2) en la carpeta raíz de mi sitio
      3- He puesto las fotos correspondientes en la carpeta IMÁGENES2
      4- He incluido en Head las 3 líneas de código:
      <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
      <script src="js/lightbox-2.6.min.js" type="text/javascript"></script>
      <link href="css/lightbox.css" rel="stylesheet" type="text/css" />
      5- He incluido una lightbox en la foto elegida con el siguiente código:
      <a href="IMÁGENES/Saulalvarez.jpeg" data-lightbox="Saulalvarez" title="Saulalvarez"><img src=
      "IMÁGENES/petite_Saulalvarez.jpeg" width="203" height="134" alt="img" /></a>
      6- Y ahí la imagen se abría en una nueva pestaña.
      0