如何动态调整jQuery Colorbox插件的大小?

2020/12/31 14:52 · jquery ·  · 0评论

加载到Colorbox中的AJAX内容包含一些JavaScript,可以调整内容中内容的大小。Colorbox根据所有AJAX发生之前的大小确定其大小。加载内容后,如何调整Colorbox的大小?

这是一个链接,有人说可以在加载后再次调用colorbox(),但我不知道该怎么做:

http://groups.google.com/group/colorbox/browse_thread/thread/535d21c69e9006b0

要动态调整颜色框的大小,您要说。

colorbox.resize({width:"300px" , height:"300px"})

如果您要调整加载iframe的颜色框的大小,则可以在目标文档的开头添加类似的内容。

$(document).ready(function(){
    var x = $('mydiv').width();
    var y = $('mydiv').height();

    parent.$.colorbox.resize({width:x, height:y});

});

在Colorbox 1.3中,您现在可以调用调整大小功能:

$('.item').colorbox.resize();

调用颜色框时,只需向其中添加一个onComplete函数,例如

$('.mycolorboxes').colorbox({    
  onComplete : function() { 
       $(this).colorbox.resize(); 
  }    
});

因此,每次在颜色盒中加载内容时,它都会启动其调整大小功能。

我需要使用setTimeout方法来为我调整大小。

我进行ajax调用以获取图片,等待2秒钟,然后为该图片设置colorbox。


完成后,我用图片大小调整了颜色框的大小。

没有超时,它对我不起作用,因为图片未完全加载,并且宽度= 0,高度= 0作为图片的大小。

$.get('/component/picture/getPicture.do?pictureId=' + id, 
       function(data) {  //callback function
           $('#pictureColorbox').html(data);  //set picture inside div on this page
           setTimeout(function(){  // set timeout 2 sec
               //create colorbox for inline content "#pictureColorbox" and call showPicture on complete
               $.colorbox({href:"#pictureColorbox", inline:true,  title:'', initialWidth:900, initialHeight:600,  scrolling:false, onComplete: function(){showPicture(id);}});
           }, 2000); 
       });

function showPicture(id) {
    var x = $('#' + id + " #picture").width();
    var y = $('#' + id + " #picture").height();
    $.colorbox.resize({innerWidth:x, innerHeight:y});
}

调整大小实际上需要一个jQuery对象,并使用它来调整大小。相反,您可以像这样重新加载颜色框:

$(window).resize(function(){
    $.fn.colorbox.load();
}); 

只需将此代码放在打开的页面中iframe

$(document).ready(function() {
    parent.$.fn.colorbox.resize({
        innerWidth: $(document).width(),
        innerHeight: $(document).height()
    });
});

据我所知,带有的颜色框iframe: true无法调整大小。具有的颜色iframe: false只能调整高度(使用jQuery.fn.colorbox.resize())。

$.colorbox.resize()

如果您不知道活动颜色框的选择器,这也将在活动颜色框上起作用。

因此,这是另一个可能非常容易实现的解决方案(尽管它可以在您正在调用的所有颜色盒上使用,所以根据您的情况,可能不是最好的)。如果这对您有效,则只需将代码基本上拖放到代码中的任何位置即可自动运行。HEIGHT_PERCENTAGE和WIDTH_PERCENTAGE值使您可以设置相对于整体窗口大小调整窗口大小的大小。您可以添加一些其他值来创建最小尺寸,等等。

    $(function() {
        $(window).bind('resize', function() {

            var HEIGHT_PERCENTAGE = .60; // '1' would set the height to 100%
            var h = "innerHeight" in window 
               ? window.innerHeight
               : document.documentElement.offsetHeight; 
            h *= HEIGHT_PERCENTAGE;

            var WIDTH_PERCENTAGE = .40; // '1' would set the width to 100%
            var w = "innerHeight" in window 
               ? window.innerWidth
               : document.documentElement.offsetWidth;
            w *= WIDTH_PERCENTAGE;

            $.colorbox.resize({width: w, height: h});
        }).trigger('resize');
    });

该答案的一部分改编自:https : //stackoverflow.com/a/3012772/1963978

好吧,我以前没有使用过Colorbox,但是我使用过类似的东西,如果我理解正确,那么您需要做的就是在加载某些东西后更改盒子的样式。

如果您发现将哪些id / class值应用于Colorbox,则可以进行设置,以便在加载AJAX内容时调用一个函数来更改Colorbox相应部分的样式。

如果可以在iframe中检测内容的高度/宽度,则可以执行此操作,然后可以使用colorbox.resize()函数再次调整colorbox的大小。

您可以在提供的回调函数中调用它:

$(".single").colorbox({}, function(){
     alert('Howdy, this is an example callback.');
});

克里斯的答案让我半途而废,但它在IE7 / 8中造成了严重错误,因为每次窗口调整大小时它都会调用该函数,甚至在某些导致回发的asp.net按钮上也很奇怪?即使没有活动的颜色框。

这似乎解决了:

    $(window).resize(function(){
               if ($('#colorbox').length) {
     if( $('#colorbox').is(':hidden') ) {                    
          }
         else {
           $.fn.colorbox.load();
         }
       }
    });

它使用.length来检查#colorbox是否存在,然后检查它是否未隐藏,这就像在Firebug中看到的那样,当您关闭colorbox时,它并没有被完全删除/销毁,而是隐藏了!

希望这可以帮助..

不确定您在寻找什么,但是我在寻求自己的解决方案时找到了该线程。我在iframe模式下有一个颜色框。其中有一个按钮,单击该按钮时需要将其替换为新的颜色框。我就是这样

parent.$.colorbox({
    href: newurl,
    iframe: true,
    width: "600px",
    height: "240px",
    onClosed: function() {
    }
});

这样可以将新页面重新加载到相同位置的新色箱中,并且过渡非常顺畅。

$(window).resize(function(){    
        $.colorbox.resize({
            maxWidth:"auto",
            width:95+'%',
        });
});

这是一个工作正常的兄弟。

jQuery( document ).ready( function(){
var custom_timeout = ( function() {
    var timers = {};
    return function ( callback, ms, uniqueId ) {
        if ( !uniqueId ) {
            uniqueId = "Don't call this twice without a uniqueId";
        }
        if ( timers[uniqueId] ) {
            clearTimeout ( timers[uniqueId] );
        }
        timers[uniqueId] = setTimeout( callback, ms );
      };
})(); 
$(".group1").colorbox({rel:'group1', width:"80%" }); 
$( window ).resize( function(){
    custom_timeout(function(){
        if( $('#cboxOverlay' ).css( 'visibility' ) ){
            $(".group1").colorbox.resize({ innerWidth:'80%' });
        }
    }, 500 );
}); 
});
本文地址:http://jquery.askforanswer.com/ruhedongtaidiaozhengjquery-colorboxchajiandedaxiao.html
文章标签: ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!