jquery вертикальное выравнивание, когда страница загружается с отображением изображения, равным none? - PullRequest
Новая
       8

jquery вертикальное выравнивание, когда страница загружается с отображением изображения, равным none?

0 голосов
/ 17 марта 2012

Я использую JQuery Cycle для создания слайд-шоу изображений. Плагин использует display: none, чтобы скрыть изображения, которые еще не показываются, причем первое изображение автоматически имеет display: block при загрузке страницы. У меня есть этот фрагмент кода JQuery для вертикального центрирования моих изображений внутри контейнера слайд-шоу, который работает ... для самого первого изображения. 

(....inside a (document.ready(function()......)

$('.variable').load(function() {
var imgHt= $('.variable').height();
var half= imgHt/2;
$('.variable').css("top", "50%");
$('.variable').css("margin-top", "-" + half + "px");

});

Я пробовал этот код без .load (function ()), и он работает неправильно. Браузер отобразит top: 50% и margin-top: 0px или высоту: правильную половину высоты изображения, а не отображение сверху: 50%. странно. Здесь я предполагаю, что JQuery не видит размеры изображения, когда его отображение не установлено. Есть ли обходной путь к этому?
Постскриптум Эти изображения генерируются из базы данных, поэтому нет, я не знаю высоту изображения заранее. Вот почему я в первую очередь использую JQuery.

1 Ответ

1 голос
/ 17 марта 2012

Браузер не будет рассчитывать размер любого элемента с display: none.Обычный обходной путь - показать элемент и использовать поля или абсолютное позиционирование для перемещения элемента (или, скорее, его контейнера) на тысячи пикселей за левую сторону экрана.Затем будут вычислены поля, вы можете выполнить ручное позиционирование, а затем скрыть и удалить поля.

Однако, поскольку вы используете плагин, это может работать не очень хорошо.В этом случае, я думаю, вам лучше изменить плагин для отображения изображений так, как вы хотите.Это может быть возможно только с помощью CSS, но это зависит от элементов box, используемых плагином, и стилей, которые он применяет (через CSS или JS) к боксам и самому изображению.

...