Jssor слайдер отзывчивый заголовок, нежелательное изменение размера текста

Используя ползунок JSSOR, функция ScaleSlider() вызывает $ScaleWidth для изменения размера ползунка в соответствии с областью просмотра. Это достигается путем применения стиля преобразования к элементу #slider1_container.

transform: scale(0.756364);

Однако это также приводит к изменению размера любого текста в подписи, что делает его неразборчивым.

<div id="slider1_container">
    <div u="slides">
            <div u="caption" class="myCaption">
                <p>Text goes here</p>                   
            </div>              
            <img u="image" src="myImage.jpg" />             
    </div>              
 </div>

Как я могу предотвратить влияние стиля преобразования на текст подписи (.myCaption)?


slider transform scaletransform jssor
person Marc Owens    schedule 27.08.2014    source источник

Ответы (4)


arrow_upward
-1
arrow_downward

Надпись всегда должна масштабироваться вместе с ползунком. Нет возможности остановить масштабирование подписи.

Css трюк ниже может удовлетворить ваши потребности,

    @media only screen and (max-width: 480px) {
        .myCaption{
            ...;
            font-size: 24px;
            ...;
        }
    }

    @media only screen and (max-width: 768px) {
        .myCaption{
            ...;
            font-size: 16px;
            ...;
        }
    }

    @media only screen and (min-width: 769px) {
        .myCaption{
            ...;
            font-size: 12px;
            ...;
        }
    }
person jssor    schedule 28.08.2014
comment
Caption should always scale along with slider. ... Да, но текст масштабируется довольно уродливым, пиксельным образом, а размер шрифта не изменяется должным образом. - person CJBrew; 23.12.2014
comment
Это определенно неправильное решение. Все становится пиксельным. - person machineaddict; 31.03.2018

arrow_upward
2
arrow_downward

Это очень раздражало, наш дизайнер постоянно жаловался на автоматическое изменение размера. Что я сделал, чтобы справиться с этим, было:

1. Создал функцию для масштабирования div, который удерживает мои подписи до исходного размера. Первоначально div был скрыт, а после применения преобразования отображается. Исходный размер моего слайдера составляет 1920 пикселей в ширину, поэтому я использую его для расчета процента изменения размера браузера, чтобы уменьшить размеры подписей.

function ScaleCaptions(){   
bodyWidth = document.body.clientWidth;
widthChange=1920/bodyWidth;

if(bodyWidth<992){widthChange=widthChange/1.5;}

$(".captionHolder").css("transform","scale("+widthChange+")");  
$(".captionHolder").show(); 
}

  1. Я вызываю эту функцию для следующих 3 событий после вызова функции ScaleSlider:

    $(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);


$(window).bind("load", ScaleCaptions);
$(window).bind("resize", ScaleCaptions);
$(window).bind("orientationchange", ScaleCaptions);

  2. Если вы хотите изменить размер подписей в какой-то момент, правила css не будут работать, поэтому вам придется сделать это с помощью jquery. В моем случае я хотел изменить размер подписей ниже 992 пикселей, поэтому я добавил эту строку кода в свою функцию.

    if(bodyWidth<992){widthChange=widthChange/1.5;}
person George    schedule 12.05.2015

arrow_upward
0
arrow_downward

я бы не согласился с вышеуказанным подходом, извините за другой ответ, но я не мог комментировать. Даже при добавлении правил css для хорошо установленных точек останова (768,992,1200 и т. д.) размер текста продолжает изменяться вдоль ползунка, с разницей в том, что он начинается с размера текста, объявленного в правилах css. Так, например, если бы я хотел, чтобы для 768 пикселей размер шрифта был 16 пикселей, хотя он начинался бы с 16 пикселей на 768 пикселей, он продолжал бы изменять размер вдоль ползунка, а это не то, что мне нужно. Кроме того, размер шрифта 16 пикселей при разрешении 1200 пикселей и размер шрифта 16 пикселей при разрешении 768 пикселей имеют огромную разницу, причем во втором случае текст очень маленький.

person George    schedule 12.02.2015

arrow_upward
0
arrow_downward

У меня есть аналогичная автоматизированная функция, которая работает для моего решения:

function ScaleSliderCaptions(id,obj){
    //var parentWidth = jQuery('#'+id).parent().width();
    var bodyWidth = document.body.clientWidth;
    var widthChange=obj.$GetOriginalWidth()/bodyWidth;
    if(bodyWidth<(obj.$GetOriginalWidth()/2)){widthChange=widthChange/1.5;}
    jQuery(".slider-content").css("transform","scale("+widthChange+")").show();
}

obj - созданный ранее объект слайдера,

id - контейнер_слайдера

person step    schedule 14.01.2017