Last active
August 29, 2015 14:22
-
-
Save kier0/fce33f35bb8a8b5f1d70 to your computer and use it in GitHub Desktop.
Instructions: http://www.themepunch.com/faq/increase-size-of-text-on-mobile/ Add custom JS to "Custom JavaScript:" under "CSS/JavaScript" in the SLIDER SETTINGS
Make sure to add CSS "transform-origin:center 0px!important;" to "span.zoom-this" so zooming doesn't move content to one side as it zooms.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| span.zoom-this { | |
| transform-origin:center 0px!important; | |
| margin: 0px auto !important; | |
| max-width: 100% !important; | |
| display: block!important; | |
| } | |
| _______ THE JS ________ | |
| (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: http://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: http://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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment