jQuery 如何设置fancybox的高度和宽度?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16711558/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 17:38:39  来源:igfitidea点击:

How to set fancybox height and width?

jqueryhtmlfancyboxbigcommerce

提问by Jalpesh Patel

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.

我为fancybox 及其工作编写了代码,但我想为fancybox 设置高度和宽度,但它不起作用。我使用下面的代码。

Javascript

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

HTML代码

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

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

请建议我如何为fancybox设置高度和宽度。

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

我使用此链接在 bigcommerce 中使用fancybox help Big commerce help

Thanks

谢谢

回答by Rinzler

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

此代码适用于我设置图像的高度和宽度

i want to display in fancybox

我想在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

html代码

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

回答by Spokey

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

Fancybox 1.2.5 版本较旧,不支持您提供的参数。尝试改用它。

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

回答by r1si

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());