Центрировать/Обрезать изображения - Адаптивное слайд-шоу с использованием плагина Cycle2

Я работаю над решением для обрезки и центрирования изображений в слайд-шоу цикла 2.

Я изменяю размер и центрирую изображение в слайд-шоу относительно родителя, используя этот плагин.

Проблема, с которой я сталкиваюсь, заключается в том, что я центрирую изображение после его перехода, но это заставляет каждый слайд «прыгать» на место. Кажется, я не могу найти способ центрировать все изображения на слайде и изменить его размер.

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/


javascript jquery css responsive-design jquery-cycle2
person hyperdrive    schedule 16.01.2014    source источник
comment
Я бы предложил использовать изображения в качестве фоновых изображений CSS для элементов div .slide. Затем вы можете изменить их размер с помощью background-size: cover и background-position: center.   -  person mgrahamjo    schedule 16.01.2014
comment
Этот сайт должен быть доступен, все изображения должны иметь теги alt. Фоновые изображения не работают.   -  person hyperdrive    schedule 17.01.2014

Ответы (1)


arrow_upward
1
arrow_downward

Плагин resizeToParent не будет работать, если для родителей изображения установлено значение display:none. Поскольку плагин resizeToParent ожидает кэширования изображений, он не запустится до тех пор, пока для большинства слайдов не будет установлено значение display:none.

Запустите слайд-шоу программно, используя $('.slideshow').cycle() после запуска resizeToParent, и все работает как надо.

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

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

Скрипка!

person ntdb    schedule 16.01.2014
comment
Очень круто, похоже, это работает, кроме изменения размера окна. Что странно, поскольку resizeToParent включает событие изменения размера окна. Я попытался уничтожить слайд-шоу, а затем снова запустить, но это не работает. jsfiddle.net/mwHk4/4 - person hyperdrive; 17.01.2014
comment
Это имеет смысл на самом деле. Я думаю, что код resizeToParent следует обновить, чтобы гарантировать, что родители изображений всегда настроены на отображение: блокировка при запуске кода. Если родитель скрыт, то размер изображений не к чему. Попробуйте это: jsfiddle.net/mwHk4/5 - person ntdb; 18.01.2014