jQuery Funciton To Zoom Any Element Using CSS3 - ZoomElem

ZoomElem is a jQuery based function which allows you to scale any kind of Html elements using CSS3 transform property.

How to use it:

1. Create 2 links with data-zoom attributes to zoom in or zoom out your Html element.

<a href="#" data-zoom="zoomMore" class="btn_zoom">zoom +</a>
<a href="#" data-zoom="zoomLess" class="btn_zoom">zoom -</a>

2. Add the data-zoom="1" attribute to your Html element.

<div data-zoom="1" class="demo">

Your content goes here

</div>

3. Include the jQuery javascript library at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

4. The jQuery function.

var zoomElem = function(element,target,zoomMax,zoomMin,callback){
var scaleMas = 0,
scaleMenos = 0;

element.on('click',function(e){
e.preventDefault();

var cual = $(this).attr('data-zoom'),
zoom = parseFloat( target.attr('data-zoom') );

if( cual === 'zoomMore' ) {
if(scaleMas < zoomMax){
newzoom = parseFloat(zoom+1);
target.text(newzoom).attr('data-zoom',newzoom);
scaleMas++;
if(scaleMenos > zoomMin) {
scaleMenos--;
}
callback();
}
} else if( cual === 'zoomLess' ) {
if(zoom !== zoomMin || zoom > zoomMin){
if(scaleMenos < zoomMax) {
newzoom = parseFloat(zoom-1);
target.text(newzoom).attr('data-zoom',newzoom);
scaleMenos++;
if(scaleMas > zoomMin) {
scaleMas--;
}
callback();
}
}
}
});
}

5. The javascript to enable the zoom functionality.

zoomElem($('.btn_zoom'),$('.demo'),3,1,function(){
$('.demo').css('transform','scale(' + newzoom + ')');
});

---

This awesome jQuery plugin is developed by juanbrujo. For more Advanced Usages, please check the demo page or visit the official website.