Home

TRASH

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Lightbox実装手順

○実装手順
1.Lightbox公式サイトへ移動
2.Lightbox最新版をダウンロード
3.解凍し、gifファイルをすべてアップロード
4.css/jsファイルをアップロード前に編集

●cssファイル編集
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(/file/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left; }
#nextLink { right: 0; float: right; }
#prevLink:hover, #prevLink:visited:hover { background: url(/file/prev.gif) left 53% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/file/next.gif) right 53% no-repeat; }
●jsファイル編集
// Configuration
//
var fileLoadingImage = "/file/loading.gif";
var fileBottomNavCloseImage = "/file/close.gif";
var borderSize = 10;
5.編集済みcss/jsファイルをアップロード
6.以下を <head>~</head> 間に記述
<script type="text/javascript" src="/file/prototype.js">
<script type="text/javascript" src="/file/scriptaculous.js">
<script type="text/javascript" src="/file/lightbox.js">
<link rel="stylesheet" href="/file/lightbox.css" type="text/css" media="screen" />
7.画像リンクの属性に以下を記述する
rel="lightbox" title=""
rel="lightbox[xxx]" title=""


赤文字部分は勿論、各自のアップロード後のファイルURLを記述すること。FC2blogは、フォルダアップロード機能がないため、複数のファイルアップロードも大変で、Lightbox自体も実装までにアップロードだけではなく、ファイル編集する必要があるため、結構煩雑。
現在は、Greyboxの方をオススメしている。更にオススメしているのは、Shadowboxです。以下ページを参照ください。実装方法なども掲載しています。
●Greybox:画像もWebも格好良く表示するLightbox進化版
●Shadowbox:Lightboxの万能版・進化系JavaScript

Lightbox:サムネイル画像クリックで格好良く画像をオーバレイ

Lightbox2

ブログやホームページに貼り付けたサムネイル(縮小)画像を格好良く表示させるツール。その中で有名、かつ汎用的とされているのが、上記リンク先のLightbox2なのです。自分も初めて出会った時は、その格好良さに惚れ込んでしまい、すぐさま導入した経験を思い出してみた今日この頃。

導入方法の手順は以下ページにまとめてみました。
●Lightbox実装手順
Lightboxのサンプルはこちら拡大画像が前に表示され、背景が薄暗く透過されます。ですが、サイトが重くなることは覚悟してください。なので、自分は現在のブログでは適用せず、辞めました。でも、格好良さ重視・デザイン重視等をテーマとしているなら是非ともオススメ。導入方法も簡単ですし。

あ、こっちも結構有名でした。
というか、現在は下記の「Highslide JS」と「Shadowbox」しかサムネイル画像オーバーレイ表示スクリプトについてはオススメしていません。(2008/08/08現在)
Highslide JS
FYI:以下サイトでも詳細を紹介しているので是非
GiGaZiNE|オーバーレイ効果「Litebox」登場
FYI:以下サイトでは導入方法や使い方を説明しているので是非
小粋空間|Lightboxに関するアーカイブ

Home

Recent Comments
Recent Trackback
Feeds

↑Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。