2017-12-06 8 views
0

問題と比較することにより、クラスを追加します。私のWordPressサイトでjQueryのwordpressのポストイメージ画像幅

を、私はポストの内側のimg要素を対象とするいくつかの負のマージンCSSを適用しました。私のCSSは、655px +幅(.contentコンテンツコンテナの全幅)を持つすべての画像に対して完全に機能します。

しかし、幅が655px未満の画像は、残念ながら.entry-contentコンテナの左側に引き寄せられているため、中央揃えができません。

これを無効にするには、655px以下のすべての '.entry-content p img'要素にカスタムクラスを挿入するjQueryスクリプトが必要です。

説明するためのスクリーンショットを添付:添付ファイル

を見つけてくださいここでは、この問題を見ることができますポストです:https://vegbyte.com/best-apples-for-juicing

だからjQueryのロジックは基本的には次のとおりです。「イメージが広い未満655pxの場合は、これを挿入クラス:エントリ-IMG-小さな」

は、私はワードプレスでjqueryのを使用する方法のアイデアを持っている

をしようとしました。私はjqueryで空白ですが、そのようなコードで考えていますが、何をすべきかわかりません。

$(window).load(function() { 
    var image = $('.each img'); 
    if (image.width() < 500) { 
     $('.oldclass').addClass('newclass'); 
    } 
}); 

Please check screenshot

答えて

0

その場合は良いアイデア必ずしかし、ここであなたもコンテンツ領域のために、この優れた制限を行っていません。 jQueryので.content img

jQuery(window).on('load', function() { 
    jQuery('img').each(function() { 
     if(jQuery(this).width() < 655) { 
      jQuery(this).addClass('entry-img-small'); 
     } 
    }); 
}); 

あなたがイメージのロード前に準備ができて、ドキュメント上でそれを使用して、width属性を確認する場合、私はより良いと思います。

jQuery(document).ready(function($) { 
    $('img').each(function() { 
     if($(this).attr('width') < 655) { 
      $(this).addClass('entry-img-small'); 
     } 
    }); 
}); 
関連する問題