FancyBox V2 - Atascado carga el tamaño incorrecto, pero cuando existo y hago clic en el cuadro elegante nuevamente, ¿carga el tamaño correcto?

FancyBox V2: estoy atascado cuando hago clic en el primer enlace de fancybox, el cuadro carga un tamaño incorrecto, pero cuando existo y hago clic en el cuadro elegante nuevamente, ¿carga el tamaño correcto?

Anteriormente, se autodimensionó correctamente ya que tengo varios fancybox en el sitio web, pero cuando abro este fancybox para realizar la compra, se autodimensiona incorrectamente en el primer clic y luego correctamente en el segundo clic.

¿¿Cómo puedo solucionar esto??

(Obviamente, he reemplazado mi información real de PayPal con información inventada)

El código está abajo:

Pagina principal:-

<!DOCTYPE html>
<head>
    <!-- Add jQuery library -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <!-- Add fancyBox main JS and CSS files -->
    <script type="text/javascript" src="./source/jquery.fancybox.js"></script>
    <link rel="stylesheet" type="text/css" href="./source/jquery.fancybox.css" media="screen" />


       <script>
$(document).ready(function() {
$(".fancybox1").fancybox();
}); // ready
</script>
</head>

<body>
    <a href="Fancybox.html" class="fancybox1 fancybox.ajax">Buy</a>
</body>

</html>

Página de Fancybox:

<form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr/" method="post" onsubmit="return">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="BuyAshirt@gmail.com">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="item_name" value="Great Shirt">
<input type="hidden" name="amount" value="10.00">
<table>
<td>
    <input type="hidden" name="on1" value="Name On Top">Name You Want On Top</td>
    <td>
    <input id="Top_name" nametype="text" name="os1" maxlength="200"></td>

    </td>
    <td>
<tr>
</table>
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_xpressCheckout.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<input name= "agree" type="checkbox" id="CHKBOX_1" value="Accept Terms of Service"><span onClick="document._xclick.CHKBOX_1.checked=(! document._xclick.CHKBOX_1.checked);">I accept <a href="NotImportant.html" class="fancybox1 fancybox.ajax">terms</a></span> of service
</form>

preguntado el 12 de junio de 12 a las 21:06

4 Respuestas

Este método funciona para mí: topRatio: '0'

$(".fancybox").fancybox({
    topRatio: '0'
});

Respondido 24 Feb 14, 14:02

Es porque fancybox no conoce las dimensiones de la página cuando se abre por primera vez, width and height son desconocidos, por lo que están configurados para 0. Las veces posteriores, las dimensiones del objeto ya están almacenadas en caché, por lo que fancybox puede representar el contenido correctamente.

Desde el sitio web de fancybox:

autoSize : Si se establece en true (predeterminado), para el ancho/alto del contenido de tipo 'en línea', 'ajax' y 'html' se determina automáticamente. Si no se establecen dimensiones, esto puede dar resultados inesperados

Puede ser una buena idea establecer dimensiones dentro de su Fancybox.html página, tal vez en la <table> o en el <form> etiqueta como

<table style="width: 620px; height: 320px;"> - or -  <form style="width: 620px; height: 320px; display: block;">

Eventualmente, es posible que prefiera establecer dimensiones para este formulario específico dentro de su secuencia de comandos.

$(".fancybox1").fancybox({
 fitToView: false,
 width: 620,
 height: 320
});

Respondido el 12 de junio de 12 a las 22:06

Su respuesta ajax contiene una imagen y fancyBox no las carga previamente. Entonces, si abre la segunda vez, el navegador ya ha almacenado en caché esa imagen y fancyBox calcula la altura correctamente.

Respondido el 13 de junio de 12 a las 16:06

En la parte inferior de mi página iframe de fancybox,

Coloco el siguiente código.

$('#wrapper').height($('#wrapper').height());

Tengo que hacer esto en algunos casos debido al contenido dinámico sin establecer una altura debido a un diseño receptivo.

Respondido 08 Jul 13, 10:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.