no-image

JavaScript

ビューポートやコンテナ幅をベースに異なるサイズの画像を読み込める「jQuery Responsive Image Plugin」

jQuery Responsive Image Pluginは、ビューポートやコンテナ幅をベースに、サイズの異なる画像を読み込むことができるjQueryプラグインです。それぞれの環境に合わせた最適なサイズの画像を設定することが可能です。

jQuery Responsive Image Plugin

デモ

デモでは、ビューポートをベースにしたものやコンテナの幅をベースにしたものなどが用意されています。ブラウザ幅を縮小・拡大すると、それに合わせて読み込む(表示される)画像が切り替わるのを確認できるかと思います。

無駄に容量の大きい画像を読み込んだりしなくても済むので、画像をたくさん使ったサイトなんかにはとても最適な機能ですね。data-min-widthという属性を用いて、ブレイクポイントを設定できるようになっています。

オプションには、source、container、resizeEvent、minWidthDefault、maxWidthDefault、minDprDefault、attributes、preload、autoDpr、onGetWidth、onLoadSourcesが用意されているほか、イベントもいくつか設定できます。

というわけで、ビューポートやコンテナ幅をベースに異なるサイズの画像を読み込みたい人は、ぜひ「jQuery Responsive Image Plugin」を活用されてみてはいかがでしょうか?

no-imageチェックボックスをアニメーショントグルにする「jquery-simpletoggler」前のページ

カスタマイズしたコンテキストメニューを実装できる「jQuery contextMenu plugin & polyfill」次のページjQuery contextMenu plugin & polyfill

関連記事

  1. jQuery Pretty Dropdowns
  2. no-image

    JavaScript

    多彩な方向に表示できるツールチップ「jq-tooltip」

    jq-tooltipは多彩な方向に表示可能なツールチップを実装できるj…

  3. no-image

    JavaScript

    超シンプルでオプションもわかりやすいjQueryスライダー「Free Simple Slider」

    Free Simple Sliderは、超シンプルで使い方も簡単なスラ…

  4. jquery-base-slider
  5. PhotoJShop

    JavaScript

    写真にエフェクトやフィルタをかけることができるjQueryプラグイン「PhotoJShop」

    PhotoJShopというjQueryプラグインを使えば、写真にエフェ…

最近の記事

  1. フィールグッドシャワー
  2. RP-PB055
  3. ESD-EFシリーズ

アーカイブ

PAGE TOP