Conseguir y usar Lightbox
7 seguidores
Saludos.
Necesito programar una web con una galería de imágenes usando lightbox pero no tengo ni idea de cómo funciona.
¿Alguien me puede asesorar sobre cómo y donde conseguirla, como usarla y cosas así?
Cualquier consejo será bien recibido.
Mil gracias de antemano.
albaplazadesigner
Hola!
Si usas Wordpress hay muchos plugins para eso
roselopez
Gracias Estudio Vixen, pero no es para wordpress sino para Dreamweaver-
Juanmanuelalcon.com
Muy buenas,
plugins javascript para ventanas modales tienes muchos aunque realmente las funciones y el uso es casi el mismo en todos.
Se trata de que a los elementos que quieres abrir les asignes un id (si es único) o una clase. Evidentemente necesitas cargar en el dom tanto el script como hacer la llamada al mismo.
Te dejo el enlace a Fancybox que es el que yo suelo utilizar, pesa poco, es muy personalizable y tienes bastantes opciones. También tienes otras opciones como son Shadowbox, Colorbox o el propio Lightbox, busca en google.
http://fancybox.net/
Si tienes algún problema para integrarlo dímelo aunque es muy sencillo de usar si sabes lo justo de html y de javascript.
Un saludo!
roselopez
Juanmanuelalcon.com, me lo he descargado en el enlace que me has pasado, pero no me aparece por ningún lado.
Necesitaría alguna indicación para empezar a usarlo.
Gracias por adelantado.
Pinkguino
Hola!
siempre propongo el mismo link, pero es que tiene de todo y la mayoría son de uso libre... sólo tienes que descargarte los archivos de la galería que quieras, sustituyes las imágenes por las tuyas y lo incluyes en tu html. Puedes elegir entre css, jquery, etc... Hay de todo :)
http://www.ajaxshake.com/es/JS/12261/lightbox-fotos.html
Juanmanuelalcon.com
Muy buenas,
imagino que has descargado el zip con el plugin completo, dentro de la carpeta verás que hay otra carpeta llamada source, hay tienes los scripts y la hoja de estilos que necesitas.
El método a seguir es sencillo:
1. añades el script y la hoja de estilo al head de la web, super importante que tengas también jQuery.
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
2. en el head o en un archivo javascript aparte (que debes añadir claro), inicializas fancybox.
$(document).ready(function() {
$(".fancybox").fancybox();
});
3. en el enlace desde el que quieres abrir la imagen, le añades la clase que has indicado en el script, en el ejemplo "tuClase".
<a class="tuClase" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>
Y ya lo tendrías, también, puedes añadir la propiedad "rel" con un nombre a todas aquellas imágenes que quieras abrir como una galería, por ejemplo rel="grupo".
En la documentación tienes todas las opciones, puedes abrir contenido externo, imágenes, div ocultos, hacer llamadas ajax, etc... Piensa que hemos inicializado fancybox en su forma más simple, desde este enlace tienes toda la documentación muy bien explicada:
http://fancyapps.com/fancybox/#instructions
Si te sigue dando problemas dímelo.
Un saludo!
roselopez
Muchas gracias a ambos, a ver si durante las vacaciones navideñas soy capaz de sacarlo, de lo contrario volveré a dar lata, pero ya será el próximo año
roselopez
Esto va a poder conmigo. Por fin he podido descargarme el lightbox en la web de adobe pero, aunque en la página de descarga indica que es para todos los sistemas operativos, al ir a usarlo desde Dreamweaver me dice que he instalado una versión para PC. No entiendo como es posible pues he podido instalarlo perfectamente en el Mac.
¿Alguien sabe resolver tamaño misterio?
Raimon
Hola Errede,
siento ser algo "deconstructivo", pero mi consejo, claro y llano, es que no uses Dreamweaver. Y te ahorrarás esas tonterías de que te diga que has instalado una versión para PC. Usar Dreamweaver te trae líos y te lleva a entender mal cosas como la que te comenta Alba "Si usas Wordpress hay muchos plugins para eso" a lo que tu respuesta es como si te dijeran "Este candado te sirve para bicis" y tu contestaras "Yo como pasteles". Con todo el cariño, es sólo para explicarme ;).
Visualiza el código en un editor de textos especialmente pensado para código (creo que el que viene por defecto en Apple te puede llevar algunos quebraderos de cabeza por la forma como guarda por defecto los archivos de texto plano, que son el tipo de archivo con que se construye la web), mira cualquier tuto en Internet i verás que todo es más diáfano sin Dreamweaver por enmedio. O por lo menos así me lo parece a mi.
Saludos y suerte,
Raimon
Raimon
Vmv
Pues vamos a ver yo uso lightbox, mira en mi web.
bajatelo de aquí
Viene una guía de como usarlo. Una vez te pones es bastante sencillo,
lo que viene en la carpeta comprimida tienes que colocarlo dentro de tu
directorio web, y luego enlazar las rutas correctas.
Yo coloco los siguientes códigos dentro del head:
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
Y el css:
<link href="css/lightbox.css" rel="stylesheet" />
-Recuerda que debes de recolocar la ruta si así es preciso.
Luego para que aparezca la imágen usa este código de ejemplo que debes modificar entorno a tu configuración:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
Espero poderte ayudar, si no sabes algo pregunta de nuevo =)
violeta_mateu
Retomo este hilo para compartir esta página que a mi me sirvió para hacer el lightbox
http://lokeshdhakar.com/projects/lightbox2/#help