それでは良いWEBデザイン日和を!Have a nice WEBDESIGNDAY! 以前、「ボックスの高さをブラウザの高さに合わせるテク3つ!」というのを書きました。, 本当は今回の記事の内容まで一気に行きたかったのですが、長くなるので分けることにしました。 指定の要素を(画像、テキストにかかわらず)マウスのドラッグ操作でリサイズできるようにするResizableウィジェットの基本的な使い方を説明する。, jQuery UIは、jQueryを拡張するライブラリ(プラグイン)の一種で、名前のとおり、ユーザー・インターフェイス(UI)に関わる機能を提供します。jQuery UIの導入方法や使い方、jQuery UIが提供する主要なコンポーネントについては、「jQuery UI逆引きリファレンス: jQuery UIを利用するには?」を参照してください。, Resizableウィジェットを利用することで、指定の要素を(画像、テキストにかかわらず)マウスのドラッグ操作でリサイズできるようになります。, さっそく、具体的な例を見てみましょう。以下は、あらかじめ用意した画像をResizableウィジェットでリサイズ可能にするサンプルです。, リサイズ対象の要素に対してresizableメソッドを呼び出し、拡大/縮小機能を適用するだけです(1)。, ただし、そのままでは、「パネル・サイズがテキストの内容よりも小さくなった」場合に、テキストがパネルの外にあふれてしまいます。そこで、パネルのoverflowプロパティを「hidden」(=領域からあふれたコンテンツは隠す)としています。, resizableメソッドには、ハッシュ形式で以下のようなパラメーターを指定できます。, リサイズ可能な最大/最小の幅/高さを表します。指定のサイズを超えてリサイズすることはできません。minHeight/minWidthパラメーターのデフォルト値はいずれも「10」です(maxHeight/maxWidthパラメーターは無指定)。, containmentパラメーターを指定することで、特定の要素(セレクター)の範囲内でリサイズを制限することもできます。, animateEasingパラメーターは、「最初はゆっくり、だんだん速く」「跳ねるように」など、変化の程度を表す情報です。指定できる値については、Easingも併せて参照してください。, いずれも、リサイズする際の補助的な表示を制御するパラメーターです。まず、ghostパラメーターは、リサイズ時にリサイズ・イメージを半透明な状態でプレビュー表示します(デフォルトはfalse)。リサイズ後の状態を予測しやすくなりますので、特に画像のリサイズには便利です。, autoHideパラメーターは、リサイズのためのハンドラー(右隅の)を自動で隠すかどうかを表します(デフォルトはfalse)。true指定で、要素にマウスポインタをあてたタイミングでのみハンドラーを表示します。, そして、helperパラメーターは、リサイズ時に補助線(=ヘルパー)として表示する要素を表します。例えば、以下はリサイズ時に赤い点線枠を表示する例です。, リサイズ時の縦横比を表します。例えば、以下は幅:高さが3:2の比率を保ちながら拡大/縮小する例です。特に画像のリサイズ時によく利用します。, リサイズする際の単位を表します。例えば以下は、横100px、縦125pxの単位でリサイズする例です。もしも縦・横ともに20pxずつのような表現をするならば、単に「grid: 100」と指定します。, ※以下では、本稿の前後を合わせて5回分(第5回~第9回)のみ表示しています。 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。, 指定された要素配下の子要素群をドラッグ操作で並べ替え可能にするSortableウィジェットの基本的な使い方を説明する。, <button>、<input type=”radio”>、<input type=”checkbox”>、<input type=”submit”>、<a>といった要素を、一様にボタンに整形できるButtonウィジェットの基本的な使い方を説明する。, サブメニューの動的な展開が可能なメニューを生成できるMenuウィジェットの基本的な使い方を説明する。, タイトル部分をクリックすることでコンテンツが開閉するアコーディオン・パネルを実装できる「Accordionウィジェット」の基本的な使い方を説明する。, jQuery UIの導入方法や使い方、jQuery UIが提供する主要なコンポーネントについては、「jQuery UI逆引きリファレンス: jQuery UIを利用するには?」を参照してください。, 変化の程度(「http://api.jqueryui.com/easings/」より引用), "http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css", "http://code.jquery.com/jquery-1.10.2.min.js", "http://code.jquery.com/ui/1.10.3/jquery-ui.min.js", ONLINE SITE 最新情報: 人気記事ランキング Top 100 [5年間], C#による.NET Core入門(6): .NET CoreライブラリプロジェクトをパッケージングしてNuGetサーバーに発行する, ※JavaScriptライブラリのTIPS記事「書籍転載:JavaScriptライブラリ実践活用[厳選111]」はこちら, jQuery UI: Dialogウィジェットでダイアログ・ボックスを生成するには?, .NET Coreとは? 開発環境(SDKとVisual Studio Code)のインストール, jQuery: 要素の高さ/幅を設定/取得するには?(height/width/innerHeight/innerWidth/outerHeight/outerWidth), jQuery: id値/タグ名/クラス名で特定の要素を取り出すには? ― 基本セレクター, 機械学習 開発者のためのSlackチーム、作りました:「機械学習&AI」「クラウド&ビッグデータ」「IoTデバイス」のネット記事情報を共有中。. jQuery UI 1.11.1 jQuery本体 1.10.2. 画像の拡大・縮小と移動(パン)を実装するプラグイン「pan and zoom」を紹介します。 jQueryプラグイン「pan and zoom」 このプラグインを使えば、指定した画像の拡大や縮小を行うことができます。 ま […] Lightboxのアニメ効果がおもしろい!レスポンシブ画像ギャラリー「SuperBox」 Lightboxのアニ … jQuery UIに付属し利用できるアイコンは以下になります。 アイコンのサイズは16x16ピクセルで、1枚の画像にまとめられているためCSSスプライトで利用します。 「img」の部分を「video」タグに変更しただけです。, 関数、一見難しそうですが、よくよく確認するとそこまで難しいことはしていませんので、変数のログを出してみたりして、確認しながらやってもいいかと思います。私は他の人が作った理解しづらい関数などは、とことんログを出力して動きを確認しています。, ただ、関数の理屈はわからなくてもコピペで動きますのでそれで全然オッケーです(笑)。. なので、35行目,36行目でブラウザからはみ出した画像や動画の数値の半分を計算して、その分移動させてセンターに配置しています。, タイトルに「動画」もうたっておりますので、動画バージョンのサンプルもご確認ください。 画像の縦横比(アスペクト比)を保ったまま、サイズを変更したい。「印刷対応が必要な場合」「常にwindowサイズ-150pxで拡大表示したい場合」など、訳ありでとあるサイズにjsで拡大縮小する処理を紹介します。 下準備 jQueryと、自分で作ったjavascriptのファイル(今回は aspct.js 画像に「fitImg」クラスをつけました。こちらにjQueryで画面にフィットさせる処理をします。 CSS.fitImg{ position: absolute; } 画像の拡大や位置の指定はjQueryで設定しますので、画像のCSSはこの1行のみです。 jQuery jQuery UI逆引きリファレンス。指定の要素を(画像、テキストにかかわらず)マウスのドラッグ操作でリサイズできるようにするResizableウィジェットの基本的な使い方を説明する。 テキストや画像をフワッと出現させるfadeIn()やスーッと消したりするfadeOut()それらを交互に処理してくれるfadeToggle()を中心にご紹介します。. 「setBgImg(object)」の「object」に画像や動画を入れます。, 5,12行目 ロードが完了したタイミングと、ブラウザがリサイズされたタイミングで「setBgImg($('.fitImg'));」として関数を実行します。, 関数をざっくり説明すると、28行目の「fixScale」に幅と高さの拡大率の大きい方を入れます。これで画像の拡大が必ずブラウザのサイズより大きくなり、見切れることがなくなります。, これだけだと拡大はできますが、位置がセンターになりません。 ある程度サイズがある画像を拡大・縮小(ズーム表示)してみます。 1.使用した画像 横644px×縦828pxのjpg画像を使用してみました。 2.読み込むCSSファイルとCSSの記述例 以下は調整してみて下さい。 3.読込むJsファイルとJavaScriptの記述例 4.HTMLの記述例 「+」「 ボックスの幅をブラウザの幅にあわせるのは、親要素に幅を指定していなければ「width:100%」も必要ありません。親要素の幅に合わせて100%に勝手になります。問題は高さです。高さは内包している要素の高さになりますので、「height:100%」としただけではブラウザの... スクロールをセクションごとに制御するプラグイン「jQuery Scrollify」を詳しく解説!. ですので今回は、続編でブラウザの高さに合わせたボックス内で、画像や動画を全画面にフィットさせる方法をやっていきたいと思います。, これができれば、最近良く見るブラウザ全体にフィットした背景動画のサイトも作れます。, これが一番簡単な方法です。「background-size」プロパティで設定します。, たった2行ですので簡単ですね。ブラウザの幅や高さを色々変えても常に背景画像が見切れることなくフィットします。, しかし、動画はそもそも「background」プロパティで設定できません。画像も背景画像ではなく「img」タグで配置したい場合もあると思います。, そこで、jQueryで「background-size: cover;」と同じように画像や動画をフィットさせていきたいと思います。, CSSの「background-size: cover;」と表示のされ方は変わらないですが、画像は「img」タグで配置しています。, 画像に「fitImg」クラスをつけました。こちらにjQueryで画面にフィットさせる処理をします。, 画像の拡大や位置の指定はjQueryで設定しますので、画像のCSSはこの1行のみです。, 1,2行目 「ボックスの高さをブラウザの高さに合わせるテク3つ!」でやったとおり、高さをブラウザの高さに合わせています。, 簡単に説明すると画像や動画に「setBgImg」を使うだけです。