WEB制作テクニック

greybox
SAMPLEです。
見つめるショコラ かしげるショコラ
画像をクリックするとページ内で拡大表示されます。


jQueryを使わない場合でもこのようなことが可能です。
使い方は下記のサイトから必要なファイルをダウンロードし、HTMLのヘッダーに少し記述するだけで使用できます。 http://orangoo.com/labs/GreyBox/

以下はソースです。
ヘッダー内に緑色の部分を記述し、画像をリンクする際にrel="gb_imageset[]"を記述すればOKです。
全文をコピー＆ペーストでもご使用頂けます。 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
  <script type="text/javascript">
  var GB_ROOT_DIR = "./greybox/";
  </script>
  <script type="text/javascript" src="greybox/AJS.js"></script>
  <script type="text/javascript" src="greybox/AJS_fx.js"></script>
  <script type="text/javascript" src="greybox/gb_scripts.js"></script>
  <link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all">
  <!-- 以下はCSSで画像の周りにボーダーが出ないように設定しています。 -->
  <style type="text/css">
  img{
  border:none;
  }
  </style>
  <title>無題ドキュメント</title>
  </head>
  <body>
  <a href="img/greybox1.jpg" title="見つめるショコラ" rel="gb_imageset[gallary1]">
    <img src="img/greybox1.jpg" width="250" alt="見つめるショコラ" title="見つめるショコラ">
  </a>
  <a href="img/greybox2.jpg" title="かしげるショコラ" rel="gb_imageset[gallary1]">
    <img src="img/greybox2.jpg" width="250" alt="かしげるショコラ" title="かしげるショコラ">
  </a>
  </body>
  </html>


rel="gb_imageset[gallary1]"の説明。
[]内は自由に変更していただいてOKです。
ここの部分が共通のものだけグループ化されます。

また、画像は縮小サイズのサムネイルは作成せず、直接貼った方がよさそうです。
（サムネイルを使用し作成しましたが、FireFoxで画像を読み込めないことがありました。）


jQueryと一緒に使うとバグが発生し、jQueryの方が使用できないことがあります。
対処方法は以下の外部サイトを参考にしてください
jQueryとprototype.jsを共存させる方法
http://www.css-lecture.com/log/javascript/029.html
参考サイトを見た方がわかりやすいと思うので、以下を紹介させていただきます。

参考サイト（外部サイトです）
　エンジニアの足つぼ
　http://es.rojo.jp/js/es_js23.html
　ゼロからはじめるGreyBox
　http://journal.mycom.co.jp/articles/2007/07/20/graybox/index.html



上へ