Medium.com 图像缩放样式

Question

我正在尝试在我的网站上实现 Medium-like 缩放功能，但我遇到了一些问题。

首先，我尝试使用一个名为 Zoom:

的插件

当我放大时，图像没有居中，而是顶部有更大的填充。参见 my Fiddle here .default-image {max-width: 100%; padding-top: 24px; padding-bottom: 24px; margin: 0px auto;}。我想要实现的目标：缩小时保持这样的填充，但放大时删除所有填充。
当图像被缩放并且我开始滚动时，图像立即被缩小。我想稍微改变一下，例如，当我滚动超过 40 像素时，图像只会回到原来的状态。

然后我也尝试使用 this plugin 但我什至无法首先完成这项工作。

我下载了中等缩放包，将 medium-zoom.css 添加到我的 css 文件夹，将 medium-zoom.js 文件添加到我的 js 文件夹。
已将 <link href="css/medium-zoom.css" rel="stylesheet"> 添加到 html 标题。
已将 <script src="js/medium-zoom.js"></script> 添加到 html 文件的底部 - 在 </body>
添加了具有以下规格的图像：<div class="image-container col-xs-12"> <img class="default-image medium-zoom-image" src="res/images/image-example.png" data-zoomable="true"> </div>
无法点击图片，所以我想我无法正确link我的图片的插件。

如有任何帮助，我将不胜感激。

Answer 1

我选择了第二个，因为它看起来比第一个更新。您的问题是您还必须初始化该插件调用，例如：

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

该插件还有其他选项，您可以在文档页面中找到它们（您也可以看到）：https://github.com/francoischalifour/medium-zoom

这是实际的代码：

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>

Medium.com 图像缩放样式

Medium.com style zoom for images

javascript

css

jquery

zooming