yosoygil | portafolio » Web http://yosoygil.com Fri, 18 May 2012 18:02:47 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Fancybox para desplegar un PopUp en onLoad http://yosoygil.com/2011/06/fancybox-para-desplegar-un-popup-en-onload/ http://yosoygil.com/2011/06/fancybox-para-desplegar-un-popup-en-onload/#comments Sat, 04 Jun 2011 17:23:05 +0000 gil! http://yosoygil.com/?p=146 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<script type="text/javascript">
  $(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;
	  });
  });
</script>

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.

1
2
3

<div style="display: none;">
<p><a id="yt" title="" href="http://www.youtube.com/watch?v=IDDELVIDEO&amp;fs=1&amp;autoplay=1"></a></p>
</div>

* 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.

1

<body onload='$("#yt").trigger("click");'>

Bueno, ya quedó.

]]> http://yosoygil.com/2011/06/fancybox-para-desplegar-un-popup-en-onload/feed/ 4