好きなサイズの画像サムネイルが生成できる「jQThumb」:phpspot開発日誌jQThumb by pakcheong 好きなサイズの画像サムネイルが生成できる「jQThumb」。 横長の画像などを正方形に切り抜いたりすることが出来るプラグインです。 画像縮小の為にサーバを介するのが現在では確実な方法ですが、正方形等別のサイズにトリミングするぐらいならこの方法でやればサーバ負荷が軽減できてよさそうですね。 関連エントリ Chromeのブックマークにサムネイルとタギングが可能になるChrome拡張「Dewey」
画像の親エレメントの背景を画像のカラーに合わせられるjQueryプラグイン「adaptive-backgrounds」:phpspot開発日誌
画像の親エレメントの背景を画像のカラーに合わせられるjQueryプラグイン「adaptive-backgrounds」 2013年12月25日- jquery.adaptive-backgrounds.js ? A jQuery plugin for extracting dominant colors from images and applying it to its parent 画像の親エレメントの背景を画像のカラーに合わせられるjQueryプラグイン「adaptive-backgrounds」。 画面サイズに合わせて画像を拡大縮小というのはよくありますが、画像の色を取って、その色を親要素の背景に合わせるというプラグインははじめてかも。 画像の背景色を画像と合わせることで統一感というか、違和感のない感じに仕上がるようです。動的にやれるのでCGM的なサイトなんかでも使えるのかも。 c
単体1KB以下で動作する遅延ローダーライブラリ「Echo.js」:phpspot開発日誌
Echo.js, simple JavaScript image lazy loading 単体1KB以下で動作する遅延ローダーライブラリ「Echo.js」。 スクロールがいってはじめて画像を読み込むライブラリ。jQueryなどに依存せず、軽量。 空の画像をsrcに設定しておきつつdata-echoでソースを指定するだけです。 読込中の画像にはローディングアニメーションもついてます 関連エントリ LazyLoadを実現する1KBを切るjQueryプラグイン「Unveil」
コンテナに画像をフィットさせられるjQueryプラグイン「imagefill.js」:phpspot開発日誌
imagefill.js | Project Page コンテナに画像をフィットさせられるjQueryプラグイン「imagefill.js」 HTMLの指定した位置に画像をフィルさせたい場合に使えます。 次のように、画像を特定サイズのブロックに適度に拡大させておさめられます。 それ用の画像を作る必要はもうなく、動的にフィットさせられるというのは便利でレスポンシブWEBデザインにも使えます 関連エントリ 製品画像等のズームが非常に簡単に行えるjQueryプラグイン「Image Zoom」 画像のカーソル位置を拡大できるjQueryプラグイン「mlens」 マウスホバーだけの簡単操作で画像をズームできて便利な「jQuery Zoom」
LazyLoadを実現する1KBを切るjQueryプラグイン「Unveil」:phpspot開発日誌
jQuery Unveil - A very lightweight plugin to lazy load images LazyLoadを実現する1KBを切るjQueryプラグイン「Unveil」 LazyLoadプラグインの余分な機能（エフェクト、イベント）を省いて軽量化したものです。 LazyLoadでページ表示速度をあげようとしてLazyLoadで遅くならないようにしたい場合に使えそう とにかく軽くしたい場合に検討してみてもよいプラグインですね 関連エントリ １ページ内で複数ページに分割できるjQueryプラグイン「windows」 レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 範囲指定が可能になるUI実装jQueryプラグイン「noUiSlider」 レスポンシブに加えスマホ用のメニュー実装もできる
エレメント上にラベルを付けるためのCSS「Label.css」:phpspot開発日誌
Label.css - Label every thing! エレメント上にラベルを付けるためのCSS「Label.css」 例えば画像なんかの好きな位置にかぶせる形で文字ラベルを付けたい場合にclassとdata-label属性を付与するだけで簡単に付けられます。 フェードアニメーション等のエフェクトも付けられるみたい CSS苦手という方は簡単に使えるので覚えておいてもよいかも 関連エントリ ピュアCSSでコンテンツスライダーを実装できる「Gallery CSS」 Flashみたいに美しいCSSテキストアニメーションデモ リアルタイムにCSSを編集してサーバに保存できる「bluePen」 グラデーション生成や角丸、ボックスシャドウをCSSで生成する際に使える「CSSmatic」 JavaScriptオフ、CSSをのみで動くツールチップライブラリ「hint.css」
顔にモザイクをかけたりできる画像プロキシ:phpspot開発日誌
Cloudinary - Blog - Automatic face-blurring in images made easy 顔にモザイクをかけたりできる画像プロキシ OpenCVを使うわけではなくて、指定サーバのURLの後に画像のURLを埋め込むだけという簡単仕様。 http://res.cloudinary.com/demo/image/fetch/e_pixelate_faces/http://〜画像のURL などと指定するだけで画像の顔の部分がモザイク化されます Cloudinary - Blog - Cloud-based API for applying effects on images 他にも色々なAPIがあるっぽい どんな言語でも簡単に扱える、このシンプルさはいいですね。
画像レイアウト関連で便利なjQueryプラグイン等まとめ:phpspot開発日誌
ちょっと画像レイアウト関連で便利なjQueryプラグインを調査仕事でまとめていたのでついでにご紹介。 この手のプラグインはjQuery Masonryが最初だったかと思いますが、色々と出てきたのでここら辺で全部しっておくとよいかも。 Wookmark 比較的新しめのPinterest風レイアウトを作る際に便利なプラグイン。 jQuery isotope レイアウトだけではなくダイナミックに要素をアニメーションさせることも出来るプラグイン 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 Google画像検索みたいに画像を綺麗にならべられます ↓↓↓↓ ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い 要素の整列系の初期のプラグイン。最初に見た時はあっと驚いたものです ↓↓↓↓ 並べた画像を敷き詰めて超カ
画像のプレースホルダを生成してくれるJSライブラリ「Holder.js」:phpspot開発日誌
Holder.js - client side image placeholders 画像のプレースホルダを生成してくれるJSライブラリ「Holder.js」 <img src="holder.js/300x200"> と書くとcanvasを使い、指定したサイズの画像をクライアントサイドで描画してもらえるというもの。 JSなのでサーバ不要でオフラインでも作業できます。 こうした画像をよく使う方は、いちいち作るのは面倒なので、JSコードで書いて画像化できたらなかなか便利ですね 関連エントリ HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 ブラウザ上でPDFを表示するJSライブラリ「PDF.js」
ダミー画像を超手軽に生成出来るWebサービス・PLACEHOLD.ITがやたら便利 - かちびと.net
昨日知ったWebサービスに久々に感激したので勢いでシェアします。Web制作で必ずと言っていいほど必用になるダミー画像を生成してくれるサービスなんですが、これが個人的にかなり便利でした。 PLACEHOLD.ITはダミー画像の生成サービスなんですが、凄く手軽に生成出来るのでかなりオススメです。 ダミー画像を生成する、というシンプルなサービスですが、これが想像以上に有用的でした。 使い方 使い方は至って簡単。placehold.itというドメインの後にサイズを指定すればいいだけ。 例えば350×150ピクセルの画像が欲しいなら http://placehold.it/350×150 にアクセスすれば指定したサイズの画像が表示されます。 なので、 <img src="http://placehold.it/350x150" /> これで以下のようにダミー画像を表示させる事ができます。 勿論、細か
並べた画像を敷き詰めて超カッコよくするjQueryサンプル:phpspot開発日誌
Automatic Image Montage with jQuery | Codrops 並べた画像を敷き詰めて超カッコよくするjQueryサンプル。 <img>を単に並べるだけであとはブラウザの幅に応じて画像を次のように並び替えてくれちゃうデモとスクリプトのダウンロードが可能です。 画像間の調整や背景色の調整等が行えるようです。 デモページはこちら ブラウザサイズを変更しても画像を再計算して表示しなおしてくれます。 背景を黒にするとよりオシャレな感じです。 関連エントリ 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」
画像を今風にプレロードするjQueryプラグイン:phpspot開発日誌
How to Create an Awesome Image Preloader | Nettuts 画像を今風にプレロードするjQueryプラグイン。 画像をプレロードするというと、new Image してsrc に指定とかCSSで見えないようにしてロード等いうのが昔は一般的でしたね。 紹介されている jQueryプラグインを使うことで、画像の表示位置にローディングアニメーションを付けつつ、画像が読み終わったらフェードインアニメーションで表示という、今風な感じでロードできるようです。 デモページ 画像を読み込んだ後のコールバック関数を指定することもできるので、更にこれから何かをしたいという場合にも便利。 関連エントリ 画像ギャラリーを作る際に便利に使えそうなjQueryの画像ギャラリー実装プラグイン37種 これはいい！iPadテーマのjQuery画像ギャラリー 画像にぼかし効果を与えられ
画像自体をBase64エンコードしてHTML内に埋め込んで高速化するPHPコード例:phpspot開発日誌
Base64 Encoding for Images. 画像自体をBase64エンコードしてHTML内に埋め込んで高速化するPHPコード例。 Googleがインスタントプレビューや画像検索で導入してその読み込み速度に驚いた方も多いかもしれません。 その手法をPHPで実現するコードが掲載されていましたのでご紹介。 PHPでやるにはそんなに難しいわけではなさそう。 <?php $img_src = "image/sample.png"; // 画像ファイルの指定 $imgbinary = fread(fopen($img_src, "r"), filesize($img_src)); // バイナリデータを読み込み $img_str = base64_encode($imgbinary); // base64エンコード echo '<img src="data:image/png;base6
IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」:phpspot開発日誌
IMGr :: jQuery Image Rounder IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」 $("imageElement").imgr(); と唱えるだけでクロスブラウザで画像の角を丸くすることが可能です。 $("imageElement").imgr( optoins ); でradiusやサイズ、色のカスタマイズが可能。 赤いボーダーで角丸の例 ボーダーを消した例 四方の角丸の操作も自由自在です。 IE 6, IE 7, IE 8, FF 3.6, Chrome 6.0, Safari 5.0, Opera 10.62 のブラウザ上でテストされているそうです。 関連エントリ CSSで角丸テクニック２５ 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」 CSS3で影付き角丸グラデーション付きのボタンを作成す
WEB上で画像のリサイズ/回転/切抜き等が可能になるPHPのオープンソース「PHP Image Editor」:phpspot開発日誌
Edit images directly in your CMS. Now as a plugin for Joomla 1.5. - Picture Editor, GD, PHP, Open Source, GPL WEB上で画像のリサイズ/回転/切抜き等が可能になるPHPのオープンソース「PHP Image Editor」が公開されています。 そのまま使ってもいいですし、CMSなんかの組み込み用に使ってもよさそう。Joomlaのプラグイン形式でも公開されています。 指定サイズにそのままリサイズする機能 左右に９０度回転する機能 範囲を選択して切り抜く機能 明るさとコントラストを調節する機能 デモを使ってみると結構便利でしたので試してみましょう。 関連エントリ オープンソースの便利PHPスクリプトまとめサイト「Open Source PHP」 オープンソースGoogleAnalytic
高解像度の画像のURLを入れるだけでGoogleマップみたいに拡大機能を付けられる「Zoom.it」:phpspot開発日誌
高解像度の画像のURLを入れるだけでGoogleマップみたいに拡大機能を付けられる「Zoom.it」 2010年08月11日- Zoom.it 高解像度の画像のURLを入れるだけでGoogleマップみたいに拡大機能を付けられる「Zoom.it」。 こういうものを実現するライブラリ等はありましたが、Zoom.itはサイトにURLを貼りつけて送信するだけで、インスタントに実現でき、更に自サイトに埋めこむことだって出来ます。 大きなサイズの画像をうまく指定のサイズに収めつつ、拡大もさせたいという場合にかなり使えそうです。 コントロールボタンが右下に表示されるのでここで拡大・縮小が可能 めいっぱい拡大してこんな感じ。本来の美しさは損なわれません。 使い方によっては非常に便利に使えそうですね。 以下に実際に埋め込んでみました。
PHPで画像をブラウザキャッシュさせるサンプルコード例:phpspot開発日誌
Image Caching With PHP at Jozef Chutka's blog PHPで画像をブラウザキャッシュさせるサンプルコード例が公開されています。 ブラウザキャッシュ用の Last-Modified、Cache-Control、Expires、ETag ヘッダーを発行してそれぞれハンドリングさせたサンプルです。 PHPで画像を転送するのは重い処理になりますが、こうしたヘッダーによる制御でサーバへの負荷を大きく下げられます。 そもそもPHPで画像を転送する事自体効率が悪いのですが、どうしてもPHPで動的に画像を出したいという場合において使えますね。 ここら辺のブラウザキャッシュに詳しくない方も学習用途に参考にできそうです。 コードをそのままコピペすると動くわけではなく、$this->time()とか、$this->filename()となっている部分においては若干書き換え
画像を斬新な形でカッコよく並べられるjQueryプラグイン「jSquares」:phpspot開発日誌
boedesign ? canadian based web developer eh Blog Archive jSquares for jQuery 画像を斬新な形でカッコよく並べられるjQueryプラグイン「jSquares」。 div で定義した画像のリストをキャプションと共に、次のようにサイズを変えつつ並べて表示してくれるのがこのプラグインです。 画像をメインにするサイトなんかで、ページのヘッダーなんかに置いておくとインパクトがあるだけでなく、画像ヘッドラインとしてわかりやすいナビゲーションが可能ですね。 カーソルを合わせるとキャプションと共にハイライトされます。 デモページでは同じ画像を並べてますが、別の画像を指定することも出来ます。 関連エントリ 画像ギャラリーを作る際に便利に使えそうなjQueryの画像ギャラリー実装プラグイン37種 半透明がいい感じのクールな写真ギャラリー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画像上にキャプションをアニメーション表示するCSSサンプル集:phpspot開発日誌
CSSのみで画像に違和感なく注釈を入れるサンプル:phpspot開発日誌