GreyBox:画像の拡大ライブラリ(javascript)、ずっと、thickboxだったんだけど、ちと浮気。エレガントなGreyBoxに惑わされる ･･･ 【javascriptライブラリ】
・画像のアップ表示。
色々な方法あるけれど，私はずっと、
・thickbox
一筋だった。
・Lightbox JS v2.0 ＶＳ ThickBox 3.1 ･･･ 【JavaScript】
（それがどうしたって？）
別に、
ただ「不満無かった・・・」ということなんだけど。
某、顧客サイトで
（気になってた、）"エレガントさ" を感じる
・GreyBox に横目を使ってしまった。
◆Orangoo Labs - GreyBox※引用転載
・It's only 22 KB!（軽い！）
・It does not conflict
with pop-up blockers
・It's super easy
このブログでも、併用しよかな。
追記に ▼
************************************************
◎ 画像の拡大ライブラリ「GreyBox」に惑わされる の巻
：javascriptライブラリ
************************************************
問答無用で，早速・・・
■ダウンロード
※Download GreyBox v5.54
■実装
□greybox のフォルダごとアップロード
・解凍されたものにはたくさんのファイルがあるが、
greybox のフォルダごと、javascriptフォルダに
アップロードする。
□<head> ～ </head> 内で、組み込み。
１：最初に、
greyboxのjavascriptフォルダへの
パスの設定。
<script type="text/javascript">
var GB_ROOT_DIR = "/js/greybox/";
</script>
２：次に
javascriptファイルと
cssファイルの組み込み。
<script type="text/javascript" src="/js/greybox/AJS.js"></script>
<script type="text/javascript" src="/js/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="/js/greybox/gb_scripts.js"></script>
<link href="/js/greybox/gb_styles.css" rel="stylesheet" type="text/css" />
●注意●
ここで、エラーが出る。
他のライブラリとコンフリクトおこしているようで
こういう時は、
（慌てず騒がず）いつものように、回避方法。
<script type="text/javascript">
jQuery.noConflict(); var $ = jQuery;
</script>
□利用ソース
<a href> の rel属性 を利用して
実現する方法だ。
※サンプルは、このブログでは無く
開発倉庫サイト「創ったmetaboy」に用意してます。
（このブログは、・・・thickbox でいいかな。）
□画像への利用
◇シンプル利用 「単一画像表示」
<a href="http://www.metaboy.net/imgdata/imgsamp_space01.jpg" title="宇宙の日の出01" rel="gb_image[]">宇宙の日の出01</a>
◇グループ利用 「複数画像表示」
<a href="http://www.metaboy.net/imgdata/imgsamp_space02.jpg" rel="gb_imageset[nice_pics]" title="宇宙の日の出02">宇宙の日の出02</a> |
<a href="http://www.metaboy.net/imgdata/imgsamp_space03.jpg" rel="gb_imageset[nice_pics]" title="宇宙の日の出03">宇宙の日の出03</a>
□HTMLファイルへの利用
◇シンプル利用 「単一URL表示」
<a href="http://www.google.co.jp" rel="gb_page[500, 500]" title="単純に表示">単純に表示</a> |
<a href="http://www.google.co.jp" rel="gb_page_center[500, 500]" title="センターに表示">センターに表示</a>
<a href="http://www.google.co.jp" rel="gb_page_fs[]" title="フルスクリーン">フルスクリーン</a>
◇グループ利用 「複数URL表示」
<a href="http://www.google.co.jp/" rel="gb_pageset[search_sites]" title="Google">Google</a> |
<a href="http://search.yahoo.co.jp/" rel="gb_pageset[search_sites]" title="Yahoo">Yahoo</a> |
<a href="http://www.bing.com/?cc=jp" rel="gb_pageset[search_sites]" title="bing">bing</a>
■リファレンス
・通常の使い方
・なんか色々出来そうですね
■習作サンプル
・greybox利用した、画像拡大ポップアップ習作サンプル
ちなみに
「宇宙の日の出」は
前にご紹介させていただいた、
（・宇宙の日の出:今月も５０本。ぎりぎり滑り込み。最後は、大好きな宇宙の壁紙リストを紹介、２０点･･･ 【壁紙】）
＞ 20 Incredible Sunrise Wallpapers Caught in Space
のものを利用させていただきました。
改めて、感謝！
