Home

TRASH

スポンサーサイト

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

Greybox実装手順

○実装手順
1.Greybox公式サイトへ移動
2.Greybox最新版をダウンロード
3.解凍し、greyboxフォルダ直下のファイルをすべてアップロード
4.以下を <head>~</head> 間に記述

<script type="text/javascript">
var GB_ROOT_DIR = "http://blog-imgs-29.fc2.com/b/l/a/blackcat13numbers/";
</script>

<script type="text/javascript" src="http://blog-imgs-29.fc2.com/b/l/a/blackcat13numbers/AJS.js"></script>
<script type="text/javascript" src="http://blog-imgs-29.fc2.com/b/l/a/blackcat13numbers/AJS_fx.js"></script>
<script type="text/javascript" src="http://blog-imgs-29.fc2.com/b/l/a/blackcat13numbers/gb_scripts.js"></script>
<link href="http://blog-imgs-29.fc2.com/b/l/a/blackcat13numbers/gb_styles.css" rel="stylesheet" type="text/css" />
です。

FC2ブログの仕様上、フォルダアップロードができないため、必要なファイルをすべて1つずつアップロード。中身は上記のjsファイル3つとcssファイル1つと、その他gifファイル6つとhtmlファイル1つ。アップロードしたときのURLをすべて指定しています。

そして、前準備が終わり、次は画像とWebページに付加する <a> タグの属性です。
それぞれ、赤文字部分を追記。
※変な改行が入りみづらくなりましてすみません。
<a href="http://blog-imgs-29.fc2.com/b/l/a/blackcat13numbers/20080203_1.jpg" rel="gb_image[]"<img src="http://blog-imgs-29.fc2.com/b/l/a/blackcat13numbers/20080203_1s.jpg" alt="20080203_1.jpg" border="0" align="left"/></a><br clear="all" />
と記述すると
20080203_1.jpg
<a href="http://www.google.co.jp/" rel="gb_page[500, 500]" title="Google">Google</a>
と記述すると
Google
※サンプル画像とリンク先が「Page not found」とでてしまう場合
→htmlファイルのアップロードがうまくいかず(日本語がファイル中身に含まれていなかったため)正常にアップロードしたら、実装完了しました。FC2Blogの仕様?上、日本語がまったく含まれていないhtmlファイルはアップロードできないため、何かしら日本語を含めてアップロードする必要がある。

Greybox:画像もWebも格好良く表示するLightbox進化版

Greybox
フォルダアップロードできないFC2blogでは諦めかけていたGreyboxだが、実装に無事成功しました。実装方法は以下の別記事で記載しました。ただし、Highslide JSを実装したらJavaScriptの競合により、動作しなくなりました。
●Greybox実装手順(Greyboxでポップアップ)
実装は簡単だし、画像の拡大を格好良く見せるだけではなく、Webサイトも便利にポップアップさせることが可能です。サンプルは以下の通り。

1.単体画像の場合
20080203_1.jpg

2.グループ画像の場合
20080316_1.jpg20080316_2.jpg20080316_3.jpg20080316_4.jpg

3.単体Webページの場合
Google

4.複数のWebページの場合
Launch Google search
Launch Yahoo! search
Launch Live search

Home

Recent Comments
Recent Trackback
Feeds

↑Page Top

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