How to set fancybox height and width?

Question

I write a code for the fancybox and its working but i want to set height and width for fancybox but its not working. I use below code.

Javascript

    <script type="text/javascript" src="/javascript/jquery/plugins/fancybox/fancybox.js?b84fd"></script>

<script type="text/javascript">

$(document).ready(function() {

/* This is basic - uses default settings */

$("a#single_image").fancybox();

/* Using custom settings */

$("a#inline").fancybox({
'hideOnContentClick': true
});



/* Apply fancybox to multiple items */

$(".iframe").fancybox({
'transitionIn'    :    'elastic',
'transitionOut'    :    'elastic',
'speedIn'     :    600,
'speedOut'     :    200,
'overlayShow'    :    false,
'width'  : 600,           // set the width
    'height' : 600,           // set the height
    'type'   : 'iframe',       // tell the script to create an iframe
    'scrolling'   : 'no'

});

});

</script>

HTML Code

<a id="inline" href="/content/test.html">Test</a>

Please suggest me idea how can i set height and width for fancybox.

I use fancybox in bigcommerce using this links help Big commerce help

Thanks

Solution 1

Fancybox version 1.2.5 is old and doesn't support the parameters you gave. Try using this instead.

$(".iframe").fancybox({
    'overlayShow': false,
    'frameWidth': 500, // set the width
    'frameHeight': 100, // set the height
    'type': 'iframe', // tell the script to create an iframe
});

Solution 2

This code works for me settings height and width of an image

i want to display in fancybox

$('#viewlogo').live('click', function(){
    $this = $(this);
    $.fancybox({
        'opacity'       :   true,
        'overlayShow'   :   true,
        'overlayColor'  :   '#525252',
        'width'         :   400,
        'height'        :   400,
        'href'          : $this.attr('href')
    });
    return false;
});

<a id="viewlogo"  class="iframe" href="<?php echo $orig_image; ?>"><img class ="printhide"  src="<?php echo $topic_media_URL; ?>" border="1"  width="100" height="100" /></a>

Html code

<a id="viewlogo"  class="iframe" href="<?php echo $orig_image; ?>"><img   src="<?php echo $topic_media_URL; ?>" border="1"  width="100" height="100" /></a>

Solution 3

use this code:

$(".fancybox-wrap").height($(".fancybox-iframe").contents().find("html").height() + 30);
$(".fancybox-skin").height($(".fancybox-iframe").contents().find("html").height() + 30);
$(".fancybox-inner").height($(".fancybox-iframe").contents().find("html").height());

Comments

[Benjamin Gruenbaum]

Hi, .live is deprecated and should not be used in new code. Use .on instead. Also, I don't understand what the click handler is for

[Rinzler]

ya i will take care in future the click handler is for launching full image when clicked on a thumbnail.

[Jalpesh Patel]

I use the this fancybox in the bigcommerce site and now i check that in firebug height and width is set by one css which is not accessible to third party developer. Is there any way to override old css using java script and thanks for help me @Sopkey

[JFK]

+1 : I think you don't actually need the callback. @Jalpesh : Spokey's sample works just fine, however you need to add the class="iframe" to your html code to make it work with that script. See updated jsfiddle.net/v9yFs/18