Home/ Questions/Q 8073555
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T14:22:18+00:00

FancyBox V2 – I’m stuck when I click the first fancybox link the box

  • 0

FancyBox V2 – I’m stuck when I click the first fancybox link the box loads an incorrect size but when I exist and click the fancy box again it loads right size??

It previously autosized correctly as I have multiple fancybox on website but when I open this fancybox to carry through purchase it autosizes incorrectly on first click then correctly on second click

How do I fix this??

(Obviously I have replaced my real PayPal information with madeup information)

Code is below:

Main Page:-

<!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>

Fancybox Page:

<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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s because fancybox doesn’t know the dimensions of the page when opened the first time, width and height are unknown so set to 0. Subsequent times, object dimensions are already cached so fancybox can render the content properly.

    From fancybox website:

    autoSize : If set to true (default), for ‘inline’, ‘ajax’ and ‘html’ type content width/height is auto determined. If no dimensions set this may give unexpected results

    It might be a good idea to set dimensions inside your Fancybox.html page, maybe in the <table> or in the <form> tag like

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

    eventually you may prefer to set dimensions for this specific form within your script

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