○実装手順
１．Lightbox公式サイトへ移動
２．Lightbox最新版をダウンロード
３．解凍し、gifファイルをすべてアップロード
４．css/jsファイルをアップロード前に編集
●cssファイル編集
６．以下を <head>〜</head> 間に記述
rel="lightbox" title=""
rel="lightbox[xxx]" title=""
赤文字部分は勿論、各自のアップロード後のファイルURLを記述すること。FC2blogは、フォルダアップロード機能がないため、複数のファイルアップロードも大変で、Lightbox自体も実装までにアップロードだけではなく、ファイル編集する必要があるため、結構煩雑。
現在は、Greyboxの方をオススメしている。
●Greybox：画像もWebも格好良く表示するLightbox進化版
１．Lightbox公式サイトへ移動
２．Lightbox最新版をダウンロード
３．解凍し、gifファイルをすべてアップロード
４．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５．編集済みcss/jsファイルをアップロード
//
var fileLoadingImage = "/file/loading.gif";
var fileBottomNavCloseImage = "/file/close.gif";
var borderSize = 10;
６．以下を <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" />
rel="lightbox" title=""
rel="lightbox[xxx]" title=""
赤文字部分は勿論、各自のアップロード後のファイルURLを記述すること。FC2blogは、フォルダアップロード機能がないため、複数のファイルアップロードも大変で、Lightbox自体も実装までにアップロードだけではなく、ファイル編集する必要があるため、結構煩雑。
現在は、Greyboxの方をオススメしている。
●Greybox：画像もWebも格好良く表示するLightbox進化版
- Next Entries : Logo Creatr：Web2.0系ロゴ作成サイト
- Prev Entries : Lightbox：サムネイル画像クリックで格好良く画像をオーバレイ
Comments:3
Trackback+Pingback:1
- TrackBack URL for this entry
- http://blackcat13numbers.blog31.fc2.com/tb.php/112-b63be010
- Listed below are links to weblogs that reference
- Lightbox実装手順 from TRASH
- Trackback from TomomiX日記･Windows&Mac関連フリーソフト･オススメソフト紹介ブログ「TRASH」 2008-03-29 (土) 02:49
-
Shadowbox：Lightboxの万能版・進化系JavaScript
Shadowbox 上記サイトをまずご覧ください。 自分のブログでは適用できなかったので（かなり残念）デモも使用方法も詳しく書けません。このShado... (more…)