javascript - 中心/裁剪图像 - 使用 Cycle2 插件的响应式幻灯片

Question

我正在研究在 cycle2 幻灯片中裁剪和居中图像的解决方案。

我正在使用此插件调整幻灯片中图像的大小并将其居中到父级。

我遇到的问题是我在图像转换后将其居中，但这会导致每张幻灯片“跳”到位。我似乎无法找到将所有图像集中在幻灯片初始化并调整大小的方法。

function cropSlideImage() {
    $('.cycle-slideshow img').resizeToParent({parent: '.slide'});
}

$( document ).ready(function() {
    cropSlideImage();

   $( '.cycle-slideshow' ).on( 'cycle-update-view', function( event, optionHash, slideOptionsHash, currentSlideEl ) {
      cropSlideImage();
  });
});

http://jsfiddle.net/mwHk4/1/

Answer 1

如果图像父级设置为 display:none，resizeToParent 插件将不起作用。因为 resizeToParent 插件等待图像被缓存，所以在大多数幻灯片已经设置为 display:none 之前它不会运行。

在运行 resizeToParent 后使用 $('.slideshow').cycle() 以编程方式启动幻灯片，一切似乎都按预期工作。

function cropSlideImage() {
    $('.slideshow img').resizeToParent();
}

$(document).ready(function() {
    cropSlideImage();
    $('.slideshow').cycle();
});

小提琴！