jQuery CSS Zoom

A jQuery plugin that transforms a DOM element into a zoom control using a jQueryUI slider. Zooming is done by CSS transform.

Default Settings

The CSS zoom functionality can easily be added to a DOM element with appropriate default settings.

            
                $('#demoZoom').csszoom({'zoomTarget':  $('#demoZoomTarget')});

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur turpis non semper suscipit. Nullam a libero convallis, molestie est quis, sollicitudin odio. Vestibulum lacus massa, feugiat nec tincidunt sed, gravida id mi. Cras et ullamcorper augue. Quisque condimentum libero diam, eget porta urna gravida vitae. Aenean eget ipsum nulla. Proin quis rhoncus augue. Nullam eu diam et quam imperdiet bibendum. Nulla facilisi. Phasellus posuere eros eget augue condimentum pharetra. Morbi aliquet odio elit, sit amet viverra purus feugiat quis. Sed eu neque fermentum arcu placerat lacinia vel ac est.

You can also remove the CSS zoom functionality if it is no longer required, or disable or enable the field to receive input.

            
                $('#removeZoom').click(function() {
                    if ($(this).text() == 'Remove') {
                        $(this).text('Re-attach');
                        $('#demoZoom').csszoom('destroy');
                    } else {
                        $(this).text('Remove');
                        $('#demoZoom').csszoom({'zoomTarget':  $('#demoZoomTarget')});
                    }
                });

                $('#disableZoom').click(function() {
                    if ($(this).text() == 'Disable') {
                        $(this).text('Enable');
                        $('#demoZoom').csszoom('disable');
                    } else {
                        $(this).text('Disable');
                        $('#demoZoom').csszoom('enable');
                    }
                });

You can override the defaults globally as shown below:

$.csszoom.setDefaults({zoomLevels: [1, 2, 5, 10]});

Options

zoomLevels: Customise the zoom levels through additional settings.

            
                $('#optionZoom1').csszoom({'zoomTarget':  $('#optionZoom1Target'), zoomLevels: [1, 2, 5, 10]});

Events

onZoom:

You can be notified when the zoom changes via the onZoom setting. It receives one argument, the actual level of the zoom.

            
                $('#optionZoom2').csszoom({'zoomTarget':  $('#optionZoom2Target'), onZoom: function (zoom) {
                    $('#optionZoomOnZoomLabel').text('Current zoom value: ' + zoom);
                }});

Methods

zoomIn and zoomOut:

You can call zoomIn and zoomOut respectively to zoom-in or zoom-out.

            
                $('#optionZoom3').csszoom({'zoomTarget':  $('#optionZoom3Target')});
                $('#zoomIn').click(function() { $('#optionZoom3').csszoom('zoomIn');});
                $('#zoomOut').click(function() { $('#optionZoom3').csszoom('zoomOut');});

Styling

You can adjust the appearance of the zoom slider via CSS. In addition to the default jQueryUI css classes the main control will have a css-zoom definition and the The default is to place the feedback immediately after the textarea zoom label will have a css-zoom-label definition. The default styles should be defined like (see attached .css file)

                
                    .css-zoom {
                        height: 100px;
                        width: 3px;
                        position: relative;
                        display: inline-block;
                    }

                    .css-zoom a.ui-slider-handle {
                        width: 15px;
                        height: 15px;
                        line-height: 15px;
                        left: -7px;
                        outline: none;
                    }

                    .css-zoom a.ui-slider-handle .css-zoom-label {
                        top: 0px;
                        left: 17px;
                        position: absolute;
                        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                        font-size: 10px;
                    }

Quick Reference

A full list of all possible settings is shown below.

$(selector).csszoom({
            zoomTarget:  selector,   //the target DOM element to be zoomed via this control
            zoomLevels: [0.1, 0.25, 0.5, 1, 2, 5, 10],  //the list of available zoom levels
            onZoom: null // Callback when zoom level changes
                // receives one parameter: the current zoom level
            });

            $.csszoom.setDefaults(settings) // Change settings for all instances

            $(selector).csszoom('option', settings) // Change the instance settings
            $(selector).csszoom('option', name, value) // Change an instance setting
            $(selector).csszoom('option', name) // Retrieve an instance setting

            $(selector).csszoom('enable') // Enable the css-zoom functionality
            $(selector).csszoom('disable') // Disable the css-zoom functionality

            $(selector).csszoom('zoomIn') // Zoom in
            $(selector).csszoom('zoomOut') // Zoom out

            $(selector).csszoom('destroy') // Remove the css-zoom functionality