🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Allow the user to zoom in or out on the page using links or buttons (anything that will accept an onClick event). If the js-cookie library is available, the zoom level is saved to a cookie. This saves visitors from having to reapply the zoom level on every page load.

Plugins Zoom

Documentation

jQuery Page Zoom plugin

Allow the user to zoom in or out on the page using links or buttons (anything that will accept an onClick event). If the js-cookie library is available, the zoom level is saved to a cookie. This saves visitors from having to reapply the zoom level on every page load.

General Requirements

You'll need to have these libraries included on your page somewhere:

Usage

Add jQuery, js-cookie and jQuery Page Zoom to your page.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="./javascript/js.cookie.js"></script> <script type="text/javascript" src="./javascript/jquery.page_zoom.js"></script> 

Set up a few links or buttons on your page that will act as the controls.

<ul> 	<li><a href="#" class="zoom_in">Zoom In</a></li> 	<li><a href="#" class="zoom_out">Zoom Out</a></li> 	<li><a href="#" class="zoom_reset">Reset Zoom</a></li> </ul> 

Then call the plugin to attach the zoom functions to the links.

$(document).ready(function() {  	$.page_zoom();  }); 

Options

You can optionally pass an array of options to the function to customize how it works.

var options = { 	max_zoom: 1.5, // maximum amount you can zoom in. 1.5 = 150% zoom 	min_zoom: .5, // the minimum amount you can zoom out. .5 = 50% zoom 	zoom_increment: .1, // how much each click zooms in/out. So if the current zoom is 1.3, one click of the zoom out link means 1.3 - 0.1 = 1.2. New zoom level is 1.2 	current_zoom: 1, // default zoom. don't set this unless you want to force a zoom level on each page load 	selectors: { 		zoom_in: '.zoom_in', // the selector for the element(s) that will get the zoom in action for the onclick event 		zoom_out: '.zoom_out', // the selector for the element(s) that will get the zoom out action for the onclick event 		zoom_reset: '.zoom_reset' // the selector for the element(s) that will get the reset zoom action for the onclick event 	} };  $.page_zoom(options); 

Development

Pull requests are welcome!

License

This library is being provided as is under an MIT license. See LICENSE-MIT.txt for the details of that.


You May Also Like