2006年01月25日

seesaa blogでLightbox.jsを使ってみる このエントリーをはてなブックマークに追加

こんにちは、堺すすむです(嘘です)。なーんでか?(謎)

今話題の Lightbox JS をseesaa blog でも使ってみたいなと思い、誰かやってないかなーと思ったら、既に実装されている方がいらっしゃったので、参考にしてみたら動いた。

路上の風景〜landscapes on the road: Lightbox JS〜ポップアップさせずにサムネイル画像を表示yanz さん、Good Job!!

りょーちの場合、 lightbox.css は外部ファイルとして直接stylesheetを読み込むようにしてありますが、基本的には yanz さんのところでまとめられていた、そのまま実装すればOKです!

実装結果はこんな感じです。(適当な画像がないのでamazonのものを利用した。アフィリエイトリンクじゃないっす)
amazonalert.png

なかなかよいではないですかー。
seesaa blogでは画像ファイルをアップロードした後、サムネールが作成されるよーなのですが、このリンクの貼り方は自分で入力しなければならないのでちょっと面倒。

元画像とサムネールのURLさえわかればbookmarkletとか簡単に作れそうなので、seesaa blogでデフォルトでlightbox.jsに対応して貰えたらちょっと嬉しいなと思ったりした(無理?)。

ちなみに、HTMLファイルを全て読み込んだ後にクリックしないとそのまま画像が表示されてしまうっぽい。(サイドバーとかをちょいと整理しないとダメだな・・・orz)
posted by りょーち | Comment(7) | TrackBack(1) | Web周辺技術
この記事へのコメント
こんにちは.yanzです.リンク,コメント&TBいただき,ありがとうございました.
確かに画像にrel="lightbox"を追加するのは面倒ですね.邪道ですが,私はIME辞書に登録するつもりです.
なお,りょーちさんのblogをRSSリーダーに登録させてもらいました.
Posted by yanz at 2006年01月26日 08:12
yanzさん、こんにちは。りょーちと申します。
コメントいただきましてありがとうございます。
yanzさんのサイト、非常に参考になりました。素晴らしいです。
記事を書いた時点では、lightbox.jsをhead部分でincludeしているのですが、そうなると、lightbox.jsを利用していないときにもscriptを読んでしまうので、やはり記事内でincludeしたほうがよさそうなんですかねー。
もうちょっといろいろ考えて見ます。

ではでは。
Posted by りょーち at 2006年01月26日 17:35
>なお,りょーちさんのblogをRSSリーダーに
>登録させてもらいました.

ありがとうございます。
殆どゴミみたいな記事が多いので恐縮です(^^;

参考になりそうな記事が書けるように(難しいですが)頑張ります(^^)
Posted by りょーち at 2006年01月26日 17:37
りゅーちさん,Lightbox JS2の情報ありがとうございました.そういえば,この前紹介されてた”zooomr”を使いはじめたのですが,あれにも,lightboxが組み込まれてますね.
Posted by yanz at 2006年03月30日 19:46
yanz さん、こんにちは。りょーち@管理人です。
コメントいただきましてありがとうございます。
Lightbox JS2、ちょいとかっちょいいですよねー。zooomrにもlightbox.jsが使われていたのですかー(気づきませんでした)

なかなかいろいろオモシロそーな感じですねぇ。
ではでは。
Posted by りょーち at 2006年03月31日 18:31
クリックしても画像が表示されるだけですよ?
ブラウザ依存してるのかな?
Posted by ??? at 2010年02月26日 15:26
りょーち管理人です。
Lightbox.jsちょっと重いかもしれないと思い数年前に一度はずしてました。
また実装してみたので多分動くのではないかと思います。
Posted by りょーち at 2010年02月26日 20:48
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:


クールなポップアップ
Excerpt: このページで使っているカッコよさげなポップアップのやり方について教えちゃいます。(私の作成物ではないです)≪サンプル≫必要な知識:HTMLとCSSとJavascript(はいらないかも)必要なもの:l..
Weblog: ミュレットの記憶 〜 Memory of Mewlet 〜
Tracked: 2006-04-26 17:01