Entries
写真イラストの表示をきめたよ
うちの近所のボス猫は、ちゃんとパトロールをしています。
近所の人に話をきくと、猫を飼っている家庭の庭には必ず立ち寄るらしい。
家から出ない猫もいるのに、なんで漏れなく猫の家を知っているのか不思議です。
サイト作りは未だデザインのところから進みませんが、
あとちょっとでとりあえず材料は揃うかなあ・・・というところまで来ました。
コンテンツの主になるものが、写真やイラストになると思うので
どうやって展示していこうかなあと考えていました。
写真とかはサイズが大きいから、そのままの大きさで表示させるのはちょっと、と思うし、
イラストなんかは気まぐれで描くから、大きさもばらばら。
並べたらさぞかしバランスが悪かろうなあと思います。
かといってサムネイルにして全部新しいウィンドウで開くのも、あまり好みじゃない。
同ウィンドウで開いても、絵や写真を見終わった時に、ついウィンドウを閉じてしまう
事が自分に多いので、なんかそれも落ち着かない。
どうしようかと思っていた時、こちらを発見。
今あちこちでみかけますね。
これを使おうと思っています。今から楽しみです。
LightboxJS
つーかジャバスクリプトとか書けちゃう人ってすごいと思う。
超かっこいい
↑たまに貼ってみる・・・
16件のコメント
[C188]
- 2008-03-16
- 編集
[C189] ひろっとさん
こんばんは！
猫が来るとどうも嬉しいですよね。
窓際に来てたなんていいなー
そのまま捕獲したい
ｌightbox、設置も簡単そうですよね。
早く使いたいなー
猫が来るとどうも嬉しいですよね。
窓際に来てたなんていいなー
そのまま捕獲したい
ｌightbox、設置も簡単そうですよね。
早く使いたいなー
- 2008-03-17
- 編集
[C190] 画像の表示あれこれ
ひろこさん、こんばんわ。WEBデザイン見本帳のしげるです。
ちょうど画像の表示について書かれていたので、お節介かもしれませんがプチ情報を(笑)
(私も表示方法で迷ったので)
------------------------------------------------------------
◆ThickBox
http://www.openspc2.org/JavaScript/Ajax/ref/ThickBox/ver2.1/index.html（紹介）
LightBoxのように開くときのエフェクトがない分サクサク開きます。グループ化で
一回一回閉じずに次の画像を見ることもできます。(LightBoxも出来るかも？)
うちのサイトも挙動が速いのでこれを使ってます。
私はこのサイトで初めて見て感動しました。
http://www.smashbros.com/jp/characters/mario.html
------------------------------------------------------------
◆FancyZoom
http://gigazine.net/index.php?/news/comments/20080208_fancyzoom/（紹介）
http://www.cabel.name/2008/02/fancyzoom-10.html(サンプル：ページ中央)
これはなんとスムーズに画像が拡大します。結構感動したのですがブラウザによって
挙動が違います。
NS→綺麗にズーム・速い、FireFox→綺麗にズーム・ややゆっくり、
IE→ややカクカク・遅い
という感じなので断念しました(笑)
------------------------------------------------------------
それではサイトの完成楽しみにしております。
ちょうど画像の表示について書かれていたので、お節介かもしれませんがプチ情報を(笑)
(私も表示方法で迷ったので)
------------------------------------------------------------
◆ThickBox
http://www.openspc2.org/JavaScript/Ajax/ref/ThickBox/ver2.1/index.html（紹介）
LightBoxのように開くときのエフェクトがない分サクサク開きます。グループ化で
一回一回閉じずに次の画像を見ることもできます。(LightBoxも出来るかも？)
うちのサイトも挙動が速いのでこれを使ってます。
私はこのサイトで初めて見て感動しました。
http://www.smashbros.com/jp/characters/mario.html
------------------------------------------------------------
◆FancyZoom
http://gigazine.net/index.php?/news/comments/20080208_fancyzoom/（紹介）
http://www.cabel.name/2008/02/fancyzoom-10.html(サンプル：ページ中央)
これはなんとスムーズに画像が拡大します。結構感動したのですがブラウザによって
挙動が違います。
NS→綺麗にズーム・速い、FireFox→綺麗にズーム・ややゆっくり、
IE→ややカクカク・遅い
という感じなので断念しました(笑)
------------------------------------------------------------
それではサイトの完成楽しみにしております。
- 2008-03-17
- 編集
[C191] しげるさん
しげるさん、こんにちは！
わー、かっこいい画像表示の仕方、他にもあったんですね！
びっくりしました。
今見てきたのですが、やはり大事なのはかっこよさもですが、サクサクと見れるのが大事ですよね。
ThickBox、紹介ページからのリンクを辿って、画像をグループとして表示するのを見てきました。
これいいですね！
設置の仕方も、紹介ページの方で日本語で解説されてて心強いし、
どれ使おうか迷います！
今ちょっと揺れています＾＾；
どれを使おう・・・
ズームしてくるのもすごかったですね！
半透明の画像がふわーっと出てきた時は
感動でした。
こんな事まで出来るんですね。
ブラウザごとの違いがなければ、ここぞという絵や写真で使いたかったかも＾＾
たくさん教えて下さってありがとうございます！
しげるさんのサイトの方へ、よくお邪魔しているのですが、
トップにいる帽子がずれてくるアヒルがかわいいですね！
あれはしげるさんが作っているのですか？
気に入ってしまいよく見に行ってます＾＾
サイト作りもがんばります＾＾
わー、かっこいい画像表示の仕方、他にもあったんですね！
びっくりしました。
今見てきたのですが、やはり大事なのはかっこよさもですが、サクサクと見れるのが大事ですよね。
ThickBox、紹介ページからのリンクを辿って、画像をグループとして表示するのを見てきました。
これいいですね！
設置の仕方も、紹介ページの方で日本語で解説されてて心強いし、
どれ使おうか迷います！
今ちょっと揺れています＾＾；
どれを使おう・・・
ズームしてくるのもすごかったですね！
半透明の画像がふわーっと出てきた時は
感動でした。
こんな事まで出来るんですね。
ブラウザごとの違いがなければ、ここぞという絵や写真で使いたかったかも＾＾
たくさん教えて下さってありがとうございます！
しげるさんのサイトの方へ、よくお邪魔しているのですが、
トップにいる帽子がずれてくるアヒルがかわいいですね！
あれはしげるさんが作っているのですか？
気に入ってしまいよく見に行ってます＾＾
サイト作りもがんばります＾＾
- 2008-03-17
- 編集
[C192] ビローン
ひろこさん、こんにちは。
当初、私もうちのブログの作業手順などの画像を、
マウスをのっけたときに大きく表示させる形にしようと思ったんですが、
これって表示が重くなったりしないのかしら？
もともと大きい画像を、小さく表示しておいて、
おんざまうす！したときに、
JavaScriptで、ビローンと元のサイズで表示させるのですよね。
evolbirdさんのところで見ると、それほど重かったりしないですね。
んー、どうして重くならないんだろう？？？
当初、私もうちのブログの作業手順などの画像を、
マウスをのっけたときに大きく表示させる形にしようと思ったんですが、
これって表示が重くなったりしないのかしら？
もともと大きい画像を、小さく表示しておいて、
おんざまうす！したときに、
JavaScriptで、ビローンと元のサイズで表示させるのですよね。
evolbirdさんのところで見ると、それほど重かったりしないですね。
んー、どうして重くならないんだろう？？？
- 2008-03-17
- 編集
[C193] KumaCrow さん
KumaCrow さん、こんにちは！
表示は全然重くないですよね。
使ってる画像の大きさによるのかな。
CGIはよくわからないけど、あれは確かサーバー側にプログラムがあって、
それを通してブラウザに表示される、て感じなのでしょうか。
ジャバスクリプトは、それがなく、
cssとかと同じくテキストとしてhtmlの中に書かれてるし、
cssを読み込むのと同じく、ブラウザ上で実行されるプログラムだから？
だから割とサクサクいくのかな・・・。
自信がないので壁に隠れつつ。
|ω・｀)
|彡 ｻｯ
|ω・｀) ﾁﾗｯ
表示は全然重くないですよね。
使ってる画像の大きさによるのかな。
CGIはよくわからないけど、あれは確かサーバー側にプログラムがあって、
それを通してブラウザに表示される、て感じなのでしょうか。
ジャバスクリプトは、それがなく、
cssとかと同じくテキストとしてhtmlの中に書かれてるし、
cssを読み込むのと同じく、ブラウザ上で実行されるプログラムだから？
だから割とサクサクいくのかな・・・。
自信がないので壁に隠れつつ。
|ω・｀)
|彡 ｻｯ
|ω・｀) ﾁﾗｯ
- 2008-03-17
- 編集
[C194] ドーン
ひろこさん、こんにちは。
たしかに、プログラムの動作について言えば、
いちいち、サーバの側にお伺いをたてなくて良いので、
JavaScriptの方が速い場合もあると思います。
昨今、パソコンの性能も高いし、
サーバはアクセスが多い分、遅くなる可能性もあるものね。
それで、今回の画像の場合は、
画像（のデータ）を、エッサホイサと転送することが、
最も時間がかかるわけですから、
プログラムが、サーバサイドでも、ローカルでも、
あまり変わらないんじゃないかしら？と思うんですよね。
段階的に、タスクが切られて処理されているのかしら。
一度にドーンと持ってこないで、必要な表示状態の分だけ、
データを転送して、あとはバックグラウンドで、
知らないうちに転送しているとか・・・。
うーん。
どうも、検索エンジンでひっかけるキーワードが悪いのか、
それらしい情報が、いつも見つからないのよねぇ。(´Д｀)
たしかに、プログラムの動作について言えば、
いちいち、サーバの側にお伺いをたてなくて良いので、
JavaScriptの方が速い場合もあると思います。
昨今、パソコンの性能も高いし、
サーバはアクセスが多い分、遅くなる可能性もあるものね。
それで、今回の画像の場合は、
画像（のデータ）を、エッサホイサと転送することが、
最も時間がかかるわけですから、
プログラムが、サーバサイドでも、ローカルでも、
あまり変わらないんじゃないかしら？と思うんですよね。
段階的に、タスクが切られて処理されているのかしら。
一度にドーンと持ってこないで、必要な表示状態の分だけ、
データを転送して、あとはバックグラウンドで、
知らないうちに転送しているとか・・・。
うーん。
どうも、検索エンジンでひっかけるキーワードが悪いのか、
それらしい情報が、いつも見つからないのよねぇ。(´Д｀)
- 2008-03-17
- 編集
[C195] こんばんは！
ｌightbox！写真がかっこよく表示されてるやつですよね！
ThickBox （マリオのとこ）見させてもらいました＾＾
こちら動作が速いかもですね。
ひろこさんのサイト完成が待ち遠しいです
今日もイラスト可愛い！
猫ってパトロールするんですね＾＾
ThickBox （マリオのとこ）見させてもらいました＾＾
こちら動作が速いかもですね。
ひろこさんのサイト完成が待ち遠しいです
今日もイラスト可愛い！
猫ってパトロールするんですね＾＾
- 2008-03-17
- 編集
[C196] 画像の表示あれこれ part2
ひろこさん、こんばんわ。
>しげるさんのサイトの方へ、よくお邪魔しているのですが、
>トップにいる帽子がずれてくるアヒルがかわいいですね！
>あれはしげるさんが作っているのですか？
>気に入ってしまいよく見に行ってます＾＾
褒めて頂きありがとうございます(笑)あれは私が
イラストレーターで書いたGIFアニメです。ちなみに額縁は写真素材使ってます。
ちなみにアヒルにしたのは映画「ベイブ」からきています。
サイトのコンセプトが、「アメリ」＋「ベイブ」÷2なので。一応。
達成率はかなり低いですが・・。
------------------------------------------------------------
画像表示の件ですが、こんなのもありました↓
◆『galleria』
http://www.ideaxidea.com/archives/2008/03/jquerygalleria.html
http://www.monc.se/galleria/demo/demo_01.htm#img/sea-mist.jpg（デモ）
------------------------------------------------------------
↑私のブラウザは超マイナリティー、ネスケ派なのですが、
ネスケでは正しく動作しません(泣)
>しげるさんのサイトの方へ、よくお邪魔しているのですが、
>トップにいる帽子がずれてくるアヒルがかわいいですね！
>あれはしげるさんが作っているのですか？
>気に入ってしまいよく見に行ってます＾＾
褒めて頂きありがとうございます(笑)あれは私が
イラストレーターで書いたGIFアニメです。ちなみに額縁は写真素材使ってます。
ちなみにアヒルにしたのは映画「ベイブ」からきています。
サイトのコンセプトが、「アメリ」＋「ベイブ」÷2なので。一応。
達成率はかなり低いですが・・。
------------------------------------------------------------
画像表示の件ですが、こんなのもありました↓
◆『galleria』
http://www.ideaxidea.com/archives/2008/03/jquerygalleria.html
http://www.monc.se/galleria/demo/demo_01.htm#img/sea-mist.jpg（デモ）
------------------------------------------------------------
↑私のブラウザは超マイナリティー、ネスケ派なのですが、
ネスケでは正しく動作しません(泣)
- 2008-03-17
- 編集
[C197] KumaCrowさん
( ・∀・)ﾉボーン
うーんそうか
サーバーのプログラムかブラウザのプログラムかは
それは今のパソコンだとあんま差はないか・・・
どういう仕組みでまったくサクサクと
あんなかっこいい動作が出来るのかは、やはりわからぬです。
調べてみたんだけど、わかんなかった（ﾟ´ω`ﾟ）ｹﾞｿｰ
でも、さすがに極端な話、画面いっぱいの画像だったりすると
おそらく重くなる気がします。
普通の画像だったら、まあ重くなったりもせずにサクサクいけるのかな。
ブラウザごとにもスピードに違いは出るかもしれないですね。
うーんそうか
サーバーのプログラムかブラウザのプログラムかは
それは今のパソコンだとあんま差はないか・・・
どういう仕組みでまったくサクサクと
あんなかっこいい動作が出来るのかは、やはりわからぬです。
調べてみたんだけど、わかんなかった（ﾟ´ω`ﾟ）ｹﾞｿｰ
でも、さすがに極端な話、画面いっぱいの画像だったりすると
おそらく重くなる気がします。
普通の画像だったら、まあ重くなったりもせずにサクサクいけるのかな。
ブラウザごとにもスピードに違いは出るかもしれないですね。
- 2008-03-17
- 編集
[C198] いちまるごさん
こんばんは！
ですね、自分のパソコンでもThickBoxがバッと出てバババッって感じです。
エフェクトついてるのとついてないのの差かな？
自分的には、バババッの方が好みかも！
猫はパトロールします。
よそ者のオス猫とかが入ってきてないか
多分チェックしてるのと、
あと、猫に挨拶して回ってんのかな？
うちの裏庭には、実は猫のお墓があるのですが、
そのボス猫、そこでボーッと座ってたりするので
お墓参りまでするみたいです＾＾；
ありがたいことです。
ですね、自分のパソコンでもThickBoxがバッと出てバババッって感じです。
エフェクトついてるのとついてないのの差かな？
自分的には、バババッの方が好みかも！
猫はパトロールします。
よそ者のオス猫とかが入ってきてないか
多分チェックしてるのと、
あと、猫に挨拶して回ってんのかな？
うちの裏庭には、実は猫のお墓があるのですが、
そのボス猫、そこでボーッと座ってたりするので
お墓参りまでするみたいです＾＾；
ありがたいことです。
- 2008-03-17
- 編集
[C199] しげるさん
こんばんは！
galleria、見に行ってきました！
かっこいいですねー！
というか、画像表示のかっこいい方法が、こんなにたくさんあったなんて
本当に驚きです。
galleria、かっこいいなあ・・・
マウスを下のサムネイルにあてると、ほわんと明るくなるのがまた・・・
ほんとうだ、ネスケだとうまくいきませんね。
残念
ああいうのは、フラッシュでしか出来ないと思っていましたが、
ジャバスクリプトで出来るんですね。
これも驚きです！
教えて下さってありがとうございます＾＾
なるほど！
サイトは、アメリとベイブなんですね！
本とかの背景はアメリっぽいし、どことなく漂うのどかな感じはベイブですね。
動く額縁の動物が不思議なのもアメリぽい。
動くgifいいですねー
イラレだと綺麗・・・額縁は写真素材なのが驚きです。馴染んでるから・・・。
自分も前、猫写真を加工して、しっぽが動く猫gifを作ったのですが
みょう〜になまなましくなってしまいました＾＾；
galleria、見に行ってきました！
かっこいいですねー！
というか、画像表示のかっこいい方法が、こんなにたくさんあったなんて
本当に驚きです。
galleria、かっこいいなあ・・・
マウスを下のサムネイルにあてると、ほわんと明るくなるのがまた・・・
ほんとうだ、ネスケだとうまくいきませんね。
残念
ああいうのは、フラッシュでしか出来ないと思っていましたが、
ジャバスクリプトで出来るんですね。
これも驚きです！
教えて下さってありがとうございます＾＾
なるほど！
サイトは、アメリとベイブなんですね！
本とかの背景はアメリっぽいし、どことなく漂うのどかな感じはベイブですね。
動く額縁の動物が不思議なのもアメリぽい。
動くgifいいですねー
イラレだと綺麗・・・額縁は写真素材なのが驚きです。馴染んでるから・・・。
自分も前、猫写真を加工して、しっぽが動く猫gifを作ったのですが
みょう〜になまなましくなってしまいました＾＾；
- 2008-03-17
- 編集
[C202] こんにちは！
あの〜非常に恥ずかしいんですが。。。
リンクしていただいてありがとうございます。修正をお願いしても宜しいでしょうか？
今までまったく気がつかなかったんですけど、Blogが→Brogになってまして(^^;)
ＢＲＯＧをＢＬＯＧにお願いします。
あの時ひろこさんが確認してくれた時に気がつけばよかったです。
お暇なときでいいので宜しくお願いします。
恥ずかしい〜＾＾
リンクしていただいてありがとうございます。修正をお願いしても宜しいでしょうか？
今までまったく気がつかなかったんですけど、Blogが→Brogになってまして(^^;)
ＢＲＯＧをＢＬＯＧにお願いします。
あの時ひろこさんが確認してくれた時に気がつけばよかったです。
お暇なときでいいので宜しくお願いします。
恥ずかしい〜＾＾
- 2008-03-18
- 編集
[C203] いちまるごさん
こんにちは！
了解しました！というか今修正させて頂きました！
シュバッ！
自分もよくやってました。
linkをrinkとか・・・
サイト名を間違えて、気づかず数ヶ月とか・・・
orz
了解しました！というか今修正させて頂きました！
シュバッ！
自分もよくやってました。
linkをrinkとか・・・
サイト名を間違えて、気づかず数ヶ月とか・・・
orz
- 2008-03-18
- 編集
[C205] いちまるごさん
あ、やっぱりlinkをrinkって間違えやすい・・・のかな？
ホッ・・・
自分も間違えたときは、指摘される前になおしたけど、
これがワールドワイドウェブに！！！
とか思うと転げまわる程恥ずかしかった思い出・・・☆
ホッ・・・
自分も間違えたときは、指摘される前になおしたけど、
これがワールドワイドウェブに！！！
とか思うと転げまわる程恥ずかしかった思い出・・・☆
- 2008-03-18
- 編集
コメントの投稿
0件のトラックバック
- トラックバックURL
- http://mikeya.blog88.fc2.com/tb.php/52-acd4c771
- この記事に対してトラックバックを送信する（FC2ブログユーザー）
おー、こんな便利なものが。
これいいっすね。