Slider Revolution WP
09.27.2016
Increase Size of Text on Mobile
This article is now outdated!
Please click here to view how this can be done with version 5.0+
Sometimes when you’re using the “Auto Responsive” layout, when the slider scales down to mobile-view, the text becomes smaller than you’d like it to be.
This article will cover some possible options you could implement.
One option is to hide the text on mobile. To do that, first visit your slider’s main settings page, and then enter a number into the “Hide Defined Layers Under Width” field:
and then inside your slide, select the layer on the preview stage, open up the “Layer Links & Advanced Params” section, and then click the “Hide Under Width” checkbox:
Another option is to use some custom JavaScript to manually increase the size of the text on mobile, using CSS3 transforms.
Here’s an example of what text might look like “full size” in a slider:
And here’s what this text might look like on a mobile screen:
And here’s an example of the same text, on the same mobile screen, but this time with the custom JavaScript below applied:
To use this custom script, first head over to your layer’s text, and wrap it in a “span” tag with a class name of “zoom-this”.
The reason we need to add a “span” tag around our text is to make sure that when we apply the CSS3 transform to the text, it doesn’t interfere with the transform that the slider normally applies to the layer. Using a class name in both the “span” tag and the script below (“zoomSelector” variable in script) will allow you to “zoom” more than one text layer. Just select another layer and wrap it in the same “span” tag like the example in the screenshot above.
After you’ve setup your custom “span” tags, add the following script to your slider. Slider Revolution 4.5 introduced a new “Custom JavaScript” section inside the slider’s main settings page, where the above script can be added:
If you aren’t using version 4.5 or higher, click here for instructions about how to update the plugin.
To get your slider’s “revapi” name, click the “API” section in your slider’s main settings page, and it will be listed in the API methods as shown in the following screenshot:
And lastly, check out the comments in the code for individual usage.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
(function($) { // Change "revapi1" below to your slider's unique "API" variable: var api = revapi1, // enter the "Grid Width" of your slider here // if not entered, script will attempt to obtain these values automatically // see #8 here: https://themepunch.com/revolution/documentation/assets/images/image_262.jpg gridWidth = 0, // the class name or ID of your element you wish to scale up zoomSelector = '.zoom-this', // CSS transformOrigin: https://www.w3schools.com/cssref/css3_pr_transform-origin.asp scaleFrom = 'left top', // if slider is scaled below "firstScaleCheck" value, // and above "secondScaleCheck" value, // zoom element by "firstScaleAmount" value firstScaleCheck = 0.5, firstScaleAmount = 0.35, // if slider is scaled below "secondScaleCheck" number, // zoom element by "secondScaleAmount" value secondScaleCheck = 0.25, secondScaleAmount = 0.75, // no need to edit anything below slider = $('.rev_slider_wrapper'); if(!slider.length) return; var temp = slider[0].style, transform = 'transform' in temp ? 'transform' : 'WebkitTransform' in temp ? 'WebkitTransform' : 'MozTransform' in temp ? 'MozTransform' : 'msTransform' in temp ? 'msTransform' : 'OTransform' in temp ? 'OTransform' : null; if(!gridWidth) { var script = slider.closest('.rev_slider_wrapper').find('script').text(); if(script) gridWidth = parseInt(script.split('startwidth:')[1].split(',')[0], 10); } if(!gridWidth || !transform) return; var plus, origin = 'transformOrigin' in temp ? 'transformOrigin' : 'WebkitTransformOrigin' in temp ? 'WebkitTransformOrigin' : 'MozTransformOrigin' in temp ? 'MozTransformOrigin' : 'msTransformOrigin' in temp ? 'msTransformOrigin' : 'OTransformOrigin' in temp ? 'OTransformOrigin' : null, items = slider.find(zoomSelector).each(function() {this.style[origin] = scaleFrom;}); api.on('revolution.slide.onloaded', function() { sizer(); $(window).on('resize', sizer); }); function sizer() { var scaled = Math.min(slider.width() / gridWidth, 1).toFixed(2); plus = scaled < 1 ? (1 - parseFloat(scaled)) + 1 : 1; if(scaled < firstScaleCheck) { plus = scaled > secondScaleCheck ? plus + firstScaleAmount : plus + secondScaleAmount; } items.each(sizeEach); } function sizeEach() { this.style.display = 'inline-block'; this.style[transform] = 'scale(' + plus + ', ' + plus + ')'; } })(jQuery); |
