Bueno, simplemente escribo este post para ayudar a otros que puedan encontrarse con el mismo problema.
Los ejemplos en el sitio web del proveedor son un poco vagas y yo había asumido el siguiente escenario.
Tienes un enlace con un href
n a algún contenido's #id
.
<a href="#content-div" class="fancybox">Open Example</a>
Y tienes un div para guardar ese contenido.
<div id="content-div" style="display: none">Some content here</div>
Entonces simplemente ejecuta Fancybox a través de un 1-liner.
$(".fancybox").fancybox();
Naturalmente, usted'pensaría que Fancybox copiará el contenido y cambiará display: none
a display: block
y todo estará bien.
**Pero esto no ocurre; Sigue cargando el contenido pero el contenido está oculto y tienes un Fancybox en blanco. `cry*`
La solución es muy sencilla, pero me llevó unas 2 horas y la mitad del pelo de mi cabeza encontrarla.
Simplemente wrap su contenido con un (redundante) div
que tiene display: none
y Bob es su tío.
<div style="display: none">
<div id="content-div">Some content here</div>
</div>
Voila
La forma en que me di cuenta de esto fue pasando por el ejemplo index.html/style.css que viene empaquetado con la instalación de Fancybox.
Si usted ve el código que se utiliza para el sitio web de demostración y, básicamente, copiar / pegar, you'll estar bien.
Para obtener un Fancybox en línea de trabajo, usted tendrá que tener este código presente en su archivo index.html:
<head>
<link href="./fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" media="screen" />
<script>!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#various1").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script>
</head>
<body>
<a id="various1" href="#inline1" title="Put a title here">Name of Link Here</a>
<div style="display: none;">
<div id="inline1" style="width:400px;height:100px;overflow:auto;">
Write whatever text you want right here!!
</div>
</div>
</body>
Recuerde que debe ser preciso acerca de qué carpetas se colocan los archivos de secuencia de comandos y donde usted está apuntando en la etiqueta Head; deben corresponder.
Sólo algo que he encontrado para los usuarios de Wordpress,
Tan obvio como suena, si su div está devolviendo algún contenido AJAX basado en digamos un encabezado que comúnmente enlazaría a una nueva página de post, algunos tutoriales dirán que devuelva false ya que usted'está devolviendo los datos del post en la misma página y la devolución evitaría que la página se moviera. Sin embargo, si devuelve false, también impide que Fancybox2 haga lo suyo. Me pasé horas tratando de averiguar esa cosa simple estúpida.
Así que para este tipo de enlaces, sólo asegúrese de que la propiedad href es el hash (#) div que desea seleccionar, y en su javascript, asegúrese de que usted no devuelve false desde que ya no será necesario.
Simple, lo sé ^_^