0在wordpress中悬停时显示放大的图像

作为最近对各种网站进行的改进的一部分，我想让画廊中的图像在悬停时显示放大版本. 用基本的做这个 CSS 相当简单, 但我不只是想扩展原始图像, 我想让浏览器抓取一个新的 (更大) 图也…

所有的图像都已经提供了一个完整的 src-set 所以我需要做的就是使用一点 jQuery (无论如何，它已经被wordpress加载了) 改变目标显示尺寸使浏览器拉出更大的图像. 好消息是 CSS 立即工作，因此您可以使用原始文件获得更大的图像, 然后随着更高分辨率的文件被加载，质量会在一瞬间提高.

该 CSS

该 CSS 我用的是如下. 我只是将它添加到我的主题的 style.css 中 (或者更确切地说是儿童主题——使用一个总是一个好主意)

dt.gallery-icon 一个 img.size-thumbnail:徘徊
{
转换: 规模(3.0);
}

注 (1) - 以上 CSS 仅适用于画廊图像. 不太可能有人希望为页面上任何位置显示的所有图像提供此功能, 但您可能希望它用于主要内容部分. 您需要检查您的主题如何构建它, 但在我的情况下，主要内容区域是一个“部分”，所以下面的代码可以完成这项工作

section.entry-content p a img.size-thumbnail:徘徊
{
转换: 规模(3.0);
}

注 (2) — 此代码仅适用于缩略图. 对于中等图像，您可以将“size-thumbnail”替换为“size-medium”, 和“size-large”大.

注 (3) — 因为我的缩略图是 120x80 像素，所以我想将它们增加到原始大小的 3 倍. 我已经有一个 wordpress 为我创建的 360×240 自定义图像大小，它包含在 src-set 中. 对于 hi-dpi 屏幕，我还有更大的图像尺寸 (e.g. 720×480). 在 wordpress 中创建额外的图像大小很容易——如果你需要这样做，网上有很多很好的指南.

如果您想缩放到 1.5 倍或 2.0 倍，只需更改 3.0 如预期的

jQuery

将以下内容添加到您的 (孩子) 主题的脚本文件 (假设它有一个). 如果没有, 创建你自己的, 并使用自定义函数将其“入队” (孩子) 主题的functions.php

jQuery(文档).准备(功能(){

  jQuery("dt.gallery-icon 一个 img.size-thumbnail").徘徊(功能(){
    jQuery(这).属性("尺寸","(最大宽度: 360PX) 100大众, 360PX");
    }, 功能(){
    jQuery(这).属性("尺寸","(最大宽度: 120PX) 100大众, 120PX");
  });

  //重复以上 5 此处为您要修改的每个不同图像尺寸的行

});

上面的代码适用于在任何带有画廊图标类的 dt 中找到的具有缩略图类的图像 - 换句话说 - 仅适用于 wordpress 内置画廊结构中的图像. 悬停时，最大宽度从 120 to 360 (增加 3 倍以匹配我的 CSS!), 然后函数的第二部分恢复原来的 120 悬停停止时的宽度.

与 CSS 以上, 您可以调整数字以更改图像放大的程度, 你可以改变 dt.gallery-icon a img.size-thumbnail 根据您要定位的图像来定位不同元素或类的部分.

入队你自己的脚本

如果您的主题没有脚本文件并且您需要将自己的加入队列，请将以下内容添加到您的 (孩子) 主题的functions.php (假设您调用了脚本文件 image-zoom.js 并将其保存在主题的根文件夹中)

wp_register_script( 'img-缩放', get_stylesheet_directory_uri() . '/图像缩放.js', 排列( 'jquery' ), '', true);
wp_enqueue_script( 'img-缩放' );

以上将注册您的脚本, 在页脚, 确保它放在 jquery 之后 (所以jquery在执行时应该已经可用)

添加图像大小

为了完整起见，这里是如何将自定义图像大小添加到 wordpress. 再次, 将此添加到您的 (孩子) 主题的functions.php

添加图像大小( '四分之一宽', 192, 144, 假 );

上面我添加了一个名为“四分之一宽度”的新图像大小，最大宽度为 192 像素，最大高度为 144 像素. 图像不会被裁剪 (因此最后是假的).

当您上传图像时，WordPress 现在将自动创建此大小的图像 (您将需要使用缩略图重建插件为已上传的图像重新创建缩略图).

虽然这个新的图像大小不会显示在编辑器中插入. 为了使其可用，还将以下代码添加到您的functions.php

函数 my_custom_image_sizes( $尺寸 ) {
    返回 array_merge( $尺寸, 排列(
        '四分之一宽度' => __('四分之一宽度'),
    ) );
}

尊重现有设置

你可能想做的另一件事 (确保响应式图像运行良好) 是创造更大的 (即. 高解析度) 尊重的缩略图大小 图形用户界面 是否裁剪缩略图. 要做到这一点，请使用下面的代码，正如您将看到的，从上面更基本的代码稍微修改了一下

添加图像大小( 'resp-thumb-2x', (获取选项( 'thumbnail_size_w' ) == 0 ? 0 : '240'), 160, 获取选项( 'thumbnail_crop' ) );

上面的代码检查 2 事情 - 首先它检查是否设置了裁剪选项, 如果是, 它反映了我们新的响应尺寸. 它还检查宽度是否设置为 0 (即. 没有最大值) 在这种情况下，我们的新图像也没有最大值. 我将新的图像大小称为“resp-thumb-2x”，因为它是缩略图的“响应式”副本，大小是原来的两倍 (用于具有两倍正常像素密度的 hi-dpi 屏幕). 我还创建了许多其他尺寸来制作相当完整的套装.

注意——由于我的原始缩略图是 120×80，我希望我的新缩略图是 240×160，所以这些是我指定的尺寸 (硬编码). 可以同时获得为原始缩略图指定的高度和宽度，并将两者相乘 2 使此功能完全通用, 但我在开发它的时候没有这样做，所以我会把它留给你去弄清楚!

最后一个提示

如果, 像我这样的, 您创建自己的全套新图像尺寸, 你可能不希望 wordpress 创建它自己的额外隐藏尺寸. 除了原图, 和缩略图, 媒介, 和大图, wordpress 还创建了一个“后缩略图”, 一个“大中型”, 一个 1536×1536 和一个 2048×2048. 这些在 2 不同的方式……

要删除 1536 and 2048 图像是直截了当的

remove_image_size( '1536x1536' ); //去除那个 1536 我们不需要它
remove_image_size( '2048x2048' ); //去除那个 2048 我们不需要它

post-thumb 和中大的稍微复杂一些

//移除内置的大中型
添加过滤器('intermediate_image_sizes', 功能($尺寸) {
    返回数组差异($尺寸, ['中大']);
});

//删除内置的后缩略图
添加过滤器('intermediate_image_sizes', 功能($尺寸) {
    返回数组差异($尺寸, ['后缩略图']);
});

请注意，删除后缩略图似乎有时会对编辑器中的图像库产生奇怪的影响.

最后一个注意事项

决定图像大小时 (对于更大的图像, 不那么缩略图) 理想情况下，您需要一个尺寸，使常见的纵横比图像始终可以很好地调整为. 出于这个原因，我推荐以下尺寸

请注意指定的宽度如何为所有生成整数高度 3 最常见的纵横比. 你不会得到像这样的宽度 150 或 200.

还要注意增加的模式. 跳 2 表中的行和大小加倍! 偶数行 (288,576,1152 and 1535) 也是之前尺寸的 1.5 倍，因此它们在使用 50% dpi 增加. 通过使用这组 7 对于大多数视口，你有很多可用的选项和一组很好的响应图像，wordpress 会自动添加到 src-set 中，因为它们将具有一致的纵横比，没有会导致质量损失或裁剪的分数.

目前对于缩略图，我倾向于允许无限宽度或我硬裁剪到固定 3:2 比例，所以我使用整数大小的缩略图，但我最终可能会调整我的主题，并通过设置 48px 和 96px 宽的选项来向后扩展上述系统 (请注意，这些之间没有价值 2 不幸的是，这会起作用——因为我使用 60px 宽的迷你缩略图，所以我没有选择向后扩展). 72px 对两者都适用 4:3 and 3:2 (和 64px 可以使用 4:3 and 16:9). 由于我的大部分图像都是在我的 dSLR 上拍摄的，因此这些图像通常是 3:2 (与传统35mm胶片的纵横比相同) 所以我也可以使用这个尺寸, 然后可以一直使用大尺寸, 但是较大的尺寸没有被裁剪而我的缩略图是 - 我很高兴更大的图像既是横向又是纵向, 但我希望缩略图通常是横向的，只适合我的设计, 所以这就是为什么我没有向后延伸. 希望随着越来越多的徽标可用 SVG的的, 还有一次 JPEG-XL 将于近期登陆浏览器, 很多问题都会得到解决.