问题标签 [elevatezoom]

快速介绍：我使用 jQuery.elevateZoom-3.0.8 来显示放大的图片。

1. SRC 属性是较小/正常图像的路径

2. DATA-ZOOM-IMAGE 属性是指向更大图像的路径，用作缩放。

HTML 代码如下：

现在我想在用户按下按钮时改变图像。较小的图像会改变（SRC 属性），但较大的图像不会刷新（数据缩放图像属性），即使我用 jQuery 更改它。

问题是：如何在 elevateZoom.js 中更新自定义属性“data-zoom-image”的状态，以便它在DOM 上更新？

https://i.stack.imgur.com/hFvG7.png => 无需点击

https://i.stack.imgur.com/r0tUw.png => 更改时

Codepen 示例： https ://codepen.io/kenanbalija/pen/MojOEp

我正在尝试制作一个包含 90 张图片的画廊，并且每张图片都必须有一组按钮：（i）打开一个包含详细图片的 fancybox 画廊；(ii) 用大图打开一个花式框；(ii) 激活/停用提升缩放。我认为提升缩放动作/取消动作可能在带有大图像的幻想框内，但我也无法管理。激活/停用 elevatezoom 正在工作，然后坏了，图库按钮显示所有带有 rel="gallery" 的图像，这是正确的，但不是我想要的。我不知道如何为不同的按钮制作不同的画廊，以及如何将全屏按钮定位到特定的图像。

小提琴

我正在使用 jsf 在 Java 中开发 Web 应用程序，我添加了以下插件http://www.elevateweb.co.uk/image-zoom/examples 用于缩放图像。但是在加载页面时，查看页面浏览器时显示如下错误

代码

更新

我把断点放在关闭$ (document) .ready (function () { }); 但断点停在$ ("# img_01"). ElevateZoom ({easing: true});

我在一个网站上使用elevateZoom Plus 。我有一个图像库，我正在尝试销毁我的 elevatezoom 实例，以便我可以更改主图像并打开一个新图像。文档不是很好，所以我使用了这段代码，我在 GitHub 问题的答案中找到了它：

但我收到以下错误：

未捕获的类型错误：plugin.destroy 不是函数。所以我猜想 destroy() 方法不是正确的方法，但我发现的所有信息都表明这是可以使用的。

我正在尝试在 Spree 电子商务商店上实现提升缩放。到目前为止，缩放适用于主图像，但是当产品具有多个图像时，我无法使缩放采用选定的缩略图。我已经尝试过他们页面上的示例，但是他们使用的画廊非常简单，而且我的缩略图有点不同，因为它们在轮播中。

这是我的产品 show.html.erb 中的代码

<div id="main-image" class="mainImage">

</div>

在文件的末尾我有 javascript

<script type="text/javascript">

</script>

在我的 product.js.coffee 上，我添加了一行来修改主图像的“data-zoom-image”属性，它可以工作

...

thumbnails.find('li').on 'mouseenter', (event) ->

...

但是提升缩放脚本无法识别这种变化。

任何想法将不胜感激！

我正在使用 Magento 1.9.2.4 附带的 fancybox (2.15) 和 elevatezoom (3.0.8) 来缩放主图像并使用画廊的其他图像创建一个 fancybox 画廊。单击主图像时会打开 Fancybox。

我需要的是在fancybox打开时使用缩略图助手来导航缩略图，但问题是我无法以最简单和建议的方式初始化它，比如

$(selector).fancybox({config});

而且我使用的方式对fancybox的外观没有影响。

这是我正在使用的代码

js

.gallery-image.visible主图像在哪里.thumb-link，我的 Html 中的缩略图在哪里。

使用fancybox设置高度和宽度来关注像这样的其他问题

但实际上我在fancybox上看不到效果。

在有效调用它之前是否有不同的方法来重新初始化fancybox配置？

编辑： 实际上我以这种方式更改了我的代码：

我可以看到一些效果，但没有拇指痕迹....我包含并可以看到fancybox thumbnails helper 的正确库。

一个 Jquery 图像缩放插件

我elevate-zoom在我的 Angular 5 应用程序中使用 jquery 插件，但它显示错误

错误类型错误：this.elevatezoomBig.nativeElement.elevateZoom 不是函数

这是我的代码

我在我的应用程序中使用 ElevateZoom 插件。如果图像分辨率很好，它可以缩放，但是当图像分辨率很小时，它就不起作用了。这是代码：

描述.jsp

其中 zoom-image、actual-src data-zoom-image 都具有相同的图像。

应用程序.js

插件：提升缩放

在具有缩放效果 (elevatezoom) 的滑块 (flexslider) 上工作；滑块使用缩略图作为滑块的导航。问题在于变焦镜头的显示。

我花了一段时间来缩小问题的范围：如果 flexslider 动画设置为“滑动”，变焦镜头会正确显示，但如果动画设置为“淡入淡出”，它仍然隐藏在图像后面。

我尝试了一堆不同的 z-index 测试，甚至更改了活动图像的 elevatezoom 文件中的 z-index 代码，但随后显示了错误的图像。

我找到了一个 codepen 并将其分叉以显示问题 - https://codepen.io/anon/pen/jpdOop

现在#slider 的动画设置为滑动并且变焦镜头可见。但如果动画未显示或设置为“淡出”，则变焦镜头会消失在图像后面。

除了 z-index 之外还有什么可能导致这种情况的吗？任何关于在哪里寻找的想法，我很乐意将这些想法写下来，只是出于对原因的想法。

谢谢

HTML

CSS

JS

我正在为我的 Wordpress 网站使用 elevatezoom。即使我已经正确设置了所有内容，甚至它在 body 标记末尾附近呈现了一些 html。当我检查元素时，我看到它正在工作，但不确定为什么当我悬停图像时没有放大图像或任何显示。它甚至工作了 1 次，但现在我不知道为什么它不起作用。任何人都可以帮我检测这个网址：

http://www.alanwaaronline.com/portfolio/ring-code-163195/

该图像是从左边算起的第一个图像，它渲染的元素几乎是 zoomContainer 类的 body 的末尾。

非常感谢。