Блог

Я пытаюсь создать слайд-шоу цикла jQuery, в котором изображения разных размеров центрируются по вертикали и горизонтали, а также изменяют размер до любого размера окна. Часть этого является прямым 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();
   });
  

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

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

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

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

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

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

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

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

});

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