画像ポップアップスクリプトをLightboxみたく

category-icon

 ppBlogでは、もとより記事に貼り付けられた画像を元の大きさで表示する画像ポップアップというのを備えてましたが、近頃では、Web2.0に触発されてか、ThickBoxLink だの、LightboxLink だの、GreyBoxLink といった、画像表示に際して、ちょいとエフェクトを付けたりするのが流行のようで。

 なのでppBlogでも画像ポップアップをパワーアップさせました。かといって過剰な演出はあまり好きではないので、そんなに凝らずに、これだけは備えておきたいというものにしています。

0287026

 昨今のブロードバンドの普及に伴い、表示サイズの大きな写真を圧縮せずにそのままアップするケースも増えてきたように思います。結果、パソコンの解像度によっては、そんな画像を表示させるとブラウザからはみ出してしまうこともあります。なのでこのあたりを考慮して、ブラウザの枠からはみ出してしまうような大きなサイズの画像は2段階のポップアップとしました。まず、ブラウザ画面にフィットするような表示段階があって、で、さらに「実寸大アイコン」をクリックすると、元のブラウザからはみ出すような画像を表示させるというものです。

 具体的にアクションを見たほうが分かりやすいでしょう。なお、画像は、National GeographicのサイトLink にあったサイズが大きめの写真を拝借してます(1024x768ピクセル)。効果を確認するには、ブラウザのサイズを1024x768ピクセルより小さくしておいて下さい。このサイトには秀逸な写真がたくさんあって、個人的にお気に入りの写真は、スクリーンセイバー用にダウンロードしたりしてます。

LightHouse
うーん、いい写真だ。

 余談になりますが、このナショナルジオグラフィックの雑誌(日本語版もあります)には、新しく見つかった「ユダの福音書」の驚くべき解読結果のレポートが載っています。近々「ダ・ヴィンチ コード」の上映が始まりますし、何とも絶妙なタイミングですね。歴史とは、勝者が創り出す日記みたいなもんです。 →http://nng.nikkeibp.co.jp/nng/feature/0605/index.shtmlLink

 スタイルシートの話になりますが、Firefoxだと、写真のドロップシャドウが意図したように見事に実現されるのですが、IE6やIE7βでは、まだまだですね。IE7の正式版では、せめてこのドロップシャドウのCSSぐらいは出来るようになって欲しいもんです。

— posted by martin at 12:39 am   commentComment [22]  pingTrackBack [0]

この記事に対するコメント・トラックバック [22件]

scrollUp1. タソ — 2006/05/11@14:34:10

はじめまして。
この度、ppblogを使わせてもらうことになったんですが、他の機能は動いているものの、この画像ポップアップだけが動いてないようです。
デフォルトテーマで、画像のところにマウスオーバーしてもクリックしても何も起こりません。マウスカーソルもリンクになりません。
使用しているVerは1.4.4通常版ですが、もしかして記事投稿の時にタグを書かないとダメなんでしょうか?

Owner Comment martin Website  2006/05/11@18:58:42

こんばんは。1.4系向けにscript.jsを書き換えてみましたので、試されて下さい。追加画像も3点。
 →http://p2b.jp/demos/script.js.txtLink
 →http://p2b.jp/demos/expand.pngLink
 →http://p2b.jp/demos/unexpand.pngLink
 →http://p2b.jp/demos/loading.gifLink
script.js.txtはscript.jsに名前を変えて、jsディレクトリに、画像ファイルは、Imagesディレクトリに保存して下さい。

3. タソ — 2006/05/11@20:03:18

早速ありがとうございます。試して見ました。
しかし、やはり同様に投稿済の写真、新規に写真を投稿しても写真サイズが固定で、拡大表示されません。写真にマウスオーバーしても写真のファイル名とファイルサイズがツールチップされるだけです。
ちなみに、管理画面の画像管理でUP済の画像を一覧する時はクリックすると元画像が表示されてます。
投稿記事のものが拡大表示できないようです。何か設定とかいるのでしょうか。

4. ぷらむ Website — 2006/05/11@20:36:17

1.4系向けを試してみました。
Firefoxはきれいな画像が出たが、「実寸大アイコン」が表示されませんでした。IEはscript.jsのエラーでビクとも動かず。
私の結果はあてになりません。ほかの方はいかがでしょうか?

5. タソ — 2006/05/11@21:02:20

あ、ちなみにIE6とSleipnir2.30で試しましたがダメっぽいですf(--;

scrollUpOwner Comment martin Website  2006/05/11@21:15:06

こんばんは。ちなみにアップした画像が、最初から縮小してアップされていて、記事での表示サイズ(デフォルトは350px)より小さいサイズならポップアップされませんよ。ページのソースを見てみて、

onclick="imagePop(event...

というのが、IMGタグになければ、ポップアップしないです。
 これは画像をアップロードする際に、指定するところがあって、そこでゼロを指定すれば、オリジナルの画像のままアップされる仕組みになっています。そのあたりはいかがでしょうか?

7. ぷらむ — 2006/05/11@21:05:33

1.4系向けを試してみました。
訂正です。
ファイルのアップ間違いがあり、やり直したところ、Firefoxはきれいな画像が出て、「実寸大アイコン」も表示され、2段階の拡大ができました。
IEのほうはscript.jsのエラーでビクとも動かず。

Owner Comment martin Website  2006/05/11@21:17:50

ぷらむさん、報告どうもです。ちなみにIEのエラーとは、どんなエラーが表示されますか? こちら、IE7βに入れ替えたPCしかない環境なので、確認できないので・・・。どんなエラーかで対処が違ってきます。

9. ぷらむ — 2006/05/11@21:24:18

IE6です。ページを開いた時から、画面の左下に「ページでエラーが発生しました」が表示され、何か操作するたびに、このエラー・メッセージが頻繁に出ます。
当然画像拡大でクリックしたときもエラー・メッセージが出ます。IEでは新しいscript.jsがうまく動かないように思います。
Operaでもやはりダメです。
Firefoxではうまく動きます。

Owner Comment martin Website  2006/05/11@21:51:15

こんばんは。ご報告どうもです。ちなみに、画面左下のエラー表示付近をダブルクリックすると、ダイアログが出て、詳細なエラー内容が出てきませんでしょうか。ページの何行目が云々といった。うーむ、Operaでもダメですか。。

scrollUp11. ぷらむ — 2006/05/11@22:41:26

エラー表示は2種類あって、「ページでエラーが発生しました」が出たときは、ライン:330、文字:1、エラー:オブジェクトを指定して下さい。コード:0,URL:http://www2.pf-x.net/~puramu/cgi-bin/ppblog/index.phpLink
と出ます。なお、ラインは外に337,366,328などの時もありました。
もう一つは「実行しましたが、ページでエラーが発生しました」こちらはライン:133、文字:50、エラー:終了していない文字型の定数です。コード:0,URL:http://www2.pf-x.net/~puramu/cgi-bin/ppblog/index.phpLink 。と表示されました。

Owner Comment martin Website  2006/05/12@00:05:33

ラボのWindows2000/IE6で試してみましたが、こちらはエラーも出ずに正常どおりに動きました。ぷらむさんのIEも6ですよね:(
 で、Opera9βでは、やはり動きませんで、原因が分かったので、それを修正したやつをアップしてます。
 →http://p2b.jp/demos/script.js.txtLink
Operaはスタイルシートの透明度指定に対応してなく、かつ、スクリプトの中で、IE向けの分岐のつもりが、OperaのIE成りすましによりエラーが出てました。。で、写真の背景は画像で指定するようにしたので、画像ファイルがもう一点追加です。これはサイズが1ピクセルなので、マウスの右クリックで「対象を保存・・・」で保存してください。
 →http://p2b.jp/demos/screen.pngLink
で、保存するディレクトリはImagesで同じです。

13. タソ — 2006/05/11@22:59:22

うお:oそういうことか!
画像Uploadの際、解像度制限を0にしてみました(初めて)。
そしたら、普通にJavaによる拡大できました!嬉しい;v)
ありがとうございました。
ただ、Sleipnir2.30とIE6では拡大アイコンは出てこず、機能してません。こんな無知な私が言っても全然参考にならないかもしれませんが(TT)
スクリプトエラーも出てません。。アイコンファイルもjsファイルも正しいところにULしてるんですが・・・。

14. タソ — 2006/05/11@23:46:00

あ、ごめんなさい。また画像が小さかっただけでした。。あまりでかい画像がなくて・・・。
スクリプトエラーもなく、こちらのサイトの写真のように正常に表示されました!
板を汚してしまい申し訳ないです。(++!)

Owner Comment martin Website  2006/05/12@00:06:13

正常に動いて何よりです:)
で、ついでに言っておくと、JavaとJavaScriptは名前は似てますが、全くの別物です。知っていてソンはしないと思いますので。

scrollUp16. ぷらむ — 2006/05/12@05:33:47

MeとXPで確認しました。
IEはVer6です。
operaは、完璧にうまく表示されます。
Firefoxは、画像拡大はうまく表示されますが、「画像をクリックすると閉じます」などが文字化けしてうまく表示されません。
IEはやっぱりスクリプトエラーが出て全然ダメです。
MeとXPの違ったパソコンで確認し、IEでは同様の結果でしたので、martin先生が使っているVer1.44と私の使っているVer1.44が微妙に違っているか、私が若干いじったところが影響しているかのどちらかのようです。

17. ぷらむ — 2006/05/12@06:15:07

私が若干いじったところなど、もともといじれない人間ですから大したことはやってないし、もしかすると、サーバー?
phpのヴァージョンは関係ないですよね。

18. ぷらむ — 2006/05/12@06:37:39

IEで表示されない件ですが、もちろんIEでも今までのscript.jsでは拡大表示がされます。新しいscript.jsの場合に表示されないのです。
IEのjavescriptのヴァージョンの違い?IEはふだん使っておらず、さっぱりわからない。

19. タソ — 2006/05/12@09:05:12

関係ないかもしれませんが、XPとIE6/Sleipnir2.30で正常に動いたうちのサーバーはPHP5です。

20. ぷらむ — 2006/05/12@22:59:21

martin先生、やっと原因がわかりました。
ここからscript.js.txtをダウンロードして、txtを削除してスクリプトを作成しなければいけないところを、txtファイルとして開いてコピーして、これをtxtファイルに貼り付け、txtをjsに変更してスクリプトを作ったため、文字エンコーディングがJISになっていました。
Firefoxで文字化けしているので、おかしいなと思い、文字エンコーディングを調べるとEUCになっていなかったので、やり方を変えたら、正常に表示されるようになりました。
ご迷惑をおかけしました。

scrollUp21. ぷらむ — 2006/05/13@08:38:18

martin先生、タソさん。
これだけ拡大できると、迫力満点で、すごいですね。
最高に気に入りました。

22. タソ — 2006/05/13@20:55:45

良かったですね〜。まぁ私は普通にJSで拡大できるようになっただけでも嬉しかったですが;v)
ほんと、ppblogイイですね。
導入簡単、多機能、動作軽い。もっと広まればいいのになぁ

この記事に対する TrackBack URL:

設定によりTB元のページに、こちらの記事への言及(この記事へのリンク)がなければ、TB受付不可となりますのであらかじめご了承下さい。

コメントをどうぞ。 名前(ペンネーム)と画像認証のひらがな4文字は必須で、ウェブサイトURLはオプションです。

ウェブサイト (U):

タグは使えません。http://・・・ は自動的にリンク表示となります

:) :D 8-) ;-) :P :E :o :( (TT) ):T (--) (++!) ?;w) (-o-) (**!) ;v) f(--; :B l_P~

     
T: Y: ALL: Online:
Created in 0.0097 sec.
prev
2024.3
next
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31