Content Zoom Slider

https://aibolem.github.io/content-zoom-slider/example/content-zoom-slider-example.html

Jquery plugin to zoom in/out area in browser with slider.

Requirements

Jquery

bootstrap css (for best view)

Usage

You can refer my youtube video, in which i have explained full implementation. click here

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

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

2. Initialize plugin

<div id="content">
      Content area
</div>
<div class="zoom-tool-bar">

</div>

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

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>