"前後の"ワードプレスプラグインでイメージの最初の幅を変更します。

Question

私のウェブサイト（構築中）に、 "Before-After MultiX Slider"を使用しています。うまくいきましたが、すべての区切り文字を右（または左）に「折りたたんだ」ようにしています。

.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; }

私はドン場合」：次のように私はいくつかのクラスの幅を変更するには、CSSを使用しようとしたhere

例えば

使用しないでください!important何も起こりません。私がそれを使用すると、私は欲しいものを手に入れます。 スライダが機能しなくなり、スクロールセパレータで画像のサイズが変更されません。

どのようにこれを達成するためのアイデアですか？

Answer 1

スクリプトを非同期に読み込むと、スクリプトが読み込まれている間もページがレンダリングされ続けるため、後で実行される他の非同期スクリプトがまだクエリ中に残っている非同期スクリプトより早く読み込まれる可能性があります... ここでは非同期のものはありませんが、asyncキーワードが存在しなくても同じように見えますが、スクリプトは順番に応じて次々とクエリに入ります3つまたは4つのスクリプトをパラレルにする！

- >だから、彼らは、後にロードするために始めましたallthough短いスクリプトが長いものの前にロードするために終了することができるということが起こる...

私の研究では、私はその問題について明確な解決策を見つけることができませんでした、なぜならそのロードプロセスを詳細に制御するのは非常に難しいようです。 （あなたは、ボード上のその現象に関するいくつかの話題をここで見つけることができます...）

私はそのスライダーを持っていないので、あなた自身でテストする必要があります。 ：

解決方法1：

てみは「延期」キーワードを使用するには、これは私が悲しげに、「非同期」の逆を言うと、ページがcompletly解析される前に、スクリプトがロードされていないことを引き起こすためにそうされるべきであるがそれが動作するかどうかわからない、前にそれを使用していないと、この場合に動作していない "document.ready"を使用するのと同じように聞こえる... 重要なことは、スクリプトを外部キーワードは、何もしませんすなわち：

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

解決方法2：

A確実にスライダースクリプトの呼び出しにコールバックとして私たちのスクリプトを追加することであろう解決策を働いたが、私はこのことを推測します更新安全ではないプラグインコードを変更する必要があるため、ここでは適切な解決法はありません！

解決策3：

はたぶん、あなたは実行後に開始されることを確認するタイムアウトと遊ぶことができますが、問題は、あなたが本当にこのタイムアウトがなければなりませんどのくらい知ることができないということです！ （つまり、ここを見て：https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout）

回避策：私はその問題を回避する方法を思いついた、しかしとしてのコードがテストされていない前に、多分それを試してみて、あなたが持っているとき、私に通知した

このスクリプトが含まれているので、どのように動作するか見てみることができます...

このように、！important-statementを使って位置付けを行うクラスが追加され、最初のクリックで削除される要素は重要ではなく、後でそれをクリックするたびに位置決めが再び操作されることはありません！ YOUR LAST COMMENTに関する

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); 

EDIT：

クリックイベントが発生されることはありませんので、私は再びサイトをチェックして、私の場合、それは悲しいことに、まったく動作しません！私は、プラグインのJSコードが、おそらく私たちのスクリプトが動作しなくなるようなイベントをバインドしていると思います...（もっと詳しくは関数stopPropagation（）を参照してください）。その方法でPlugINによって操作される！私の知る限り、これは "MouseEnterイベント" または "マウスオーバー" 可能性が見ることができるように...

だから

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

Answer 2

問題は幅がJSを経由して、インライン設定されている...非常に簡単ですので、これはあなたのCSSファイルで行った変更を上書きします！あなたが望むものを達成するためのすべての最も簡単な方法は、にした後

あなたは！重要な文でのスタイルを設定した場合、それは動作しますが、スライダーのスクリプトはそう...もう

を新しい幅を設定することはできませんスライダスクリプトがロードされた後のスタイルを設定する小さなスクリプトを挿入してください。ほとんどのプラグインがこのフックを使ってjsを入力するので、おそらく "wp_footer"コールの後のページのフッタの一番下にあります。

<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> 

私はそれをテストすることはできませんが、スクリプトが正しい位置に挿入された場合、私は、これが動作することをかなり確信しています！ :)

EDIT：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. 

希望します。

私はそこに何らかの不具合を見つけて、問題に少し深く掘っ...予想通り、問題の本質は、コードが動作していないが、結局何とか異なっているので、したがって、私は、第二の答えを投稿することができません