jQuery Panzoom 插件将图像定位在右侧,包含:'invert'

2024-03-27

我正在尝试使用jQuery 全景缩放 https://github.com/timmywil/jquery.panzoom插件,基本上都很好,除了......

我希望最初缩放大图像以适合容器,并且有contain: 'invert'已启用。我已经适应了这个例子 https://stackoverflow.com/a/27194032/250962首次加载时缩放和定位图像。

这工作得很好,图像位于(窗口大小)容器的中心。But如果我使用contain: 'invert'作为 Panzoom 选项,图像位于右侧。我不明白为什么。

您可以在这里看到它的实际效果:https://jsfiddle.net/7ugm9z51/2/ https://jsfiddle.net/7ugm9z51/2/

这是 HTML/CSS:

.zoom-container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

<div class="zoom-container">
  <img class="zoom-img" src="https://farm8.staticflickr.com/7314/15854478283_d2667a7264_o.jpg">
</div>

和 JavaScript:

$('.zoom-img').panzoom({
  // Causes image to appear aligned right:
  contain: 'invert',
});

// Get container dimensions
var container_height = $('.zoom-container').height();
var container_width = $('.zoom-container').width();

// Get image dimensions
var image_height = $('.zoom-img').height();
var image_width = $('.zoom-img').width();

// Calculate the center of image since origin is at x:50% y:50%
var image_center_left = image_width / 2.0;
var image_center_top = image_height / 2.0;

// Calculate scaling factor
var zoom_factor;

// Check to determine whether to stretch along width or height
if(image_height > image_width) {
    zoom_factor = container_height / image_height;
} else {
    zoom_factor = container_width / image_width;
};

// Zoom by zoom_factor
$('.zoom-img').panzoom('option', 'minScale', zoom_factor);
$('.zoom-img').panzoom('zoom', zoom_factor, {animate: false});

// Calculate new image dimensions after zoom
image_width = image_width * zoom_factor;
image_height = image_height * zoom_factor;

// Calculate offset of the image after zoom
var image_offset_left = image_center_left - (image_width / 2.0);
var image_offset_top = image_center_top - (image_height / 2.0);

// Calculate desired offset for image
var new_offset_left = (container_width - image_width) / 2.0;
var new_offset_top = (container_height - image_height) / 2.0;

// Pan to set desired offset for image
var pan_left = new_offset_left - image_offset_left;
var pan_top = new_offset_top - image_offset_top;

$('.zoom-img').panzoom('pan', pan_left, pan_top);

None

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery Panzoom 插件将图像定位在右侧,包含:'invert' 的相关文章

  • Chrome 内存/垃圾收集问题

    我在使用 Chrome 时遇到内存 垃圾收集问题 我正在开发一个照片上传网站 该网站允许我的客户使用 HTML5 和文件 API 拖放照片进行上传 因此这在 IE 中不起作用 它仅适用于 Chrome 和 FF 我还没有在 Safari O
  • Webpack 和 Angular HTML 图像加载

    我一直对 webpack 和 Angular 感到头疼 这可能有一个简单的答案 但我无法弄清楚 我已经阅读了堆栈溢出中关于这个主题的几乎所有答案 但都无济于事 我有一个像这样的 html 页面 还有其他包含图像的模板 img
  • 禁用整个站点的 IE8 加速器

    是的 我知道有类似的问题 https stackoverflow com questions 499565 is it possible to disable ie8 accelerators on my website在 SO 上 但它已
  • 如何删除从 javascript var 转义的反斜杠?

    我有这个变量 var x div class Which is div class 但是我需要 div class abcdef 我怎样才能 unes cape 这个变量来删除所有转义字符 您可以通过正则表达式将反斜杠后跟引号替换为仅引号
  • FormData 中的 Blob 为 null

    我正在尝试通过远程 API 通过 ajax 在 android 中发送创建的照片 我在用着相机图片背景 https github com an rahulpandey cordova plugin camerapicturebackgrou
  • 在 jQuery 中获取 CSS 规则的百分比值

    假设规则如下 largeField width 65 有没有办法以某种方式恢复 65 而不是像素值 Thanks EDIT 不幸的是 在我的例子中使用 DOM 方法是不可靠的 因为我有一个导入其他样式表的样式表 因此cssRules参数以以
  • 将数组中的所有元素相乘

    我在这里找不到我真正想要的例子 我想将所有数组元素相乘 因此如果数组包含 1 2 3 总和将为 123 6 到目前为止 我已经得到了这段代码 但它返回未定义 function multiply array var sum 1 for var
  • jQuery 价格滑块过滤器

    我已经创建了 jquery 价格滑块 但我不知道如何过滤我的结果 以便在滑动时您只能看到具有该值范围内的产品 HTML div class demo p p div
  • 全局未在 ../node_modules/socket.io-parser/is-buffer.js 中定义

    预先感谢您帮助我 我正在尝试在我的一个角度组件中连接套接字 但在浏览器的控制台中它会抛出一个错误 指出 Global 未在 Object node modules socket io parser is buffer js 中定义 这是我的
  • selenium-webdriver 与 webdriverjs 有什么区别(以及何时使用)?

    我是一位使用 selenium webdriver 的经验丰富的专业人士 我正在探索有关如何测试 javascript 应用程序的更多选项 我发现了 webdriverJs 不幸的是 我不明白这两者 2 之间有什么区别 有人可以解释一下何时
  • 在 jQuery 中绑定元素及其子元素

    我想将事件绑定到元素及其子元素 做这个的最好方式是什么 element bind click function event doSomething element bind click function event doSomething
  • javascript/jquery 禁用点击提交按钮,防止重复提交

    所以我的提交按钮如下所示 a href img src images user create product png border 0 a 当我双击它时 显然会双重提交 问题是 我将信息保存在数据库中 因此那里会有重复的信息 我不想那样 这
  • 如何仅突出显示嵌套表的最里面的表行?

    我有几个嵌套表 我想突出显示鼠标指针下方的最里面的行 我怎样才能做到这一点 一些提示 我使用嵌套表来显示递归表格数据 表可以嵌套 10 层 嵌套正如您所期望的那样 table tr td table tr td table tr td 可能
  • 获取 byte[]

    我有一个 html 画布 如下所示 output is a base64string of image data var oldImage new Image oldImage onload function var resizeRatio
  • 无法从 JSON 请求获取数据,尽管我知道它已返回

    我试图获取从 getJSON 返回的数据 但我无法让它工作 我已经在 search twitter API 上尝试了相同的代码 效果很好 但它不适用于其他网站 我知道数据已返回 因为我在使用检查器时可以找到它 我通过检查器找到的值是 id
  • ES6 Reflect API 的好处

    我一直在努力升级一些代码以使用 ES6 语法 我有以下代码行 delete this foo 我的 linter 提出了使用建议 Reflect deleteProperty this foo 您可以找到该方法的文档here https d
  • Morgan Logger + Express.js:写入文件并在控制台中显示

    我正在尝试将 Morgan 与 Express js 结合使用来编写日志文件 同时也在控制台上显示我的日志 我正在使用这段代码 var logger require morgan var accessLogStream fs createW
  • 如何从react-bootstrap复选框获取值/属性?

    我正在尝试使用反应引导复选框 https react bootstrap github io components html forms controls https react bootstrap github io components
  • 使用Jquery(或js)在html表格上循环遍历列的单元格(不是行的单元格)?

    使用 jQuery 循环遍历单元格或行很简单 但循环遍历列的单元格并不简单 for cells of rows I will do this table tr each function index elem loop through ce
  • 如何制作过期/签名视频嵌入网址

    我是新来的 正在学习网络开发等等 我只知道如何将我的视频嵌入网站中 任何菜鸟都可以轻松获得源代码 他们也可以嵌入它 但在许多网站中 视频 src 均使用重定向器链接进行编码 例如 它会在一段时间后过期 在本例中是一天 我了解到这是一个签名网

随机推荐

  • 根据水年创建日索引

    我正在处理水文数据 我需要水年 我已经根据之前在此论坛上发布的功能成功创建了一个水年专栏 我想要的是有一个陪伴water day范围从 1 365 闰年为 366 以匹配水年序列 请注意 水年是由其结束的日历年指定的 例如 2010水年从2
  • Linux IPC:共享内存回收

    我有两个进程 生产者和消费者 通过使用生成的共享内存段进行通信 old https stackoverflow com questions 21311080 linux shared memory shmget vs mmap接口而不是 m
  • 将 ENGINE 上下文附加到 SSL_CTX

    我想知道是否有可能附加一个ENGINE 实施到SSL CTX and or SSL 结构 我想要实现的是拥有一个SSL CTX 将使用 OpenSSL 中内置的默认加密操作和另一个设置SSL CTX 将使用专用 HSM 作为加密层 我可以通
  • Ext.data.Store getTotalCount() 加载后不计算

    我的商店在调用时并不总是返回正确数量的记录getTotalCount 这个问题出现在我之后load 商店 我知道在检查时商店里有记录 我正在使用 ExtJs 4 1 3 this grid reference to my grid var
  • Swift:使用未声明的类型

    我正在实现一个类 但出现此错误 使用未声明的类型 myProtocol 这是我的代码 class LocalContactService myProtocol 你们中有人知道为什么我会收到此错误吗 我遇到了同样的错误 在我的情况下 我意外地
  • shinyapps setAccountInfo 错误

    当我尝试配置我的shinyapps根据以下指南在 my shinyapps io 上注册帐户信息https github com rstudio shinyapps blob master guide guide md https gith
  • Excel VBA - 将图表保存为 GIF 文件

    编程不是我的主要工作职能 但似乎是我所认为的瑞士军刀 我的任务是在 Excel 中制作一个 VBA 宏 将图形导出到 gif 文件 以便自动更新我们制造工厂的信息屏幕 我有一个可以工作的宏 但是 它有时会失败并创建一个具有正确文件名但 空
  • 实体框架中实体之间的复杂关系

    也许它是重复的 但我找不到任何这样的主题 我正在使用实体框架 数据库中有两个表 public class A public virtual B B1 get set public virtual B B2 get set public cl
  • ORA-01722: 实体框架上的编号无效

    我正在从 Oracle DB 执行一个存储过程 即 PROCEDURE GET TIM USER CUSTO P ANOMES IN VARCHAR USER CUSTO OUT SYS REFCURSOR IS BEGIN OPEN US
  • 如何从特定的目标文件生成特定的二进制文件?

    这是我的 makefile 我在 obj 目录中有目标文件 我需要将它们编译成 bin 文件夹中的二进制文件 但不知何故它无法按我希望的方式工作 有什么想法吗 SOURCES wildcard c OBJECTS patsubst c o
  • 安卓用C++还是Java?

    我正在考虑在空闲时间学习 Android 开发 我发现 Java 和 C 都可以进行开发 但后者是有限的 我对 C 更加满意 所以我的问题是 Android 上的 C 存在哪些限制 我能够用它开发完整的应用程序吗 还是我最终必须学习 Jav
  • C 中数组的理想数据类型

    我想存储键和可变大小数组之间的静态关联 foo gt bar awe foo2 gt bar2 awe2 gruh 该数组在程序执行期间永远不会改变 它只是将字符串变量数组与字符串键静态关联的一种方法 子阵列的数量非常少 我怎样才能纯粹地做
  • 等待 .forEach() 完成的最佳方法

    有时我需要等待 forEach 方法来完成 主要是 加载器 功能 这就是我这样做的方式 q when array forEach function item iterate on something then function contin
  • Google 地图 v3 折线工具提示

    谷歌地图标记对象 google maps Marker 有一个 title 属性 因此当用户将鼠标移到标记上时 会显示一个简单的工具提示 折线 google maps Polyline 上没有标题属性 有没有办法可以在 V3 中做到这一点
  • 如何使用谷歌脚本打开位于谷歌驱动器文件夹中的Excel文件?

    我需要打开给定的谷歌驱动器文件夹中的 Excel 文件并读取其数据 为此 我使用了以下代码 var folders DriveApp getFoldersByName Test Folder var foldersnext folders
  • 结构或联合中的“unsigned temp:3”是什么意思? [复制]

    这个问题在这里已经有答案了 可能的重复 这段C 代码是什么意思 https stackoverflow com questions 1604968 what does this c code mean 我正在尝试使用 JNA 将 C 结构映
  • 根据两者的坐标选择某个位置的设备并对其进行计数

    通过使用 SQL 地理的 STContains 函数 可以计算一组坐标是否在一个区域内 https stackoverflow com questions 64453530 match location between coordinate
  • str.split() 返回的 Pandas 排序列表

    给定 str 类型的 Pandas Series 我想对 str split 返回的结果进行排序 例如 给定系列 s pd Series abc def ghi ghi abc 我想得到 s2 pd Series abc def ghi a
  • 如何监听 Flutter 中 platformBrightness 的变化?

    我正在设置一个系统 当用户将系统主题更改为深色模式时 它会更改主题 并且使用 Flutter 它运行得很好 但是 当用户更改系统主题时 系统导航和状态栏不会改变其颜色 我在构建方法内的主页上运行了代码 但这似乎没有做到这一点 这是主页构建方
  • jQuery Panzoom 插件将图像定位在右侧,包含:'invert'

    我正在尝试使用jQuery 全景缩放 https github com timmywil jquery panzoom插件 基本上都很好 除了 我希望最初缩放大图像以适合容器 并且有contain invert 已启用 我已经适应了这个例子