Zoom In/Out The Entire Page - jQuery Page Zoom

File Size: 6.21 KB
Views Total: 2349
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Zoom In/Out The Entire Page - jQuery Page Zoom

Page Zoom is an easy-to-use jQuery plugin that enables visitors to zoom in and zoom out the entire page, rather than just a specific element, to improve the accessibility of your website. Similar to the browser's built-in zoom function but more customizable.

With this plugin, your users can easily zoom in on a particular section of the page or zoom out to see the entire page. This can be useful for users with visual impairments or for those who prefer to view web pages at a larger size.

How to use it:

1. Load the minified version of the Page Zoom plugin after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.page_zoom.min.js"></script>

2. Load the js-cookie plugin to save the current zoom level in the cookies. OPTIONAL.

<script src="/path/to/cdn/js.cookie.min.js"></script>

3. Create page zoom controls to increase, decrease, or reset the page magnification.

<!-- Zoom In -->
<a href="#" class="zoom_in">Zoom In</a>

<!-- Zoom Out -->
<a href="#" class="zoom_out">Zoom Out</a>

<!-- Reset -->
<a href="#" class="zoom_reset">Reset Zoom</a>

4. Initialize the page zoom plugin and done.

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

5. Override the default selectors of the zoom controls.

$.page_zoom({
  selectors: {
    zoom_in: '.zoom_in',
    zoom_out: '.zoom_out',
    zoom_reset: '.zoom_reset'
  }
});

6. Set the min/max zoom levels.

$.page_zoom({
  max_zoom: 1.5,
  min_zoom: .5,
  current_zoom: 1,
});

7. Customize the zoom increment.

$.page_zoom({
  zoom_increment: .1,
});

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