在“之前和之后”wordpress插件中更改图像的初始宽度
在我的网站(正在建设中),我使用的是“之前 - 之后MultiX Slider”。它工作正常,但我试图让所有分隔符在右侧(或左侧)“折叠”。在“之前和之后”wordpress插件中更改图像的初始宽度
例如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
没有任何反应。如果我使用它,我得到我想要的 但滑块停止工作,图像不会通过滚动分隔符来调整大小。
有关如何实现这一点的任何想法?
我找不到任何失败,并深入了解问题......因此,我发布了第二个答案,因为问题的性质毕竟不同,代码正在工作,但并不像预期的那样原因如下:
如果加载脚本异步,页面在脚本仍在加载时将继续呈现,所以有可能其他没有异步脚本后来的脚本将比一些仍在查询中的异步脚本更早开始加载... 在这里,我们没有异步的,但它似乎即使即使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() {
...
});
问题很简单...宽度是通过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检查员的控制台,它按预期工作,但如上所述,如果滑块脚本将加载晚于此脚本它将无法工作!
谢谢@ToTaTaRi。不幸的是,它看起来像滑块脚本在页脚之后加载,因为它不起作用。 – Marco
如果将它添加到子主题function.php中,它应该足够了......其他脚本必须在页脚中加载,因为它看起来当您看到Inspektor中的代码时......可能问题是他们被加载异步,所以加载进度可能会先开始,但最后结束!您是否检查过插入脚本的天气和正确的位置,或者是否存在任何错误?我不能立即检查,因为即时在线只是在我的手机在瞬间... – ToTaTaRi
我已经将它添加到Child Theme的function.php文件中,但它不起作用。代码处于正确的位置:https://snag.gy/3IqBwM.jpg – Marco
您可以将此功能添加到您的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.
希望它有帮助。
谢谢@shazyriver。我已经插入了您在functions.php文件中提供的代码。但它也不起作用。 – Marco
@Marco尝试增加100到1000 – shazyriver
我编辑了我的答案。请使用这个@Marco – shazyriver
Hi @ ToTaTaRi。首先,让我感谢你的兴趣和努力。我试过这段代码,和前一段一样,脚本就在那里,但没有工作。 我也试过解决方案1(与外部脚本),但它也不工作。 这件事让我很生气。我会尽快尝试解决方案3。 – Marco
我真的很抱歉,最后的代码似乎有效,但有一个愚蠢的SYNTAX ERROR,请删除类名前的点 - >“.notClicked”必须是“notClicked”!我更改了上面的代码... :) – ToTaTaRi
感谢@ToTaTaRi!这终于奏效了!这只是一个“小问题”。因为只要加载图像,滑块不起作用。我必须点击一个分隔符(第二个或最后一个),稍等一会才能正常工作。有没有办法避免这种情况? – Marco