Wanderer In The Information

錯綜する情報の中の放浪者の日々迷い迷って目指す道すら見失い光が指す方向へとただ突き進む

HOME » 情報技術 » 画像の表示

2024 04/25
(Thu)

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

00:56:07

2007 08/20
(Mon)

画像の表示

ちょっと前に他のブログで使われていて
かなり気になっていた機能を紹介します。

画像を動的にポップアップ表示してくれる機能です。

詳細は続きにて。

こんな感じの機能です。
↓サンプル　画像をクリックしてみてください。

押していただけると（ちゃんと機能していれば）分かると思います。
画面が暗転し、画像がポップアップ表示される機能です。

Liteboxと言うJavaScriptを使ったソースになります。

使い方は･･･環境によってまちまちなんですが･･･
上記リンクページよりダウンロードし、

litebox-1.0
- css
  - lightbox.css
- js
  - litebox-1.0.js
  - moo.fx.js
  - prototype.lite.js
- images
  - blank.gif
  - cloaselabel.gif
  - loading.gif
  - nextlabel.gif
  - prevlavel.gif

をアップロードします。
上記以外はサンプル用なので不要です。
画像をサムネイルからポップアップさせたいリンクに、

<a href="http://hoge.jp/hoge.gif" rel="lightbox"><img src="http://hoge.jp/sum-hoge.gif" /></a>

の様にaタグに「rel="lightbox"」を入れるだけです。
またJavaScriptとCSSを読み込まないといけないのでヘッダー部に

<link rel="stylesheet" href="http://hoge.jp/litebox-1.0/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://hoge.jp/litebox-1.0/js/prototype.lite.js"></script>
<script type="text/javascript" src="http://hoge.jp/litebox-1.0/js/moo.fx.js"></script><script type="text/javascript" src="http://hoge.jp/litebox-1.0/js/litebox-1.0.js"></script>

を追加し、bodyタグに