在「之前和之後」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. 

希望它有幫助。