Jquery 如何设置fancybox的高度和宽度?
我为fancybox及其工作状态编写了代码,但我想为fancybox设置高度和宽度,但它不工作。我使用下面的代码 JavascriptJquery 如何设置fancybox的高度和宽度?,jquery,html,fancybox,bigcommerce,Jquery,Html,Fancybox,Bigcommerce,我为fancybox及其工作状态编写了代码,但我想为fancybox设置高度和宽度,但它不工作。我使用下面的代码 Javascript <script type="text/javascript" src="/javascript/jquery/plugins/fancybox/fancybox.js?b84fd"></script> <script type="text/javascript"> $(document).ready(functio
<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>
$(文档).ready(函数(){
/*这是基本设置-使用默认设置*/
$(“单个图像”).fancybox();
/*使用自定义设置*/
$(“内联”).fancybox({
“hideOnContentClick”:true
});
/*将fancybox应用于多个项目*/
$(“.iframe”).fancybox({
“transitionIn”:“弹性”,
“transitionOut”:“弹性”,
“speedIn”:600,
“加速输出”:200,
“叠加显示”:错误,
“宽度”:600,//设置宽度
“高度”:600,//设置高度
'type':'iframe',//告诉脚本创建iframe
“滚动”:“否”
});
});
HTML代码
<a id="inline" href="/content/test.html">Test</a>
<a id="viewlogo" class="iframe" href="<?php echo $orig_image; ?>"><img src="<?php echo $topic_media_URL; ?>" border="1" width="100" height="100" /></a>
请告诉我如何设置fancybox的高度和宽度
我使用fancybox在bigcommerce中使用此链接帮助
谢谢此代码适用于设置图像的高度和宽度 我想在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>
$('viewlogo').live('click',function()){
$this=$(this);
$.fancybox({
“不透明”:正确,
“叠加显示”:正确,
“套色”:“525252”,
“宽度”:400,
‘高度’:400,
'href':$this.attr('href')
});
返回false;
});
Html代码
<a id="inline" href="/content/test.html">Test</a>
<a id="viewlogo" class="iframe" href="<?php echo $orig_image; ?>"><img src="<?php echo $topic_media_URL; ?>" border="1" width="100" height="100" /></a>
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
});
使用此代码:
$(".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());
用“600px”和“600px”代替600和600是否正常工作?尺寸通常以某些单位表示measurement@BenjaminGruenbaum我按照你的建议设置了“600px”和“600px”,但仍然不起作用。似乎工作正常,您使用的是什么版本的jQuery和fancybox?我已经使用了这个jQuery@Spokeyi使用fancybox版本:1.2.5@SpokeyHi,
。live
已弃用,不应在新代码中使用。改用上的。另外,我不明白什么是点击处理程序,我会在将来注意点击处理程序是为了在点击缩略图时启动完整图像。我在bigcommerce网站上使用这个fancybox,现在我检查firebug中的高度和宽度是否由一个css设置,第三方开发者无法访问。是否有任何方法可以使用java脚本覆盖旧的css,谢谢@Sopkey+1的帮助:我认为您实际上不需要回调@Jalpesh:Spokey的示例工作得很好,但是您需要将class=“iframe”
添加到html代码中,以使其与该脚本一起工作。见更新