忍者ブログ

Wanderer In The Information

錯綜する情報の中の放浪者の日々 迷い迷って目指す道すら見失い 光が指す方向へとただ突き進む
HOME » 情報技術 » 画像の表示
×

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

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

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

詳細は続きにて。
こんな感じの機能です。
↓サンプル 画像をクリックしてみてください。
neko.jpg

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

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タグに
<body onload="initLightbox()">
を追加してください。
hoge.jpは各自自分のアドレスに書き換えてくださいね。

こんな感じで多分使えると思いますが、アップロード方法や階層の問題でちょくちょく書き換えるところが出てくるので、これだけでは出来ないところもあるかもしれません。
PR
Profile
SUSH
HN:
SUSH
年齢:
30
性別:
男性
誕生日:
1986/11/27
職業:
マークアップエンジニア
趣味:
音楽鑑賞・落書き
New Entry
New Comments
けいたいでんわ
NONAME 02/08
文房具
Re:文房具 - 返信済
じょ 11/17
白銀週間
Re:白銀週間 - 返信済
ジョニー 09/28
昼夜逆転
Re:昼夜逆転 - 返信済
ジョルジュ 09/08
家路を急ぐ群衆の赤いランプに囲まれながら帰った訳で
じょ 08/16
Counter
Calendar
10 2017/11 12
S M T W T F S
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
PageRank
ページランク
Free Hand Blog
忍者ブログ [PR]
Powerd by NINJAブログ / Designed by SUSH
Copyright © Wanderer In The Information All Rights Reserved.