1

この質問は、次の質問のバリエーションです: Is it possible to recalculate the `srcset` image used if browser window is resized?

基本的に、私のサイトでは複数の画像を含む動的a.class imgスライダーを使用しています。ID ではなく、say でのみ画像をターゲットにできます。さらに、変更する a.class を持つ複数の img があります。

jQuery または通常の JavaScript を使用して、ブラウザー ウィンドウのサイズが変更されたときにブラウザーを新しい srcset に更新するにはどうすればよいですか? できれば、ウィンドウがいくつかのトリガーポイントを超えてサイズ変更された場合にのみ、これを実行したいと思います。たとえば、幅ポイント1170pxと1000pxです。

質問を別の言い方をすると、jQuery を使用して srcset をアート ディレクションのように機能させる方法はありますか? <picture>代わりに要素または代替を使用できません。

したがって、各画像は次のコードでラップされます。

<div class="carousuel-image slider-full">
<a href="/post-link">
<img srcset="http://test-site.com/wp-content/uploads/2015/12/collage_hk_day_3-216x160.jpg 216w, http://test-site.com/wp-content/uploads/2015/12/collage_hk_day_3-270x250.jpg 270w, http://test-site.com/wp-content/uploads/2015/12/collage_hk_day_3-570x350.jpg 570w, http://test-site.com/wp-content/uploads/2015/12/collage_hk_day_3-1024x1024.jpg 1024w, http://test-site.com/wp-content/uploads/2015/12/collage_hk_day_3-1170x500.jpg 1170w, http://test-site.com/wp-content/uploads/2015/12/collage_hk_day_3-1170x350.jpg 1170w, http://test-site.com/wp-content/uploads/2015/12/collage_hk_day_3-1200x500.jpg 1200w" sizes="(min-width: 1170px) 1200px, (min-width: 1170px) 1170px, (min-width: 1024px) 1170px, (min-width: 570px) 1024px, (min-width: 270px) 570px, (min-width: 216px) 270px, 216px" width="1200" height="500" class="attachment-slider-full tc-thumb-type-thumb wp-post-image wp-post-image v-centered" alt="test-site hk day 3" style="width: 1903px; height: auto; top: -146.5px; left: 0px;">
</a>
</div>

(このコードは複数の面で繰り返されます)

助けてくれてありがとう！

4

1 に答える 1

4

ウィンドウのサイズ変更イベント内でこのコードを使用できます。最初に、新しい画像の配列を宣言し、スライダーのすべての img src を置き換える必要があります。

/* defien an array with new image path*/
  newsrc[0] = image1 path;
  newsrc[2] = image2 path;
  newsrc[3] = image3 path;
  newsrc[4] = image4 path;
   /* find all images inside slider */
$('.carousuel-image').find('a.class').each(function(index, element) {       
        $(this).find('img').src('newsrc[index]') ;  
});

複数のスライダーの場合、上記のコードをスライダー ループでラップできます。

于 2016-01-12T06:05:17.047 に答える