jCarousel Lite - центрировать изображения по горизонтали и вертикали - PullRequest
Новая
       11

jCarousel Lite - центрировать изображения по горизонтали и вертикали

0 голосов
/ 19 апреля 2010

У меня есть jCarousel Lite, идущий в Drupal с изображениями различных размеров / форматов изображения. У меня нет особой удачи, пытаясь центрировать изображения по вертикали и горизонтали (то есть равномерно распределенные). Плагин требует, чтобы изображения были в <ul><li><img ... /></li></ul>. Я пробовал display:inline-block, marginTop:50% среди прочего, большинство из которых просто испортили карусель.

Карусель размещена по адресу: http://carillontech.org/drupal/

спасибо !!

Ответы [ 2 ]

2 голосов
/ 19 апреля 2010

Один из способов сделать это, поскольку вы уже используете jQuery на странице, это получить высоту изображения для каждого изображения, вычесть ее из высоты карусели и применить верхнее поле, равное половине этого значения, изображение или родителю li.

Примерно так: 

$('#carousel img').each(function() {
   marginTop = ($('#carousel').outerHeight(false) - $(this).outerHeight(false)) / 2;
   if(marginTop > 0) {
      $(this).css({'margin-top':marginTop});
   }
});

Вам нужно настроить #carousel с использованием фактического идентификатора, который вы используете, но он должен работать следующим образом.

0 голосов
/ 21 апреля 2010

Спасибо за подсказки. Это что-то вроде копа, но самое простое решение - расширить холсты изображений, чтобы они были одинакового размера. Если цвет фона когда-нибудь изменится, мне придется вернуться и изменить его в изображениях (поскольку jpg не обеспечивает прозрачность), но, по крайней мере, он работает последовательно в каждом браузере (в отличие от CSS).

...