Nov 08, 2007

[Misc] Interface elements for jQuery にチャレンジ

Interface elements for jQuery とは

jQuery は

jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.
というもの。で、Interface elements for jQuery は
Interface is a collection of rich interface components which utilizes the lightweight JavaScript library jQuery.
というもの。

今回は Interface elements for jQuery の中の ImageBox をここに適用してみた。
ImageBox というのはこういうもの(画像をクリック) → [in-vitro.jp's logo]
Interface elements for jQuery
http://interface.eyecon.ro/
jQuery
http://jquery.com/

ImageBox の使い方

とても簡単。jquery.js, interface.js をダウンロードしてきて、後は HTML を少しいじるだけ。 <a> タグの title 属性が ImageBox の左下に表示される画像のタイトルとして使用される。 rel 属性は画像のグルーピングに使用される。例えば、rel="imagebox-travel" を指定した画像を 3 枚用意すると、タイトルの下に「Showing image 3 from 1」 と表示される。 またグルーピングを使用するとスライドショーも可能となる(様だ)。

<html>
<head>
  <script type="text/javascript" src="/blog/jquery.js"></script>
  <script type="text/javascript" src="/blog/interface.js"></script>
  <link rel="stylesheet" href="/blog/interface.css" type="text/css" />
</head>
<body>
  <a href="/images/sample.png" title="Sample Image" rel="imagebox">
    <img src="/images/sample-thumbnail.png" alt="Sample Image"/>
  </a>
  <script type="text/javascript">
<!--
$(document).ready(
  function() {
    $.ImageBox.init(
      { loaderSRC: '/blog/loading.gif',
        closeHTML: '<img src="/blog/close.jpg" />' }
    );
  }
);
//-->
  </script>
</body>
</html>
HTML はこんな↑感じ。interface.css はこんな↓感じ。
#ImageBoxOverlay {
  background-color: #000000;
}
#ImageBoxCaption {
  background-color: #FFFFFF;
}
#ImageBoxContainer {
  width: 250px;
  height: 250px;
  background-color: #FFFFFF;
}
#ImageBoxCaptionText {
  font-weight: bold;
  padding-bottom: 5px;
}
#ImageBoxCaptionImages {
  margin: 0;
}

Posted in Misc | このエントリーをはてなブックマークに追加 | この記事をクリップ! livedoor クリップ |