在“之前和之后”wordpress插件中更改图像的初始宽度

Question

在我的网站（正在建设中），我使用的是“之前 - 之后MultiX Slider”。它工作正常，但我试图让所有分隔符在右侧（或左侧）“折叠”。

例如here

我试图使用CSS改变一些类的宽度如下：

.wmg-image.wmg-image-3.first.ui-resizable { width: 91.6379%!important; }

.wmg-image.wmg-image-2.ui-resizable { width: 95%!important; }

.wmg-image.wmg-image-1.ui-resizable { width: 98.3621%!important; }

如果我不t使用!important没有任何反应。如果我使用它，我得到我想要的 但滑块停止工作，图像不会通过滚动分隔符来调整大小。

有关如何实现这一点的任何想法？

Answer 1

我找不到任何失败，并深入了解问题......因此，我发布了第二个答案，因为问题的性质毕竟不同，代码正在工作，但并不像预期的那样原因如下：

如果加载脚本异步，页面在脚本仍在加载时将继续呈现，所以有可能其他没有异步脚本后来的脚本将比一些仍在查询中的异步脚本更早开始加载... 在这里，我们没有异步的，但它似乎即使即使async关键字不存在，虽然脚本将依次按顺序进入查询中，但服务器将依次加载3或4个脚本平行！

- >所以它发生较短的脚本可能完成之前较长的加载allthough他们开始后加载...

在我的研究，我无法找到这一问题的最终解决，因为看起来很难控制这个加载过程的细节！ （你可以在板上找到关于这种现象的一些话题...）

我将介绍一些不同的方法，你将不得不自己测试它们，因为我没有那个滑块PlugIn，所以我可以尝试：

解决方案1：

尝试使用“推迟”的关键字，这应该是这么说的“异步”的对面，导致页面被完全地解析之前未加载脚本，但可悲的是我不敢肯定是否可行，以前从来没有使用过它，它听起来就像是一样的使用‘的document.ready’，这是不是在这种情况下，工作... 重要的是，你必须在外部，否则插入脚本关键字将不会做任何事情，即：

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

解决方案2：

一个肯定工作的解决方案是增加我们的脚本作为回调到滑块脚本的电话，但我猜，这在这里没有合适的解决方案，因为您必须更改不安全的PlugIn代码！

解决方案3：

也许你可以用一个超时播放，以确保执行将稍后启动，但问题是，你不能真正知道这个超时必须有多长！ （即看看这里：https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout）

解决方法：

我想了一个办法来解决这个问题，但由于前面所说的代码是未经测试，也许尝试，并给我一个通知，当你有包括这个剧本，所以我可以看看它是如何工作的？

这样假设是添加了不与！重要语句的定位一类，然后在第一次点击删除，只是那么元素再次定位，而不！以后在每个重要的，当然进一步的点击定位将不会再操纵！

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代码结合一些事件，可能停止工作，我们的脚本...（请参考函数“stopPropagation（）”中的相关信息更多）。所以我最后的线索是直接绑定另一个事件，希望不是以这种方式由PlugIN操纵！至于我可以看到，这可能是 “的mouseenter” 或 “鼠标悬停” ...

所以只是改变

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

到

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

Answer 2

问题很简单...宽度是通过js内联设置的，所以这将覆盖您在您的css文件中所做的任何更改！

如果设置有！重要的语句，将工作的风格，但滑块脚本不能设置新的宽度了...

因此，所有的最简单的方法后，达到你想要的是插入一个小脚本，用于设置滑块脚本加载后的样式，所以也许在“wp_footer”调用之后的页脚底部，因为大多数插件都通过这个钩子输入它们的js，有点像这样：

<script> 
jQuery(function() { 
    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%"); 
}); 
</script> 

我无法测试它，但是我确信如果将脚本插入到正确的位置，这将起作用！ :)

编辑：我做了一个快速测试通过FF检查员的控制台，它按预期工作，但如上所述，如果滑块脚本将加载晚于此脚本它将无法工作！

Answer 3

您可以将此功能添加到您的functions.php，它将工作。我已使用@totatari的答案，并提出了插入它的正确方法。

function sr_custom_width_for_slides() 
{ 
    ?><script type="text/javascript"> 
     jQuery(document).ready(function() { 
      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%"); 
     }); 
    </script><?php 
} 
add_action('wp_footer', 'sr_custom_width_for_slides', 1000); // Giving lower priority ensures that your script will run at the end. 

希望它有帮助。