Лучший способ прикрепить обратный вызов с функцией изменения размера окна

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

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

CSS прост. По сути:

#gallery img {
 max-height: 100%;
 position:absolute;
 display:none;
 }

И грубый вариант .js будет таким:

$(window).bind("load resize", function() {
      $('#gallery img').each(function(i) {
        var ih = $(this).height();
        var iw = $(this).width();
        var fh = Math.ceil(ih / 2);
        var fw = Math.ceil(iw / 2);
        $(this).css({
          'top' : '50%',
          'left' : '50%',
          'margin-top' : '-' + fh + 'px',
          'margin-left' : '-' + fw + 'px'
        });
      },function() {
      $('#gallery img:first').fadeIn(3000, function() {
      $('#gallery').cycle();
   });

Однако я не вижу ожидаемого результата. Постепенное появление первого изображения срабатывает до того, как произойдут расчеты и позиционирование.

Думая, что «отображение: нет» может сбить с толку (возможно, ничего не вычисляется до тех пор, пока не будет «отображение: блок», я попытался использовать:

#gallery img:first-child {
  display:block;
  opacity:0;
  }

...А затем анимация до полной непрозрачности вместо затухания - но результат тот же.

Что я делаю не так??


jquery jquery-cycle
person SWW    schedule 06.11.2011    source источник
comment
Каждый метод, который вы используете, не имеет функции обратного вызова. См. api.jquery.com/each. /api.jquery.com/jQuery.each/" rel="nofollow noreferrer">api.jquery.com/jQuery.each Это может помочь.   -  person awatts    schedule 06.11.2011
comment
как работает margin: auto; отличается от того, что вы пытаетесь достичь?   -  person buster    schedule 06.11.2011
comment
Спасибо за информацию. У меня все еще есть проблемы с синтаксисом, так как я также пытаюсь связать загрузку и изменение размера окна ... но предполагаю, что в конце концов я наткнусь на это. (Документация для jQuery.each выглядит тонкой..) («margin: auto» не работает с абсолютно позиционированными элементами)   -  person SWW    schedule 06.11.2011
comment
можете ли вы сделать пример на jsbin я делал это много и много раньше, но было бы хорошо отработать реальный пример   -  person Alex    schedule 12.11.2011
comment
У меня есть реальный пример на dev.schippertmartin.com - кажется, работает, хотя, вероятно, не так элегантно как может быть..   -  person SWW    schedule 13.11.2011
comment
(Независимо от того, кнопка паузы не работает должным образом: она просто перезапускает слайд-шоу.)   -  person SWW    schedule 13.11.2011
comment
Независимо от этого, вы можете центрировать изображение (с маржой: авто), поместив img в div, и вместо этого установите div в абсолютное позиционирование :)   -  person Yman    schedule 22.11.2011
comment
Не в этом случае я не могу: цикл JQuery добавляет к изображениям абсолютное позиционирование.   -  person SWW    schedule 28.11.2011

Ответы (1)


arrow_upward
0
arrow_downward

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

Возможно, такое разделение логики изменения размера и цикла галереи может помочь и сделать код более понятным; это изменит размер изображений при изменении размера и запустит галерею при загрузке:

$(document).ready( function() {

function resizeThem() {
     $('#gallery img').each(function(i) {
        var ih = $(this).height();
        var iw = $(this).width();
        var fh = Math.ceil(ih / 2);
        var fw = Math.ceil(iw / 2);
        $(this).css({
          'top' : '50%',
          'left' : '50%',
          'margin-top' : '-' + fh + 'px',
          'margin-left' : '-' + fw + 'px'
        });
      });
}

$(window).bind("resize", resizeThem);

$(document).bind("load", function () {
    resizeThem();
      $('#gallery img:first').fadeIn(3000, function() {
         $('#gallery').cycle();
      });   
});

});

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

person kontur    schedule 04.12.2011
comment
Спасибо, kontur. Что я пытаюсь сделать, так это загрузить изображения и расположить их по центру по горизонтали и вертикали до начала циклического слайд-шоу. Это будет учитывать различные размеры изображений. Само изменение размера выполняется только с помощью CSS, хотя я бы хотел, чтобы центрирование выполнялось динамически. - person SWW; 05.12.2011