Попытка сделать окно изменяет размер со слайд-шоу цикла jQuery
Я пытаюсь работать, окно 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);
}
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
}
});
Работает ли это для вас?
В ваших опциях добавьте это:
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);
});
Больше нет необходимости вызывать это в до: и после:, только один раз загрузить и в $(window).resize().