尝试使用jquery循环幻灯片显示窗口大小调整

Question

我正试图在一个带有jQuery循环幻灯片的页面上运行一个JavaScript窗口调整大小脚本但是我遇到了一些我似乎无法解决的错误.它会在页面加载时调整第一个图像的大小,但会忘记后续幻灯片的新高度/宽度属性.我可以在使用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

谢谢尼克，这是朝着正确方向迈出的一步。我已经设法让它与下面的一起工作。奇怪的是，如果我没有将 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 
   }
});