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

Question

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

我正在使用 this plugin 调整幻灯片中图像的大小并将其居中到父级.

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

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 插件等待图像被缓存，所以它不会运行，直到大多数幻灯片已经设置为显示:无。

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

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

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

Fiddle!