〆 おしゃれな画像表示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の中に表示することが可能です。
@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>
|
TOP 
Web
The link to this site is free. /
Last Updated : 28.May.2012