Colorbox не изменяет размер до правильной высоты

Я пытаюсь загрузить встроенный HTML в цветовое поле, которое работает нормально, за исключением того, что цветовое поле не настраивается на правильную высоту.

Встроенный HTML-контент имеет очень большую высоту (около 15 000 пикселей), но загружается только 900 пикселей.

Поэтому я начал использовать функцию colorbox.resize() для решения проблемы, например:

        $('.inline-html').colorbox({ 
            onComplete : function() { 
               $(this).colorbox.resize(); 
            }    
        });

Но функция изменения размера работает только до 11 000 пикселей (не требуемые 15 000 пикселей). Однако, если я обновлю страницу дважды, она загрузит полные 15 000 пикселей.

Кто-нибудь может предложить решение?

Спасибо


javascript jquery colorbox imagesloaded
person yorkshiredev    schedule 28.10.2014    source источник
comment
попробуйте использовать фиксированный размер для вашего colorbox и присвойте ему этот атрибут css: `overflow:scroll' .   -  person cнŝdk    schedule 28.10.2014
comment
Я использую полосу прокрутки браузера (в отличие от полосы прокрутки colorbox), таким образом устанавливая scrolling: false; и $(this).colorbox.resize(); -- Если бы я использовал полосу прокрутки colorbox, то работала бы правильная высота. Но мой клиент хочет использовать полосу прокрутки браузера   -  person yorkshiredev    schedule 28.10.2014

Ответы (1)


arrow_upward
1
arrow_downward

Идеи:

  1. Я видел, как это происходит, когда в цветовом поле есть изображения, которые не загружаются при срабатывании onComplete, поэтому цветовое поле изменяет размер до высоты содержимого за вычетом изображений. Затем загружаются изображения и создается полоса прокрутки. Если вы можете установить высоту для незагруженных изображений, проблема может исчезнуть, потому что colorbox сразу узнает, какой у них размер. Бывший:

    <p>Really long content.</p>
<p>Really long content.</p>
<img src="image.jpg" height="300">
<p>Really long content.</p>
  1. Если вы знаете, что цветовая рамка будет иметь размер 15 000 пикселей, можете ли вы установить такую ​​​​высоту в css? Или запустить $.colorbox.resize({height:"15,000"})?

  1. Вероятно, худший вариант, вы можете изменить его размер после тайм-аута, чтобы дать изображениям время для загрузки. Это ненадежно, потому что изображения будут загружаться в разное время для разных людей, но если проблема заключается в изображениях, это может помочь вам устранить неполадки.

    window.setTimeout($.colorbox.resize(), 500);
person cjspurgeon    schedule 28.10.2014
comment
Спасибо за предложения. 1) Я добавил высоту изображения, но все еще испытываю ту же проблему. Кроме того, большую часть контента составляют изображения (90% изображений, 10% текста). 2) У меня есть около 20+ цветовых полей на одной странице, которые динамически загружаются, поэтому, к сожалению, все они разной высоты. 3) ... хм, да, не очень хорошо, я использую библиотеку Jquery ImagesLoaded, хотя, возможно, смогу интегрировать это где-нибудь. - person yorkshiredev; 29.10.2014