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,

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