post icon

Como manejar un iFrame con FancyBox y jQuery en modo PopUp

Hoy día se ha vuelto muy popular el uso de jQuery para satisfacer varios fines, siendo uno de ellos la de crear animaciones bonitas en la Web y estoy más que seguro que ya han visto esos famosos “popups” animados que muestran galerías de imágenes e iframes a otros sitios.

Estos efectos son realmente sencillos de implementarlos si utilizamos jQuery y FancyBox, tan sólo deben descargar la librería del enlace que les dejé, luego ir agregando un poco de código a nuestra página. Antes que nada verifiquen tener incluido correctamente un DOCTYPE estándar.

Comenzamos por hacer referencias a los scripts necesarios (adapten el path a vuestro proyecto)

<script src="Scripts/fancybox/1.3.4/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="Scripts/fancybox/1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>

Luego debemos agregar los estilos CSS a usarse (y nuevamente comprueben el path de sus proyectos)

<link href="Scripts/fancybox/1.3.4/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" media="screen"/>

Ahora agregamos el código jQuery que hará funcionar todo, pueden hacerlo en la misma página HTML o en un documento separado (como si se tratara de cualquier código JavaScript convencional). La clase CSS “ifancybox” ustedes lo pueden personalizar a su gusto, esto va a modo de ejemplo nada más..

$(document).ready(function(){
	$(".ifancybox").fancybox({
		 'width' : '75%',
		 'height' : '75%',
		 'autoScale' : false,
		 'transitionIn' : 'none',
		 'transitionOut' : 'none',
		 'type' : 'iframe'
	 });
 });

Luego ya vamos agregando una etiqueta de enlace “a href” el cual debe contener la dirección que queremos mostrar en el iframe, y obligatoriamente asignamos la clase que capturará FancyBox, según nuestro ejemplo sería ifancybox

<a class="ifancybox" href="http://www.google.com">Esto mostrará un iframe de fancybox, incluso puedes poner una imagen aqui dentro</a>

Se vería algo asi finalmente:

FancyBox

En proximas entregas lo haremos con galerías de imágenes e iremos agregando funcionalidades

Comentarios desde Facebook:

  1. avatar
    hhhhhhhhhhhh MEXICO Google Chrome Windows
    13 junio 2014 at 12:37 #

    grrrrrrrrrrr

  2. avatar
    andreshenao Google Chrome Windows
    25 febrero 2013 at 02:54 #

    hola muy bue tutorial, yo lo estoy aplica, estoy listando un item en el mapa llamado w2d, al darle clic a este se te abre un infowindow y de ahí al darle click en abrir sitio, funciona muy bien, pero si quiero que esto lo realice al cargar la pagina no funciona.
    no carga nada.
    Si me podrías ayudar.
    gracias

    $(document).ready(function(){
    $(‘#w2d’).trigger(‘click’);
    });
    $(document).ready(function(){
    $(“#w2d”).fancybox();
    });

  3. avatar
    andreshenao Google Chrome Windows
    25 febrero 2013 at 02:53 #

    hola muy bue tutorial, yo lo estoy aplica, estoy listando un item en el mapa llamado w2d, al darle clic a este se te abre un infowindow y de ahí al darle click en abrir sitio, funciona muy bien, pero si quiero que esto lo realice al cargar la pagina no funciona.
    no carga nada.
    Si me podrías ayudar.
    gracias

    $(document).ready(function(){
    $(‘#w2d’).trigger(‘click’);
    });
    $(document).ready(function(){
    $(“#w2d”).fancybox();
    });

  4. avatar
    pablo ARGENTINA Google Chrome Windows
    8 enero 2013 at 20:13 #

    Hola, cuando abro la ventana, en la pagina padre sale una nueva barra de desplazamiento, porque puede pasar eso?

    saludos

  5. avatar
    nacho Mozilla Firefox Mac OS
    10 abril 2012 at 18:40 #

    No sale la tachita para cerrar el div, estoy usandolo en asp.net, como la agrego

  6. avatar
    angel chambi nina BOLIVIA Internet Explorer Windows
    18 noviembre 2011 at 12:07 #

    yo lo aprendia amigo te paso el codigo para el script utilizando las librerias mencionadas
    $(document).ready(function(){

    $.fancybox({

    ‘width’ : ‘75%’,

    ‘height’ : ‘75%’,

    ‘autoScale’ : true,

    ‘transitionIn’ : ‘none’,

    ‘transitionOut’ : ‘none’,

    ‘type’ : ‘iframe’,’href’: ‘http://www.google.com.bo’

    });

    });

  7. avatar
    May Internet Explorer Windows
    14 noviembre 2011 at 17:17 #

    Hola, me gustaria saber como hacer para que mi ventanita se muestre delante de una animación flash que tiene mi web, se los agradeceria muchisimooo

  8. avatar
    Angy MEXICO Internet Explorer Windows
    12 octubre 2011 at 16:48 #

    Estoy aprediendo a usar esta función, tengo un problemita. Tengo 6 imagenes quiero que se visualicen de 3 en 3. El detalle es que se va al final de la imagen. Me muestra: imagen4, imagen5 , imagen 6; para mostrar la imagen1 presiono la fecha back. Quiero q inicie desde el principio.

    // efectos del Fancy para las barras
    $(document).ready(function() {
    $(“a.zoom2”).fancybox({
    ‘zoomSpeedIn’: 500,
    ‘zoomSpeedOut’: 500,
    ‘overlayOpacity’: 0.6,
    ‘autoScale’: false,
    ‘overlayColor’: ‘#000’
    });
    });

  9. avatar
    Juan SPAIN Mozilla Firefox Windows
    5 agosto 2011 at 05:19 #

    ¿Cómo puedo poner el vínculo dentro de un .swf ?
    ¿Este iFrame funciona también para html internos (vínculo relativo)?
    Lo que quiero hacer es llamar al iFrame con el vínculo dentro de un .swf para que muestre una página interna de mi Web. ¿Es esto posibel? y en tal caso ¿cómo sería el href ?

    Si alguien puede ayudar estaré muy agradecido.

  10. avatar
    GeekZero PARAGUAY Google Chrome Windows
    24 julio 2011 at 17:18 #

    Hola, puedes hacerlo asi:

    jQuery(document).ready(function() {
    	$.fancybox(
    		'<h2>Devtroce.com</h2><p>ejemplo carga automatica</p>',
    		{
            		'autoDimensions'	: false,
    			'width'         		: 350,
    			'height'        		: 'auto',
    			'transitionIn'		: 'none',
    			'transitionOut'		: 'none'
    		}
    	);
    });
    
  11. avatar
    Sidney ARGENTINA Google Chrome Windows
    24 julio 2011 at 16:43 #

    Hola muy bueno su tutorial, le hago una cosulta, como podria hacer con que ese popup en jquery se abra automaticamante cuando una entra en la pagina.

    Gracias

Responder