GoogleMapみたいに画像をズーム＆グリグリ移動できるjQueryプラグイン「Mapbox」:phpspot開発日誌
GoogleMapみたいに画像をズーム＆グリグリ移動できるjQueryプラグイン「Mapbox」 2009年12月01日- GoogleMapみたいに画像をズーム＆グリグリ移動できるjQueryプラグイン「Mapbox」。 自分で実装するとなるとかなり骨が折れそうなこの機能もjQueryプラグインで簡単に実装できるみたいです。 マウスホイールでズームし、ドラッグして地図移動が可能 ズームとか移動のコントローラーを付けることも可能で、これなら初心者にも簡単に気付いてもらえますね。 設置はjQueryを使うので、マークアップでズーム用に画像を数枚置いておき、$("#viewport").mapbox({mousewheel: true}); のように初期化するだけでOKです。 オプションも多数あるのでカスタマイズも出来ます。 ズーム前後に実行できるイベントハンドラも設定可能なので、柔軟性が高い
高解像度画像ビューワーの例（その4）：Closr.it｜ウェブユーザビリティ向上を支援するWebsite Usability Info
高解像度画像は、サイトが扱っている内容によっては、ユーザーからの強い閲覧ニーズがあることを、コラム記事「高解像度画像を閲覧できるようにする」で述べました。これを受けて、高解像度画像を閲覧するためのアプリケーション（ビューワー）、特に無料で気軽に使えるものをご紹介したいと思います。今回採り上げるのは、「Closr.it」です。 Closr.itは、ズームイン/ズームアウト機能付きの高解像度画像をWebページに埋め込むことができるアプリケーションです。正確に言うとClosr.itは画像共有サイトで、自分の持っている画像をClosr.itにアップロードすると、自動的にFlashベースのズームイン/ズームアウト機能が付加されたUI（ユーザーインターフェース）が生成され、そのUIを自分のサイトに埋め込むことができる、というものです（しかも無料で）。下記にサンプルを用意してみました。 UIの機能は、最
高解像度画像ビューワーの例（その3）：Google Maps Image Cutter｜ウェブユーザビリティ向上を支援するWebsite Usability Info
高解像度画像は、サイトが扱っている内容によっては、ユーザーからの強い閲覧ニーズがあることを、コラム記事「高解像度画像を閲覧できるようにする」で述べました。これを受けて、高解像度画像を閲覧するためのアプリケーション（ビューワー）、特に無料で気軽に使えるものをご紹介したいと思います。今回採り上げるのは、「Google Maps Image Cutter」です。 Google Maps Image Cutterは、GoogleマップのUI（ユーザーインターフェース）を使って、オリジナルの画像をズームイン/ズームアウト表示することができるツールです。開発元であるUCL（University College London）のサイトから、作成ツールをダウンロードできます。 実際に作成ツールを使って、オリジナル画像をGoogleマップUIで表示できるようにトライしてみました（下記は、その画面キャプチャー
高解像度画像を閲覧できるようにする｜ウェブユーザビリティ向上を支援するWebsite Usability Info
皆さんのWebサイト（ホームページ）において、高解像度画像を見たいというユーザーニーズ/ユースケースがあるかどうか、検討されたことはありますでしょうか？高解像度画像とは、簡単に言うと「きめ細かな質で、大きな面積の画像」ですが、以下のようなシチュエーションで、ユーザーは高解像度画像を見たいと思うのではないでしょうか。 サイトで採り上げている商品（モノ）の質感を見たいとき（素材、仕上げ、細部のデザインのこだわり、など）。 サイトで採り上げている商品（モノ）の具体的な機能や使い勝手、仕様などを見たいとき（操作パネルのレイアウトデザイン、操作子の形状、接続端子、など）。 高解像度画像を用意することができて、それがターゲットユーザーの興味/関心に合致する可能性があるのであれば、積極的にWebサイト（ホームページ）上に公開すべきでしょう。私自身の、ユーザーテストを実施したときの経験を振り返ってみても、
ウェブデザインにおける、ライトとシャドウの効果的な5つの使い方
ウェブデザインにおける、ライトとシャドウの効果的な5つの使い方をSmashing Magazineから紹介します。 5 Simple Tricks To Bring Light and Shadow Into Your Designs 以下、その意訳です。 ライトとシャドウというのは単にそこにあるだけではありません。ライトは対象物を射し、シャドウを生み出します。 形や大きさ、質感を伝え、目にする対象物の理解を深めます。 ウェブデザインでもこのライトとシャドウは非常に重要で、デザインをよりナチュラルにし、感動的で直感的なものにします。 ここに、ライトとシャドウの洗練された5つの使い方を紹介します。 A Quick Anatomy Of Light And Shadow ライトとシャドウの構造 下の図は、ライトが左からあたっています。ハイライトはそのライトが一番強くあたっている箇所です。そして
嫌がらせとしか思えない解読困難な画像認証いろいろ - GIGAZINE
ネットサービスに登録するときや忘れたパスワードを回復するときなどにIDとパスワード以外に、画面に表示されている文字を入力して人間かそうでないかを認証する「画像認証（captcha）」というものを見かけることがありますが、非常に解読するのが困難で「ログインさせる気がないだろ！」と突っ込みたくなるような画像認証があるようです。 日本でもGmailの画像認証は文字が読み取りづらく読解困難と言われていますが、世界にはGmail以上にログインするのが困難なものがあるみたいです。 画像は以下より。 何を書いているのかわかりにくい。Gmailはこれに似ています。 文字がありすぎて、どれを入力すればいいのか分かりません。 ネコの絵が描かれている文字を入力するようですが、文字に隠れてどれがネコかわかりにくい。 難解な計算式。ログインする気を無くしてしまいます。 微分を使った計算式。 右の図面を組み立てるとど
RedLine Magazine : jQuery Cycle Plugin を使ってみました
jQuery Cycle Plugin を使ってみました 少し前にSBMなんかでよく見かけたjQuery Cycle Plugin、かっちょいいからいつか使いたいなーと思ってたんですが、タイミングよく機会があったので使ってみました。 jQuery Cycle Plugin って何? jsライブラリ「jQuery」のプラグインで、これを使うといろんな種類のエフェクトを使って画像のギャラリーが簡単に作れるという物です。エフェクトというと、なんとなく「script.aculo.us」を連想したりもするんですが、とりあえずサイトでjQuery使ってるし、その流れでjQuery Cycle Pluginを使ってみようということになりました。いろんな動きがあるので、まだ見たことない方は一度jQuery Cycle Pluginでデモを見たらいいかも、です。 設置方法も簡単だった で、さっそく準備。jQ
秋元@サイボウズラボ・プログラマー・ブログ: lightboxライブラリ37個の比較表
写真などをページ上で強調表示する、いわゆるlightbox効果を実現するJavascript+CSSライブラリを37個も集めて、ライブラリサイズやそれぞれの機能、どのJavascriptライブラリを使っているかなどで絞り込めるようにした比較表が発表されている。 このようなUI系のライブラリを使う際には、自分が普段使っているベースライブラリとの親和性などが重要だと思うので、このような形でまとまっているとdel.icio.usで”lightbox”タグで絞り込む、といった調べ方よりも楽にライブラリが選べていい。 via del.icio.us/popular この記事は移転前の古いURLで公開された時のものですブックマークが新旧で分散している場合があります。移転前は現在とは文体が違い「である」調です。(参考)記事の内容が古くて役に立たなくなっている、という場合にはコメントやツイッターでご指摘い
[JS]高いカスタマイズ性を備えたLightbox風のスクリプト -nyroModal
nyroModalは、アニメーションを伴って表示・非表示される、高いカスタマイズ性を備えたモーダルウインドウを生成するスクリプトです。 nyroModal デモページ nyroModalが生成するウインドウには、テキストなどのコンテンツをはじめ、複数の画像を使用したギャラリーや動画、AJAXコンテンツやフォームなどを表示することができます。 また、デフォルトのままでも気持ちよく表示・非表示されるアニメーション、背景、ウインドウなどをカスタマイズすることも可能です。 nyroModalはjQueryのプラグインのため、動作にはjquery.jsが必要です。
iTunesのカバーフロー風ＵＩをJavaScriptで実現「ProtoFlow」:phpspot開発日誌
ProtoFlow first preview release… :: Deensoft I got busy with few other client work and didn’t really get any chance to polish up the ProtoFlow widget. iTunesのカバーフロー風ＵＩをJavaScriptで実現「ProtoFlow」。 まずはデモページを見てみましょう HTMLは次のようにシンプル <div id="protoflow"> <img src="imgs/DSCN0940_91360.jpg"/> <img src="imgs/stimme_von_oben_187192.jpg"/> <img src="imgs/Tropfen_1_Kopie_201721.jpg"/> <img src="imgs/farbraum_01
jQueryで画像のズームイン/アウトをしてみた [Javascript,jQuery] - BlurBlue-Note
jQueryベースの画像ズームイン/アウトのプラグインなんていくらでもあるけれど、自分の思うように動くものやしっくりくるものがなかったので作ってみました。 何事も挑戦あるのみ。 画像を大サイズと小サイズ（サムネイル用）の2枚用意します。 ※widthとheightを2倍に設定しているため、大サイズは小サイズの丁度2倍の大きさにする必要があります。 class名を"zoom"と設定したサムネイルをクリックすると起動します。 サムネイルの上に大サイズの画像をサムネイルと同じサイズ指定で表示し、アニメーションさせながら元のサイズまで戻す、という動きをします。 大きくなった画像をクリックすると逆戻りをした後削除されます。 ズームのサンプル 1枚の画像がそのまま大きくなっているように見えるけれど、実際は2枚使っているという。 今回は自サイト用に作っているので、大サイズ画像の縦横は800*600に固定
複数のライブラリに対応したLightboxスクリプト -Shadowbox.js
Shadowbox.jsは、Prototype、jQuery、YUI、Extなど複数のJavaScriptのライブラリに対応した、画像や動画などを拡大表示できるLightbox風のスクリプトです。 Shadowbox.js Media Viewer デモ ダウンロード Shadowbox.jsは複数のライブラリに対応しているというだけでもすごいですが、画像や動画の拡大表示にもさまざまなオプションがあり、多数あるLightbox風スクリプトの中でも充実した機能を持っていると思います。 下記に主な特徴を挙げます。 拡大する際のコードは、簡易です。 <a href="image.jpg" rel="shadowbox">Image</a> 併用するJavaScriptのライブラリは、下記の中から好きなものを選べます。 jQuery Prototype + Scriptaculous YUI Ex
ウノウラボ Unoh Labs: 画像の遅延読み込み
yamaokaです。 webページの表示を高速化する手法にはいろいろありますが、 その一つとして遅延読み込みという手法があります。 初期状態で表示する必要のない要素については読み込まず、 必要になったタイミングで読み込み、表示するようにする手法です。 ページの読み込みにかかる時間の大半を 画像の読み込みが占めている場合が多いので、 画像の読み込みを遅延させるという手法が多く取られます。 検討するべきケース では、画像の遅延読み込みはどのような場合に検討されるべきでしょうか。 最初から表示されている必要がない画像が存在し、その画像のサイズが大きかったり、 そうした画像の数が多い場合は検討してみる価値があると思います。 例えば、次のようなケースです。 初期状態では表示されないブロックに属する画像が存在し、 JavaScriptで表示するかしないかを切り替えているような場合 ページのずーっと下の
これはかっこいいぞ・・・スライドショーに激しく使えるjQuery用プラグイン『jQuery Cycle Plugin』 | i d e a * i d e a
ドットインストール代表のライフハックブログ
滑らかで操作性のよいフォトスライダー実装JSライブラリ「Photo Slider」:phpspot開発日誌
Photo Slider Tutorial 滑らかで操作性のよいフォトスライダー実装JSライブラリ「Photo Slider」。 PhotoSliderを使って、次のようなフォトスライダーを作れます。 (クリックでサンプルを表示) 写真の一覧部分が小気味よくアニメーションしてくれるも特徴。 デフォルトでは若干デザイン性が良くありませんが、ＣＳＳデザインなのでよりカッコよくカスタマイズして利用することもできそうですね。 関連エントリ 超絶クールなMacスタイル写真ギャラリー「PhotoFlip」 Flashを使った超高機能クールフォトギャラリー「dfGallery」 スライドショーが可能なイメージギャラリー作成ライブラリまとめ AJAX＆PHPでクールなイメージギャラリーを実装できる「PhotoFolder」
ドラッグ＆ドロップで画像を切抜くJavaScriptライブラリ「jsCropperUI」
イメージ切り抜きのためのインタフェースを提供するJavaScriptライブラリで、prototype.jsやscript.aculo.usを使っています。 写真上をマウスカーソルでドラッグすると枠が破線で作成され、囲んだ領域の座標とサイズを取得し、トリミングすることができます。カーソルキーによる移動にも対応しているので微調整も可能、実にすごい。 詳細は以下の通り。 ダウンロードは以下から。 DEfusion.org.uk >> JavaScript Image Cropper UI, using Prototype & script.aculo.us デモは以下から。実際にドラッグして切り抜きを体験できます。 DEfusion.org.uk >> Demo >> Prototype JavaScript Image Cropper UI 操作感覚が通常のアプリケーションとほとんど差異がない
いまどきのデスクトップ処理系 steps to phantasien t(2006-09-22)
いまどきのデスクトップは色々モダンになっている. ただモダン化は API の裏側で進んでいるため, あまり興味を持たれていないらしい. 一見いろいろウォッチしていそうな知り合いと話していてわかった. 利用者視点の話題では, いまどきのデスクトップというとたとえばウィンドウが ヘナヘナ揺れるといったアイ・キャンディばかりが連想される. でもそのアイ・キャンディに至るにはきっと山ほど苦労があったはず. そのへんをちょっとねぎらってみたい. 念頭にあるのは Windows Vista, Mac OSX, XGL あたり. まず共通の階層化されたアーキテクチャを想定し, ケーススタディを交えつつその層を下から上へ順にたどっていきます. 復習: デスクトップ処理系の階層構造 そもそもデスクトップの中味はどんな構成をとっているのか. ざっと眺めておこう. 典型的なデスクトップ処理系のアーキテクチャはだ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
情報をわかりやすく視覚化したインフォグラフィックス集