Cargando contenido en línea utilizando FancyBox

Bien, estoy simplemente escribiendo este post para ayudar a otros que con suerte puede venir a través de la misma edición.Cargando contenido en línea utilizando FancyBox

Los ejemplos en el sitio web del proveedor son un poco vago y yo había asumido el siguiente escenario.

usted tiene un vínculo con un href n a algún contenido de #id.

<a href="#content-div" class="fancybox">Open Example</a>

y usted tiene un div para mantener ese contenido.

<div id="content-div" style="display: none">Some content here</div>

Entonces sólo tiene que ejecutar a través de un FancyBox 1-liner.

$(".fancybox").fancybox();

Naturalmente, se podría pensar que FancyBox copiará el contenido y cambiar display: none-display: block y todo estará bien.

Pero esto no sucede.
Todavía carga el contenido, sino el contenido que está oculto y tiene un FancyBox en blanco. *cry*

Fuente

2010-10-18 Marko

121

La solución es muy simple, pero me tomó alrededor de 2 horas y la mitad del cabello en mi cabeza para encontrarlo.

Simplemente envoltura 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

Fuente

2010-10-18 20:59:41 Marko

Este mismo ejemplo se aborda en el sitio FancyBox - echar un vistazo a el ejemplo 5 http://fancybox.net/blog –

@Bobby Jack - Sí, pero don' lo hago muy obvio Si miras por internet, muchas personas han tenido el mismo problema que yo, así que espero que esto ayude a alguien. – Marko

me ayudó tio ... me estaba volviendo loco también .. gracias por compartir – mysterious

yo pasamos una buena cantidad de tiempo tratando de resolver esto y la forma en que lo hice estaba pasando por el ejemplo index.html/style.css que viene con la instalación FancyBox .

Si ve el código que se utiliza para el sitio web de demostración y, básicamente, copiar/pegar, se le multa.

Para tener una línea FancyBox de trabajo, tendrá que tener el 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>

recuerde que debe ser precisa acerca de las carpetas que los archivos de script se colocan en y hacia dónde apunta en la etiqueta Head; ellos deben corresponder.

Espero que esto ayude.

Fuente

2011-09-22 23:15:11 tandy

Sólo es algo que encontré para los usuarios de WordPress,

Por obvio que parezca, si su div está devolviendo algún contenido AJAX basado en decir una cabecera que habitualmente vincular a una nueva página de entrada, algunos tutoriales dirán para devolver falso ya que está devolviendo los datos de la publicación en la misma página y la devolución evitaría que la página se mueva. Sin embargo, si devuelve falso, también evita que Fancybox2 también lo haga. Pasé horas tratando de resolver esa estúpida y simple cosa.

Por lo tanto, para este tipo de enlaces, solo asegúrese de que la propiedad href es el hashed (#) div que desea seleccionar, y en su javascript, asegúrese de no devolver false ya que ya no necesitará .

simple sé^_^

Fuente

2012-11-02 21:59:12

Cargando contenido en línea utilizando FancyBox

Respuesta

Cuestiones relacionadas