Image Image Image Image Image

Acerca de mi

Diseñador Gráfico y creativo con una loca obsesión por la comida, el café, el outdoorsing y Pink Floyd… Apolítico, crítico, mal hablado y muy malhumorado, detesto los lunes.

Me especializo en diseño web, diseño de interfaz, branding y hago un poco de fotografía de producto.
Conoce más…

En las redes

Scroll to Top

To Top

Web

04

jun
2011

4 Comentario

En Blog

Por gil!

Fancybox para desplegar un PopUp en onLoad

On 04, jun 2011 | 4 Comentarios | In Blog | By gil!

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

Tags | , ,

Twitter

  •  
Sígueme