Home > スポンサー広告 > Lightbox実装手順


スポンサーサイト

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

 Comments:-

2008-04-28 (月) 23:46

このコメントは管理人のみ閲覧できます

2008-04-29 (火) 00:17

このコメントは管理人のみ閲覧できます

TomomiX URL 2008-05-02 (金) 01:05

秘密のコメントに気付くの遅れてしまいました;
申し訳ありません・・・v-388
でも、解決できて良かったです。
今後は秘密コメントも意識して確認しますので、是非ともよろしくお願いします。

Comment Form

 Trackback+Pingback:-

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/112-b63be010
Listed below are links to weblogs that reference
スポンサーサイト from TRASH
Trackback from TomomiX日記・Windows&Mac関連フリーソフト・オススメソフト紹介ブログ「TRASH」 2008-03-29 (土) 02:49

Shadowbox:Lightboxの万能版・進化系JavaScript

Shadowbox 上記サイトをまずご覧ください。 自分のブログでは適用できなかったので(かなり残念)デモも使用方法も詳しく書けません。このShado... (more…)

Home > スポンサー広告 > Lightbox実装手順

Home > IT Tips > Lightbox実装手順


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
スポンサーサイト

 Comments:3

2008-04-28 (月) 23:46

このコメントは管理人のみ閲覧できます

2008-04-29 (火) 00:17

このコメントは管理人のみ閲覧できます

TomomiX URL 2008-05-02 (金) 01:05

秘密のコメントに気付くの遅れてしまいました;
申し訳ありません・・・v-388
でも、解決できて良かったです。
今後は秘密コメントも意識して確認しますので、是非ともよろしくお願いします。

Comment Form

 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…)

Home > IT Tips > Lightbox実装手順

Recent Comments
Recent Trackback
Feeds

↑Page Top

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