Fancybox para desplegar un PopUp en onLoad — Querido diario

Navégale



Ahora que reviví mi blog, hice una instalación nueva de wordpress y pues borré todo, pero he visto que muchos buscan este post sobre cómo instalar una ventana de fancybox para desplegar un PopUp en onLoad, así que lo restauro para que lo tengan.

Hace unas cuantas semanas me pidieron que al entrar a un sitio cargara un popup con una publicación, dije un popup? Ni que estuviéramos en 1998, ese pedo ya no se usa, pero bueno, insistieron y lo único no tan intrusivo que se me ocurrió fue hacerlo en una ventana modal de Fancybox, así me que puse a investigar hasta que di con este sitio, Using Fancybox for a PopUp.

El famoso fancybox, por si no lo conocen, es una utilería hecha con jQuery en la que puedes presentar fotos, texto, código html, ajax, video y cosas así.

En el articulo viene muy bien explicado como instalarlo y hacer el PopUp para que cargue una imagen, en mi caso me pidieron que lo que cargara fuera un video de youtube, les dejaré como hacerlo.

1.- Sigues las instrucciones de este link para instalar el Fancybox.

2.- Inserta el siguiente código dentro de el head de tu archivo.


  $(document).ready(function() {
	  $("#yt").click(function() {
		$.fancybox({
		  'padding'        : 0,
		  'autoScale'      : false,
		  'transitionIn'   : 'none',
		  'transitionOut'  : 'none',
		  'title'          : this.title,
		  'width'          : 680,
		  'height'         : 495,
		  'href'           : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
		  'type'           : 'swf',
		  'swf'            : {
		  'wmode'              : 'transparent',
		  'allowfullscreen'    : 'true'
		  }
		});
		return false;
	  });
  });

3.- Inserta el siguiente código en cualquier parte dentro del body, por orden es preferible ponerlo justo después de abrir el body o justo antes de cerrarlo.

* Nótese que el div que abrimos está escondido, esto para que no se vea en ningún lugar del sitio.
* Si no quieres que empiece solo, nada mas hay que cambiar de 1 a 0 en autoplay.


4.- Y por último mandamos llamar el PopUp en el onLoad de nuestro body como en el siguiente ejemplo.



Bueno, ya quedó.


Deja un comentario