尝试使用jQuery循环幻灯片进行窗口大小调整 [英] Trying to do window resize with jquery cycle slideshow

问题描述

我正在尝试在具有jQuery循环幻灯片显示的页面上运行JavaScript窗口调整大小脚本，但是我遇到了一些我似乎无法解决的错误.它会在页面加载时调整第一个图像的大小，但随后的幻灯片会忘记新的height/width属性.我可以在使用jQuery之前和之后再次设置它们，但是在调整大小之前，图像始终会以全尺寸闪烁一会儿.

I'm trying to run a JavaScript window resize script on a page with a jQuery cycle slideshow but I'm hitting some bugs I cant seem to work out. It resizes the first image fine on page load but then forgets the new height/width attributes for subsequent slides. I can set these again on before and after using jQuery but the images always flash in at full size for a brief moment before resizing.

jQuery.cycle是否将幻灯片调整为原始大小?如果是这样，我该如何停止呢?

Is jQuery.cycle resizing the slides back to their native size? If so how do I stop this?

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

}

推荐答案

感谢尼克，这是朝正确方向迈出的一步.香港专业教育学院设法使其与下面的工作.奇怪的是，如果没有animIn:将height/width设置为与cssBefore中的值不同的值，它将无法正常工作:

Thanks Nick, that was a step in the right direction. Ive managed to get it to work with the below. Oddly it doesnt work if I dont have animIn: height/width set to a different value than they are in cssBefore: Any ideas on that?

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

这篇关于尝试使用jQuery循环幻灯片进行窗口大小调整的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！