<li><a class="fancybox fancybox.iframe" href="give-me-meal.html">first</a></li>
<li><a class="fancybox fancybox.iframe" href="give-me-meal.html">second </a></li>

<script type="text/javascript">
jQuery.extend(jQuery.fancybox.defaults, {
            href : 'iframe.html',
            type : 'iframe',
        padding : 0,
        margin  : 20,

        width     : 800,
        height    : 0,
        minWidth  : 100,
        minHeight : 400,
        maxWidth  : 9999,
        maxHeight : 9999,

        autoSize   : true,
        autoHeight : true,
        autoWidth  : false,

});
</script>

<li><a class="fancybox fancybox.iframe" href="give-me-meal.html" data-width="1000" data-height="600">first</a></li>
<li><a class="fancybox fancybox.iframe" href="give-me-meal.html" data-width="700" data-height="450">second </a></li>

<script type="text/javascript">
$(document).ready(function(){
 $(".fancybox").fancybox({
        padding : 0,
        margin  : 20,
        minWidth  : 100,
        minHeight : 400,
        maxWidth  : 9999,
        maxHeight : 9999,
        autoSize   : true,
        autoHeight : true,
        autoWidth  : false,
        beforeShow : function(){
          this.width = $(this.element).data("width");
          this.height= $(this.element).data("height");
        }

 }); // fancybox
}); // ready
</script>

<li><a class="fancybox fancybox.iframe" id="box1" href="give-me-meal.html">first</a></li>
<li><a class="fancybox fancybox.iframe" id="box2" href="give-me-meal.html">second </a></li>

$("#box1").fancybox();
$("#box2").fancybox({
    height: 1000
});