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

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

4 голосов
/ 06 ноября 2011

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

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

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();
   });

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

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

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

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

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

1 Ответ

0 голосов
/ 04 декабря 2011

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

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

$(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();
      });   
});

});

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

...