lightboxよりJavaScriptと画像ロードの依存を少なくした、レスポンシブ対応で画像を拡大表示するjQueryのプラグインを紹介します。 デモページ:幅780pxで表示 SuperBoxの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="css/style.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/superbox.js"></script> Step 2:HTML まずは、基本構造です。HTML5のdata属性で拡大する画像を指定し、classに「superbox-im
ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」 2012年11月22日- Responsive Img - a jQuery Plugin for Responsive Images ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」 単に画像をリサイズするだけではなくsrcも置き換えてくれるそう。PC版を単に縮小するのではなくて、スマホでは別の画像を使う、といった場合にも使えそうですね ブラウザサイズに応じて別の画像に切り替えて最適化したいという場合はそれなりにあると思うので、覚えておいてもよさそうですね 関連エントリWEBデザインする人なら入れておきたいレスポンシブWEBサイト作成に役立つブックマークレット「Viewport Resizer」 レスポンシブ
2008/09/09 14:52 ※IE以外の方には関係ないエントリー。 かなりレアな状況だと思うのだけど、偶然遭遇したのでメモ。 IE6/7でjpg画像に対して「filter:alpha(opacity=n);」をあてると、 なぜかドット(ピクセル)抜けみたいな症状がでた。 どたなかの参考画像 ※IE限定のようなので、IE環境でないと確認できず。 最初jpgだしプロファイルかなーとおもっていたのだけど、どうもはっきりしない。 どうやら特定色(#02050a)のみが抜け落ちるらしい。 最初白い点がでる、と認識していたのだけど。。おもしろいのが、抜け落ちた箇所は透過してた。 つまり、透過JPGになる。 以下サンプル ■通常画像 フツー。 ■filter:alpha(opacity=50);としてみる。 アレ。上と同じ画像なのに。 ■かつ、背景色しいてみる。 透過JPG。。 なんだろコレ。
1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く