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:
En proximas entregas lo haremos con galerías de imágenes e iremos agregando funcionalidades
en 
en 
en 
en 
en 
No sale la tachita para cerrar el div, estoy usandolo en asp.net, como la agrego
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’
});
});
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
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′
});
});
¿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.
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' } ); });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