jQuery цикл плагин, центрирование изображения в div - PullRequest
Новая
       34

jQuery цикл плагин, центрирование изображения в div

2 голосов
/ 28 июня 2009

Я хочу использовать плагин JQuery для циклического перебора множества изображений. Все изображения имеют разные размеры, и я бы хотел, чтобы все они были центрированы внутри контейнера «слайд-шоу» DIV и использовали переход «Исчезать», а не левый верхний угол по умолчанию.

Я добавил обратный вызов «До», в котором я установил верх и лев объекта перед загрузкой, используя следующий код: 

function onBeforeGallerySlide(){
  //Get image size
  var imgHeight = $(this).height();
  var imgWidth = $(this).width();

  //Get container size
  var slider = $(this).parent();
  var containerHeight = slider.height();
  var containerWidth = slider.width();

  var top = Math.floor((containerHeight / 2) - (imgHeight / 2));
  var left = Math.floor((containerWidth / 2) - (imgWidth / 2));

  $(this).css({"top" : top,"left" : left});
}

Это работает, чтобы центрировать первое изображение, но не изображения после этого, я думаю, это потому, что переход "Fade" использует свойство beforeCSS, чтобы установить Top и Left на 0 до перехода. Не возиться с кодом плагина возможно ли переопределить это перед CSS с соответствующими значениями?

Я мог бы вручную установить свойство beforeCSS, но не вижу, как это будет работать, так как значение будет различным для каждого изображения.

Есть предложения?

Ответы [ 2 ]

2 голосов
/ 11 ноября 2010

Вы можете легко центрировать изображения, используя элементы div, а не img, установив свойство background-image ... 

<div id="slider">
    <div style="background-image: url(image1.jpg)"></div>
    <div style="background-image: url(image2.jpg)"></div>
    <div style="background-image: url(image3.jpg)"></div>
</div>

... и применяя этот простой стиль 

#slider { width: 800px; height: 600px; }
#slider div { width: 800px; height: 600px; background-color: transparent; background-repeat: no-repeat; background-position: 50% 50%; }

Надеюсь, что поможет (по крайней мере, новички ;-))

1 голос
/ 28 июня 2009

Пример того, что вы запрашиваете, от автора цикла-плагина. http://jquery.malsup.com/cycle/test/nov20.html Он использует технику, аналогичную той, что вы делаете, но устанавливает свойства margin-left и margin-top вместо свойств top и left ... Как это работает для вас?

...