Попытка изменить размер окна с помощью слайд-шоу цикла jquery

Question

Я пытаюсь запустить скрипт изменения размера окна JavaScript на странице с показом слайдов цикла jQuery, но у меня появляются некоторые ошибки, которые, похоже, не срабатывают. Он изменяет размер первого изображения при загрузке страницы, но затем забывает новые атрибуты высоты / ширины для последующих слайдов. Я могу установить их снова до и после использования jQuery, но изображения всегда кратковременно вспыхивают в полном размере перед изменением размера.

jQuery.cycle изменяет размер слайдов до их исходного размера? Если так, как я могу остановить это?

$(document).ready(function () {
  $('.slideshow').cycle({
    fx: 'fade',
    speed: 200,
    timeout: 1000,
    pause: 1,
    before: function (currSlideElement, nextSlideElement, options, forwardFlag) {
      resize();
    },
    after: function (currSlideElement, nextSlideElement, options, forwardFlag) {
      resize();
    }
  });

  $('.slideshow').find('img').css("height", "0");
  $('#image').hide().idle(1000).fadeIn();
  resize();
});

$(window).resize(function () {
  resize();
});

function resize() {

  var theheight = window.innerHeight;
  var thewidth = window.innerWidth;

  var imageheight = theheight - 200;

  if (imageheight > 540) {
    imageheight = 540;
  }
  if (imageheight < 300) {
    imageheight = 300;
  }

  var imagewidth = imageheight / 0.6585365;

  $(".slide").css("height", imageheight);
  $(".slide").css("width", imagewidth);
  $(".slide").attr("height", imageheight);
  $(".slide").attr("width", imagewidth);

}

Answer 1

Похоже, что цикл сохраняет ширину и высоту элемента контейнера слайда один раз при первом вызове, а затем устанавливает входящий слайд в эти измерения независимо от того, что делает скрипт изменения размера.

У меня недавно была такая же проблема: комбинация опций

$slideshow.cycle({ 
  containerResize: false,
  slideResize: false,
  fit: 1
});

и

.yourslide { width: yourwidth !important }

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

Answer 2

Это сработало для меня в подобных обстоятельствах:

$(window).resize(function(){
$('.lr-slider').each(function(){
    newWidth = $(this).parent('div').width()
    $(this).width(newWidth)
    $(this).children('div').width(newWidth)
})
})

Примечания:

1. .lr-slider - это div, содержащий слайды, он предназначен для поддержки нескольких sldieshows
2. В этом случае .lr-slider наследует свою ширину от родительского элемента в css, поэтому я воссоздаю это в jQuery для события изменения размера окна
3. Все слайды - это элементы div, без классов и идентификаторов. Вы можете предпочесть сделать это более понятным для собственного использования, чтобы вы могли явно ссылаться на класс.

Answer 3

независимо от того, что я вставил в цикл с опцией, сработавшей для меня (пробовал «100%» или «авто»), поэтому я решил эту проблему с помощью css

.slideshowContainer {
    width: auto !important;
}

Кстати. 100%! Важно сделать то же самое. поэтому .slideshowContainer будет принимать 100% ширину окружающего элемента.

Answer 4

Спасибо, Ник, это был шаг в правильном направлении. Мне удалось заставить его работать с нижеуказанным. Как ни странно, это не работает, если у меня нет animIn: height / width, установленной в другое значение, чем они в cssBefore: Есть идеи на этот счет?

 $('.slideshow').cycle({ 
    fx: 'custom', 
    speed: 200,
    timeout : 1000,
    pause:  1,
    cssBefore: {  
       left: 0,  
       top:  0,  
       width: imagewidth,  
       height: imageheight,  
       opacity: 0, 
       zIndex: 1 
   }, 
   animOut: {  
       opacity: 0  
   }, 
   animIn: {  
       left: 0,  
       top:  0,  
       width: imagewidth +1,  
       height: imageheight +1,  
       opacity: 1, 
       zIndex: 1  
   }, 
   cssAfter: {  
       zIndex: 0 
   }
});

Answer 5

Это у вас работает?

В ваших настройках добавьте:

cssBefore: {  
    top:  0, 
    left: 0, 
    width: wwidth, 
    height: wheight,  
    zIndex: 1  
}

И для изменения размера добавьте несколько переменных, которые будут соответствовать изменению размера:

var wheight, wwidth;
function resize() {
  wheight = Math.Min(window.innerHeight - 200, 540);
  wwidth = Math.Min(window.innerWidth, 300) / 0.6585365;
  $(".slide").width(wwidth).height(wheight);
});

Больше не нужно вызывать это в before: и after:, только один раз при загрузке и в $(window).resize().