2008年02月29日
 ■  しつこくWebいじり Lightbox設置

まだ本家サイトをいじってます・・・

お仕事ページの「Works」ですが、これまではJavaScriptを使って画像を別窓に出してました。
これが、以前からちょっとうっとおしく感じてまして。
更新作業も結構メンドクサイし、表示用のhtmlをいちいち用意しないといけないからファイルが無駄に増えちゃうし。

ということで、最近よく見かける「Lightbox」を組み込んでみました。
webサイトやブログなどで、小さい画像をクリックするとページ全体が薄暗くなり拡大画像がにゅいーんと出てくるアレです。

公式サイト(英語)サンプルもあり

JavaScriptのプラグインのようなもの?ライブラリ?でいいのかな?
lightbox効果を付けたいページにちょこちょこっと記述をするだけで基本的に使えます。

「 lightbox 設置 」あたりでgoogle検索すれば、親切丁寧な方のページがたくさんHITしますので、そんなに難しく考えなくとも設置できるかと思います。

ここの解説も分かりやすいです。


僕の場合、とりあえずこれまで「別窓を開いて表示する」javascriptを組み込んでいたので、その記述を消して改めてlightbox用の記述をしていくという作業が必要だったわけですが・・・
50枚以上の画像の設定をし直すのはかなり時間がかかりました^^;
で、その作業をしながらもこの際だからと新しい画像を用意したり、サイズを調整したりもしたりして。
結構大変でした・・・

で、設置してみて思ったこと。

・ 見た目スッキリ~ シンプルで見やすい なんかお洒落?
・ 閲覧するのが楽~ 次から次へとスイスイ見れる 
・ 今後の更新作業が楽~ (今回は以前の設定からの切り替え作業だったんできつかったけど・・)

概ねこんな感じ。いい感じ、かなぁ。
ただ、

・ いまや多くのサイト&ブログで一般的に使われているので、目新しくはないと思う

僕の場合は、とにかく「更新作業を楽したい」「操作感を良くしたい」が目的だもんで、これはまぁ気にしないです。

・ 人様の制作物で着飾った感がなくもなくなくない?んなこたーない?

そのまま使ってもお洒落なだけに、なんとなく「くやしい」というかなんというか。
うーん、難しいですな。使わせてもらっといてんなこと言うなんて、ボクッたら何様?死んじゃえ。死ねばいいのよ。

スタイルシート部分でカスタマイズなんかもある程度出来るし、スクリプト自体をいじって機能アップしたバージョンを配布している方もたくさんおられるようなので、そういった場合はやってみればいいかと思います。
僕はとりあえずボタン画像を自作のものに置き換えてみたりしましたけども・・・;

・ Javascript仕様なので、ちょっと閲覧環境(PC設定、OS、ブラウザの種類などなど)が気になる

今までのページでもスクリプト使ってたし、まぁ、ムチャクチャ気にしてるってこともないんだけども。
全ての環境で不具合なく安全に、ってのは可能なんでしょうかねぇ。
あと自宅の光回線でしか動作確認してないんだけども、このあたりもどうなんでしょうなぁ。

まぁ、当分はこのスタイルでいきます。頑張ったし・・・
他のページやこのブログにも組み込む、かも・・・

投稿者 mega : 2008年02月29日 20:20

トラックバック

このエントリーのトラックバックURL:
http://www.mega-graphics.net/cgi/mt/mt-tb.cgi/431

コメント

突然、初めての書き込みします。
某学校に通うwebデザイン科所属の"アイツ"です。
先生元気ですか?

目新しいという点で言えば、「Highslide(ハイスライド)」とかどうですか?
http://vikjavev.no/highslide/
これもAjaxライブラリのひとつなんですけど、あんまり使ってる人いないんでインパクトはあると思いますよ。
僕も、自分のwebポートフォリオで使いました。
オープンソースなんで、ガンガン使って遊んじゃって下さい。
それでは、卒業式に。

東出

投稿者 web科の年増 : 2008年03月04日 01:09

ちょっと風邪気味ですけども、先生は元気です。

うんうん。Highslideも調べてるときに見つけていいなぁと思ってました。
スパスパっと軽快でシンプルで。
ブログなんかに付けるんだったら、highslideの方が自然でいいかも。挑戦してみようかしら。

東出くんも卒業だねぇ・・・寂しくなるわ・・・

また近況報告してね!

投稿者 MG/イマザキ : 2008年03月04日 01:57

Farmville farms even include free gift that is especially

投稿者 Paul : 2016年09月26日 19:50

You have brought up a very excellent details , regards for the post.

投稿者 Paul : 2016年11月24日 18:33

Hey. Cool post. There's a dilemma together with your website in chrome, and you may want to check this The browser will be the market leader and a huge component of other people will omit your great writing because of this issue.

投稿者 Paul : 2016年12月21日 22:24

コメントしてください




保存しますか?