在管理中打开精品图片上传窗口时触发JS

时间:2015-09-17 作者:Dre

我正在尝试连接一些JS,以便在打开特色图像上传框并选择图像时,我可以使用Vibrant。js分析所选图像的颜色。我遇到的障碍是,我找不到任何特定的事件来绑定我的函数。我已经看过了关于wp.media() 对象,但它们似乎都涉及完全替换上载框。是否没有直接的方法来检测特征图像上载窗口何时打开以及所选缩略图预览图像何时加载?

2 个回复
最合适的回答,由SO网友:Dre 整理而成

经过一番挖掘,我发现了wp。媒体功能图像。frame()是我想要的:

wp.media.featuredImage.frame().on(\'open\',function() {
    // Clever JS here
});
然后我发现select 当您单击“设置特色图像”按钮时,事件将触发,而当您单击缩略图时,则不会触发,这正是我想要的。因此,打开模式窗口后,我将事件绑定到该窗口本身:

wp.media.featuredImage.frame().on(\'open\', function() {
    // Get the actual modal
    var modal = $(wp.media.featuredImage.frame().modal.el);
    // Do stuff when clicking on a thumbnail in the modal
    modal.on(\'click\', \'.attachment\', function() {
        // Stuff and thangs
    })
    // Trigger the click event on any thumbnails selected previously
    .find(\'attachment.selected\').trigger(\'click\');
});
最终的结果是,一旦特色图像模式打开,它将通过WP-JSON获取所选特色图像的未删减版本,通过Vibrant.js, 然后将这些作为颜色选择器添加到模式中。这让我们指定一种特定的颜色-从图像中提取-然后被主题用作该特定图像的覆盖。图片可以更好地解释这一点:

Colour extraction in the featured image uploader

如果有人感兴趣,我会抽出时间在博客上详细写下这篇文章

SO网友:soderlind

您还可以执行以下操作(它还将在常规媒体模式下启动):

jQuery(document).ready(function($){
    if (wp.media) {
        wp.media.view.Modal.prototype.on(\'open\', function() {
            console.log(\'media modal open\');
        });
    }
});
顺便说一句,我从Dekode

相关推荐

WooCommerce CSV图像URL在Media文件夹中创建其他图像

我通过媒体库拖放上传器上传所有图像,没有问题。每次我将CSV文件用于数千种产品时,我都会输入每个产品的图像url,该url位于媒体库中。示例:/wp content/uploads/2018/08/oa901-essence-1oz。jpg公司因此,产品页面使用添加了-1的图像,而不是原始图像,甚至是原始图像的缩略图。然后,当我下载所有产品时,图像url在图像文件名的末尾添加了-1。我不明白为什么会发生这种情况以及如何解决它。我尝试停用几乎所有的插件,甚至手动上传单个产品,但它仍然做同样的事情。我无法使用