コンテナのサイズに合わせて画像をフィットさせるスクリプト・imagefill.js - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 コンテナのサイズに合わせて自動的に画像をフィットさせる、というスクリプトのご紹介です。jQueryに依存しています。RWDなんかと相性良さそうですね。 コンテナに合わせてフィットさせる、というもの。似たスクリプトは既存しますので選択肢の一つとして。 サイズに応じて自動でフィットさせます。 ↑ こんな感じ。 $('.foo').imageFill(); 基本的にはコンテナをセレクタとして指定するだけ。 <div class="foo"> <img src="bar.png"> </div> そのコンテナの中に画像を含めます。楽でいいですね。 ライセンスはMITとGPLのデュアルライセンスとなっています。詳細は以下にて。 imagefill.js
背景画像のレイアウトをブラウザ幅に合わせてくれるjQueryプラグイン「Wallpaper」 – bl6.jp
WallpaperというjQueryプラグインを使えば背景画像のレイアウトをブラウザ幅に合わせることができます。ブラウザ幅を縮小したり拡大することによって、そのサイズに最適化された配置に調整されるのでいろんなデバイスで見ることができますね。とても便利なので覚えておきたいプラグインです。 [ads_center] Wallpaperの使い方 このようにブラウザ幅のサイズによって背景画像のレイアウトが調整されます。 以下は縮小時。 使い方もシンプルですね。 $("#element").wallpaper({ source: "path/to/image.jpg" }); Wallpaper
画像hover時にテキスト等を表示するjQueryプラグイン – creamu
jQuery ContentHover Pluginは、画像hover時にテキスト等を表示するjQueryプラグインです。 補足情報をシンプルに見せる形として、省スペースで効果的ではないでしょうか。 アニメーションも気が利いていて、透過度などを変更することができます。 jQuery ContentHover Plugin
[JS]背景画像やスライドショーをブラウザいっぱいに表示するスクリプト -Vegas
写真画像をブラウザいっぱいに表示し、ウェブページにフル表示の背景画像やスライドショーを設置するjQueryのプラグインを紹介します。 ドットベースのオーバーレイ用の画像が数多く用意されているので、画像にスタイリッシュなエフェクトを加えることも簡単にできます。 デモページ サムネイルをクリックすると、写真画像が変更されます。 Vegasの実装 外部スクリプト 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="/vegas/jquery.vegas.js"></script> スタイルシート スタイルシートもあらかじめ用意されており、外部ファイルとして指定します。 <link rel="st
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
