Abrir información extra en una nueva ventana con Fancybox 1.3.4
FancyBox es una herramienta para la visualización de imágenes, contenido HTML y multimedia al estilo «lightbox» flotante sobre la página web.
En este artículo vamos a ver como abrir información extra de nuestra página en una nueva ventana modal utilizando Fancybox.
Lo primero que tendremos que hacer es ir a la página oficial de Fancybox para descargar el script y ver más información.
Una vez tenemos los archivos necesarios en nuestro servidor podemos empezar a añadir a nuestra página HTML el efecto Fancybox.
En nuestra cabecera o <head> deberemos añadir los estilos y scripts necesarios:
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#open_conditions").fancybox();
});
</script>
Hará falta la librería jQuery y los scritps y estilos de Fancybox, además de la llamada a la función fancybox() tras pulsar en el link o elemento con id=»open_conditions».
En nuestro <body> deberemos añadir el link que tras pulsarlo abrirá la información extra en una nueva ventana modal y el contenido de esta ventana inicialmente escondido.
<a id="open_conditions" href="#conditions" title="Lorem ipsum dolor sit amet">Ver condiciones</a> <div style="display: none;"> <div id="conditions" style="width:400px;height:200px;overflow:auto;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum, vehicula non pretium varius, cursus ac tortor. Vivamus fringilla congue laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu mi. Nunc aliquet tempus sem, id aliquam diam varius ac. Maecenas nisl nunc, molestie vitae eleifend vel, iaculis sed magna. Aenean tempus lacus vitae orci posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit amet, vestibulum sed nunc. </div> </div>
Autor
¿Buscas trabajo de programador?
11 respuestas a “Abrir información extra en una nueva ventana con Fancybox 1.3.4”
Deja una respuesta
98 artículos que te podrían interesar
Ver más sobre
es lo que estaba buscando, yo lo ocupo para que en una lista de reguistris de una base de datos, le pique y me muestre registro de ese registro en fancybox
Hola me gusto tu forma de explicar fancybox, yo tengo una duda, a una imagen simple quiero agregarle link con imágenes, en los ejemplos solo lo he visto con galería, te agradezco que me puedas ayudar.
Hola,
En la página oficial hay ejemplos con una imagen:
http://fancybox.net/
Saludos
muchas gracias por la aportación, me sirvió mucho
Buen Dia:
Me gustaria saber como podria implementar esta solucion en magento.
Donde cargaria las liberias de fancy box
y como llamaria la instruccion en un archivo .phtml
Muchas gracias
Gracias,
una pregunta que debo o como hago para que se abra una segunda hasta tercera ventana sobre la primera y al cerrar quede en la anterior con fancybox?
Buena pregunta. Supongo que se puede pero no lo he probado. Si algún webmaster lo ha probado podría aportar aquí su solución.
Tendras los scripts completos?, los descargue y no trae
jquery.fancybox-1.3.4.pack.js ni el jquery.fancybox-1.3.4.css
otra cosa, se puede poner html en el contenido?
Hola, te respondí por email, si que se puede añadir contenido html, saludos
Muy bueno tu post me facino y ayudo mucho, tengo una pregunta.
Soy nuevo en esto así que como estoy rediseñando mi web pensé en ponerle fancybox a los comentarios.( ASI COMO LA PRIMERA IMAGEN QUE PUSISTE).
Descargue el script y la libreria del enlace que pones al inicio de tu post Fancybox y los coloque en la carpeta fancybox en los archivos de mi web.
Pongo dentro de las etiquetas head lo que tengo que poner tal cual como lo indicas arriba lo copio y lo pego.
Tambien coloco en el body lo que tu colocas mas arriba lo copio y lo pego. presiono f12 se abre el navegador y me sale el enlace ver condiciones lo preciono pero no me sale nada.
mi pregunta es: debo de hacer algunos cambios en los arhivos que descargue??? o talvez algun cambio en lo que copie y pegue en head y body. Porfavor cualquier comentario me ayudara. Muchas gracias de antemano.
Me deberías indicar una url para verlo, podría ser cualquier de las opciones que mencionas