esprits top Esprit's Style

    -    エンジニアの足つぼ    -

GreyBoxを使ってみよう!

〆 おしゃれな画像表示JavaScript GreyBox

ひまわり 菖蒲
上のサムネールをクリックしてみてください。
ウィンドウ上におしゃれな拡大画像を表示する GreyBox です。
設置方法は簡単。このURLからファイルをコピーして
HTMLのヘッダーに少し追記するだけ。
@greyboxsample.html
<head><title>....</title>
<link href="../modules/GreyBox_v5_51/greybox/gb_styles.css" rel="stylesheet"
    type="text/css" />
<script type="text/javascript">
    var GB_ROOT_DIR = "../modules/GreyBox_v5_51/greybox/";
</script>
<script type="text/javascript" src="../modules/GreyBox_v5_51/greybox/AJS.js">
    </script>
<script type="text/javascript" src="../modules/GreyBox_v5_51/greybox/AJS_fx.js">
    </script>
<script type="text/javascript" src="../modules/GreyBox_v5_51/greybox/gb_scripts.js">
    </script>
</script>
</head>

<body>

・・・
<!-- 画像をグループ化する場合 -->
<a href="big001.jpg" rel="gb_imageset[hana]" title="GreyBox Title">
    <img src="thumbnail001.jpg" />
</a>
<a href="big002.jpg" rel="gb_imageset[hana]" title="GreyBox Title">
    <img src="thumbnail002.jpg" />
</a>

<!-- 画像をグループ化しない場合 -->
<a href="big003.jpg" rel="gb_image[]" title="GreyBox Title">
    <img src="thumbnail003.jpg" />
</a>

・・・

</body>

〆 おしゃれな画像表示2JavaScript GreyBox

GreyBoxは、画像だけでなくHTMLもBoxの中に表示することが可能です。
 Googleを別ウィンドウでおしゃれに表示する
 Launch Google

 GoogleとYahooを別ウィンドウでおしゃれにグループ化して表示する
 Launch Google
 Launch Yahoo!
@greyboxsample2.html
<!-- サイトをグループ化しない場合 -->
<a href="http://google.co.jp/" title="Google" rel="gb_page_fs[]">
    Launch Google</a>

<!-- サイトをグループ化する場合 -->
<a href="http://google.co.jp/" title="Google" rel="gb_pageset[search_sites]">
    Launch Google</a>
<a href="http://www.yahoo.co.jp/" title="Yahoo!" rel="gb_pageset[search_sites]">
    Launch Yahoo!</a>
The link to this site is free.   /   Last Updated : 28.May.2012   
Copyright © ESPRITS STYLE. 2003-2007   /   ご意見、感想、苦情は、 こちらへ...
counter