Medium.com style zoom for images

I'm trying to implement a Medium-like zoom feature on my website but I'm facing some problems.

First of all, I tried with a plugin called Zoom:

When I zoom in, the image is not centred, but instead, it has a bigger padding on top. See my Fiddle here .default-image {max-width: 100%; padding-top: 24px; padding-bottom: 24px; margin: 0px auto;}. What I want to achieve: keep the paddings like this when zoomed out, but remove all paddings when zoomed in.
When the image is zoomed and I start scrolling, the image gets zoomed out immediately. I'd like to change this a bit so that the image would only go back to its original state when I scroll more than 40px for example.

Then I also tried to use this plugin but I couldn't even make this work in the first place.

I downloaded the medium zoom package, added the medium-zoom.css to my css folder and the medium-zoom.js file to my js folder.
Added <link href="css/medium-zoom.css" rel="stylesheet"> to the html head.
Added <script src="js/medium-zoom.js"></script> to the bottom of the html file - above the </body>
Added an image with these specifications: <div class="image-container col-xs-12"> <img class="default-image medium-zoom-image" src="res/images/image-example.png" data-zoomable="true"> </div>
Cannot click on the image, so I guess I couldn't properly link the plugin to my image.

I'd appreciate any help.

Solution

I chose the second one because it seems more updated than the first one. Your problem is that you have also to initialize that plugin call, for example, this:

mediumZoom('.zoom-image', {
    margin: 24,
    background: '#ffffff',
    scrollOffset: 40 /* The number of pixels to scroll to close the zoom = > Your 40px */
})

The plugin have also another options that you can find in the documentation page (as you too could see): https://github.com/francoischalifour/medium-zoom

This is the code in action:

mediumZoom('.zoom-image', {
  margin: 24,
  background: '#ffffff',
  scrollOffset: 40
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/medium-zoom@1.0.2/dist/medium-zoom.min.js"></script>
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<div class="image-container col-xs-12">
<img class="zoom-image" src="http://fat.github.io/zoom.js/img/palm.jpg" width="200px" data-zoom-src="http://fat.github.io/zoom.js/img/palm.jpg" alt="My image">
</div>

<p class="label">Image label text</p>

<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>