Масштаб Jssor пропорционально высоте и ширине контейнера

Поискав вокруг, я обнаружил, что люди либо масштабируются по высоте, либо по ширине, что я могу сделать, однако мне нужно сделать и то, и другое.

Мой контейнер галереи установлен в процентах, хотя я не думаю, что это имеет значение.

По сути, я хочу, чтобы моя галерея jssor настраивалась в соответствии с размерами контейнера.

Посмотрите на полноэкранное решение здесь http://www.jssor.com/testcase/full-screen-slider.source.html это ошибка JS, поэтому она не работает.

Прямо сейчас я масштабирую по высоте, что в некоторой степени работает, однако по мере того, как ширина становится меньше, галерея изображений будет обрезана (поскольку контейнер имеет переполнение: скрыто) на некоторых меньших ширинах, поскольку он настраивается по высоте контейнера, чтобы оставаться пропорционально, но не учитывает ширину контейнера, по сути, ширина больше, чем ширина контейнера.

function ScaleSlider() {

var parentHeight = jssor_slider1.$Elmt.parentNode.clientHeight;

if (parentHeight) {

    if ((parentHeight - 70) > 0) {

        parentHeight = parentHeight - 70;

    }


    var sliderOriginalWidth = jssor_slider1.$OriginalWidth();

    var sliderOriginalHeight = jssor_slider1.$OriginalHeight();

    var newWidthToFitParentContainer = parentHeight / sliderOriginalHeight * sliderOriginalWidth;


    jssor_slider1.$ScaleWidth(newWidthToFitParentContainer);
}
else
    window.setTimeout(ScaleSlider, 30);


}

jquery css jssor
person user2760338    schedule 23.01.2015    source источник
comment
В долгосрочной перспективе нам нужен новый API $ResizeCanvas. Но на данный момент ползунок jssor всегда должен поддерживать соотношение сторон в соответствии с масштабом. Кстати, jssor.com/testcase/full-screen-slider.source .html работает.   -  person jssor    schedule 24.01.2015
comment
Да, это правильно, он сохраняет соотношение сторон, чего я и хочу, и в этом проблема, когда я масштабирую ширину по высоте в какой-то момент, ширина ползунка будет больше, чем ширина его контейнера. В вашем примере есть ошибка JS, если вы измените размер ширины, которую увидите.   -  person user2760338    schedule 24.01.2015
comment
Итак, нам нужен новый API $ResizeCanvas. Это невозможно сделать за короткое время. Кстати, в демо-ссылке нет ошибки js, даже если я изменяю размер окна.   -  person jssor    schedule 24.01.2015
comment
Хорошо, буду ждать API, я вставил возможное решение ниже. Я предполагаю, что для моих нужд у меня есть дополнительная сложность контейнера галереи, который является плавным (в процентах) как по высоте, так и по ширине, а не только по одному.   -  person user2760338    schedule 24.01.2015

Ответы (1)


arrow_upward
0
arrow_downward

Хорошо, поскольку JSSOR сказал, что текущего решения нет, вот что я сделал за это время.

При масштабировании по высоте вы также должны определить, будет ли ширина галереи превышать ее контейнер, и вместо этого рассчитывать по ширине.

var parentHeight = jssor_slider1.$Elmt.parentNode.clientHeight;

                if (parentHeight) {


                    var sliderOriginalWidth = jssor_slider1.$OriginalWidth();

                    var sliderOriginalHeight = jssor_slider1.$OriginalHeight();

                    var newWidthToFitParentContainer = parentHeight / sliderOriginalHeight * sliderOriginalWidth;

        if (newWidthToFitParentContainer > jssor_slider1.$Elmt.parentNode.clientWidth) {

            //scale differently if the width of the slider is greater than the parent

            jssor_slider1.$ScaleWidth(jssor_slider1.$Elmt.parentNode.clientWidth-30);


        }
        else {

            jssor_slider1.$ScaleWidth(newWidthToFitParentContainer);

        }
                }
                else
                    window.setTimeout(ScaleSlider, 30);
person user2760338    schedule 24.01.2015