Содержимое AJAX, загруженное в Colorbox, содержит JavaScript, который изменяет размеры содержимого. Colorbox определяет его размер на основе размеров до того, как произойдет все AJAX. Как я могу изменить размер Colorbox после загрузки содержимого?
Вот ссылка, в которой кто-то сказал, что вы можете вызывать colorbox() снова после ее загрузки, но я не могу понять, как это сделать:
http://groups.google.com/group/colorbox/browse_thread/thread/535d21c69e9006b0
В Colorbox 1.3 вы можете теперь вызвать функцию изменения размера:
$('.item').colorbox.resize();
Чтобы динамически изменить размер колонок, вы хотите сказать.
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});
});
: D Надеюсь, это полезно и счастливое кодирование! Трей Пасхаль Веб-дизайнер/разработчик
При вызове colorbox просто добавьте к нему функцию onComplete, например
$('.mycolorboxes').colorbox({
onComplete : function() {
$(this).colorbox.resize();
}
});
Поэтому каждый раз, когда содержимое загружается в colorbox, он запускает функцию изменения размера.
Мне нужно было использовать метод setTimeout для работы с изменением размера для меня.
Я делаю ajax-вызов, чтобы получить изображение, подождите 2 секунды и установите colorbox для этого изображения.
По завершении я изменяю размер цвета с размером изображения.
Без тайм-аута это не сработало для меня, потому что изображение не было загружено полностью, а ширина width = 0, height = 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});
}
resize фактически принимает объект jQuery и использует это для изменения размера. Вместо этого вы можете просто перезагрузить colorbox следующим образом:
$(window).resize(function(){
$.fn.colorbox.load();
});
Просто поместите этот код на страницу, которая открывается в iframe:
$(document).ready(function() {
parent.$.fn.colorbox.resize({
innerWidth: $(document).width(),
innerHeight: $(document).height()
});
});
Как я знаю, colorbox с iframe: true не может быть изменен. Цвет с iframe: false может изменять только высоту (используя jQuery.fn.colorbox.resize()).
Итак, вот еще одно возможное решение, которое действительно легко реализовать (хотя оно будет работать на всех colorboxes, которые вы вызываете, поэтому в зависимости от вашей ситуации это может быть не лучшим). Если это сработает для вас, вы можете просто перетащить код в любом месте вашего кода, и он будет работать автоматически. Значения 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');
});
Часть этого ответа адаптирована из: fooobar.com/questions/166965/...
Ну, я раньше не использовал Colorbox, но я использовал похожие вещи, и если я правильно понимаю, то, что вам нужно, это изменить стиль окна после того, как что-то было загружено.
Если вы обнаружите, какие значения id/class применяются к Colorbox, вы можете сделать так, чтобы при загрузке содержимого AJAX вызывается функция для изменения стиля соответствующей части Colorbox.
Вы можете вызвать его в функции обратного вызова, которую он предоставляет:
$(".single").colorbox({}, function(){
alert('Howdy, this is an example callback.');
});
Ответ Криса заставил меня на полпути, но это вызвало массовую ошибку в IE7/8, поскольку она будет вызывать эту функцию каждый раз, когда окно изменяет размер и даже странно на некоторых кнопках asp.net, которые вызывают обратную передачу?!?! даже если нет активного colorbox.
Это, кажется, решает это:
$(window).resize(function(){
if ($('#colorbox').length) {
if( $('#colorbox').is(':hidden') ) {
}
else {
$.fn.colorbox.load();
}
}
});
Он проверяет, что #colorbox существует с использованием .length, а затем проверяет, не скрывает ли он, что делает трюк, как я мог видеть в Firebug, что при закрытии colorbox он не полностью удаляется/уничтожается просто скрытым!
Надеюсь, что это поможет.
Это можно сделать, если вы можете определить высоту/ширину содержимого в iframe, затем вы можете использовать функцию colorbox.resize(), чтобы снова изменить размер колонок.
$.colorbox.resize()
Это также будет работать с активным colorbox, если вы не знаете селектор для активного colorbox.
Не уверен, что вы ищете, но я нашел эту нить, когда искал собственное решение. У меня есть colorbox в режиме iframe. Там есть кнопка, которая при щелчке должна заменить текущий цветной блок на новый. Я просто делаю это...
parent.$.colorbox({
href: newurl,
iframe: true,
width: "600px",
height: "240px",
onClosed: function() {
}
});
Это перезагружает новую страницу в новый colorbox в том же месте, и переход очень плавный.
Этот человек работает правильно, братья.
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 );
});
});
Посетите демонстрационную страницу
$(window).resize(function(){
$.colorbox.resize({
maxWidth:"auto",
width:95+'%',
});
});