Zoom In/Zoom Out Web Page Content Using jQuery

Introduction

Recently I have created a Jquery Plugin that will help you to Zoom In / Zoom Out content on web page.

We can use this plugin in any kind of application like .Net, PHP, Java and in any application using Jquery we can use this plugin.

Plugin Details

You can find this plugin on my Github repository(here).

Usage

You can refer Github readme for the implementation guide and I have created an example page, you can take reference from there also. (Click here to Open)

I have also created video that will guide you to implement this plugin in your application. (Click here to view)

OR you can follow the below steps to use this plugin,

1. Download "content-zoom-slider.min.js" file from src folder and include like below.

 <script src="../src/content-zoom-slider.min.js"></script>

2. Initialize plugin

<div id="content">
      Content area
</div>
<div id="zoom-tool-bar">
</div>
<script>
      $(function () {
        $("#content").contentZoomSlider({
          toolContainer: "#zoom-tool-bar"
        });
 });
</script>

Here "content" div is the element on which you want to add Zooming functionality and "zoom-tool-bar" div is the place where zoom strip will be shown with zoom in/out button and slider like below

Options

<script>
  $("#content").contentZoomSlider({
      toolContainer: ".zoom-tool-bar", // element where slider bar will show
      setp: 25, // step size
      min: 25, // min range
      max: 200, // max range
      zoom: 100, // default zoom size
  });
</script>

This plugin has below options with default values,

• tookContainer - Area where zoom strip will show.
• step - We can define step size and the default step size is 25%.
• min - We can define minimum zoom size from here and default is 25%.
• max - We can define maximum zoom size from here and default is 200%.
• zoom - We can define initial or default zoom size from here.

Conclusion

By using this plugin you can implement zoom in / out functionality easily in your application. Hope this will help you. Let me know in the comments if you have any query. 

Thanks