wordpress - 更改 "before and after"WordPress 插件中的图像初始宽度

Question

在我的网站(正在 build 中)上，我使用“Before-After MultiX Slider”。它工作正常，但我试图让所有分隔符“折叠”在右侧(或左侧)。

例如here

我尝试使用 css 来更改某些类的宽度，如下所示:

.wmg-image.wmg-image-3.first.ui-可调整大小{ 宽度:91.6379%!重要； }

.wmg-image.wmg-image-2.ui-可调整大小{ 宽度:95%!重要； }

.wmg-image.wmg-image-1.ui-可调整大小{ 宽度:98.3621%!重要； }

如果我不使用!important，什么也不会发生。如果我使用它，我就会得到我想要的 但 slider 停止工作，并且图像不会通过滚动分隔符来调整大小。

知道如何实现这一目标吗？

Answer 1

我在那里找不到任何失败，并对问题进行了更深入的研究...因此我发布了第二个答案，因为问题的本质毕竟有所不同，代码可以工作，但不符合预期原因如下:

如果您异步加载脚本，页面将在脚本仍在加载时继续呈现，因此之后出现的其他非异步脚本可能会比仍在查询中的某些异步脚本更早开始加载... 这里我们没有异步的，但是即使不存在 async 关键字，脚本也会根据它们的顺序一个接一个地出现在查询中，但服务器将加载大约 3 或 4 个脚本平行线!

-> 因此，较短的脚本可能会先于较长的脚本完成加载，尽管它们稍后开始加载......

根据我的研究，我找不到该问题的明确解决方案，因为似乎很难详细控制该加载过程! (即，您可以在板上找到有关该现象的一些主题...)

我将介绍一些不同的方法，您必须自己测试它们，因为我没有那个 slider 插件，所以我可以尝试:

解决方案1:

尝试使用“defer”关键字，这应该与“async”相反，并导致在完全解析页面之前不加载脚本，但遗憾的是我不确定这是否有效，永远不会之前使用过它，听起来与使用“document.ready”相同，在这种情况下不起作用...... 重要的是，您必须在外部插入脚本，否则关键字将不会执行任何操作，即:

 <script src="demo_defer.js" defer></script> 

解决方案2:

一个可靠的解决方案是将我们的脚本添加为 slider 脚本调用的回调，但我想这在这里不是合适的解决方案，因为您必须更改更新不安全的插件代码!

解决方案3:

也许你可以设置一个超时来确保稍后开始执行，但问题是你无法真正知道这个超时必须有多长! (即看看这里:https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)

解决方法:

我想出了一种方法来解决这个问题，但正如之前所说，代码未经测试，也许可以尝试一下，并在包含此脚本时给我一个通知，这样我就可以看看它是如何工作的......

通过这种方式，假设添加了一个使用 !important 语句进行定位的类，然后在第一次单击时将其删除，然后元素在没有 !important 的情况下再次定位，当然之后的每一次单击点击定位不会再被操纵!

function sr_custom_width_for_slides() 
{ ?>
    <style type="text/css">
        .notClicked .wmg-image.wmg-image-3.first.ui-resizable {
            width: 91.6379% !important;
        }
        .notClicked .wmg-image.wmg-image-2 {
            width: 95% !important;
        }
        .notClicked .wmg-image.wmg-image-3 {
            width: 98.3621% !important;
        }
    </style>
    <script type="text/javascript">
        jQuery( document ).ready(function() {
            var firstClicked = false;

            jQuery(".wmg-before-after").addClass("notClicked");

            jQuery(".wmg-before-after").click(function() {
                if ( !firstClicked ) {
                    jQuery(".wmg-image.wmg-image-3.first.ui-resizable").css("width","91.6379%");
                    jQuery(".wmg-image.wmg-image-2.ui-resizable").css("width","95%");
                    jQuery(".wmg-image.wmg-image-1.ui-resizable").css("width","98.3621%");

                    jQuery(".wmg-before-after").removeClass("notClicked");

                    firstClicked = true;
                }
            });
        });
    </script>
<?php }
add_action( 'wp_footer', 'sr_custom_width_for_slides', 1000 ); 

编辑您的最后评论:

我再次检查了该网站，遗憾的是它根本不起作用，因为点击事件从未被触发!我猜想插件的 JS 代码绑定(bind)了一些事件，这些事件可能会阻止我们的脚本工作...(有关更多信息，请参阅函数“stopPropagation()”。)所以我最后的线索是简单地绑定(bind)另一个事件，希望不是由插件以这种方式操纵!据我所知，这可能是“mouseenter”或“mouseover”...

所以只要改变

jQuery(".wmg-before-after").click(function() {
                ...
            });

至

jQuery(".wmg-before-after").mouseover(function() {
                ...
            });