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

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

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

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

}
8
cycle jquery resize slideshow

5 ответов

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

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

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

и

.yourslide { width: yourwidth !important }

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

18

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

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

Примечания:

  1. .LR-slider является div contianing слайдов, это amde для поддержки mulitple sldiesows
  2. в этом случае,.LR-slider наследует ширину от родительского элемента в css, поэтому я воссоздаю это в jQuery на событии изменения размера окна
  3. слайды - это все элементы div, без классов или идентификаторов. Вы можете предпочесть сделать это более trargeted для вашего собственного используйте, чтобы вы могли явно ссылаться на класс.
1

это работает для вас?

в настройках добавьте следующее:

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: больше, только один раз onload и в $(window).resize().

0

спасибо Ник, Это был шаг в правильном направлении. Мне удалось заставить его работать с ниже. Как ни странно, это не работает, если у меня нет 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 
   }
});
0

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

.slideshowContainer {
    width: auto !important;
}

кстати. 100% !важный сделал бы то же самое. так .slideshowContainer займет 100% ширину окружающего элемента..

0