Hatena::Groupkdri

KazusaAPI開発日誌 このページをアンテナに追加 RSSフィード

2008-03-29

Javascriptのサムネイルビューア Highslide JSをつかってみる。

|  Javascriptのサムネイルビューア [http://vikjavev.no/highslide/:title=Highslide JS]をつかってみる。 - KazusaAPI開発日誌 を含むブックマーク はてなブックマーク -  Javascriptのサムネイルビューア [http://vikjavev.no/highslide/:title=Highslide JS]をつかってみる。 - KazusaAPI開発日誌  Javascriptのサムネイルビューア [http://vikjavev.no/highslide/:title=Highslide JS]をつかってみる。 - KazusaAPI開発日誌 のブックマークコメント

screenshot

Highslide JS - JavaScript thumbnail viewer

Highslide JSサムネイル画像HTMLポップアップをページにつけることができる。ポップアップはワンクリックで消したり、移動することが可能。

ポップアップの中身は、静的なもの、AJAXで取得するもの、iframe を使うもの、flash をつかうものなどが扱える。

つかう

ダウンロードしたソースファイル(highslide-3.3.12.zip)のなかにコメント付きのサンプルコードがあるので、それを読む。highslide-3.3.12/index.html にサンプルコードへのリンクがある。

Highslide JS core - White 10px border and drop shadow

サムネイル画像のビューアを使うのに必要なコードをみてみる。必要なコードは(1)ライブラリの読み込み、(2)ページワイドの設定、(3)CSS、(4)サムネイル、(5)キャプションです。

ライブラリの読み込み。

<script type="text/javascript" src="highslide/highslide.js"></script> 

画像ファイルパス指定。ほかにページワイドな設定があればここでする。

<script type="text/javascript">    
    hs.graphicsDir = 'highslide/graphics/';
</script> 

ポップアップがロード中(Loading...)のまま止まるときは、画像ファイルパス指定がまちがっていることがある。

CSS設定。これは別ファイルとして、インクルードすることも可。

<style type="text/css"> 
* {
    font-family: Verdana, Helvetica;
    font-size: 10pt;
}
.highslide {
    cursor: url(highslide/graphics/zoomin.cur), pointer;
    outline: none;
}
.highslide-active-anchor img {
    visibility: hidden;
}
.highslide img {
    border: 2px solid gray;
}
.highslide:hover img {
    border: 2px solid white;
}
.highslide-wrapper {
    background: white;
}
.highslide-image {
    border: 10px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
    display: none;
    border: 5px solid white;
    border-top: none;
    padding: 5px;
    background-color: white;
}
.highslide-loading {
    display: block;
    color: black;
    font-size: 8pt;
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: none;
    padding: 2px;
    border: 1px solid black;
    background-color: white;
    
    padding-left: 22px;
    background-image: url(highslide/graphics/loader.white.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
}
a.highslide-credits,
a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
	font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
    color: white;
    background-color: gray;
}
 
a.highslide-full-expand {
    background: url(highslide/graphics/fullexpand.gif) no-repeat;
    display: block;
    margin: 0 10px 10px 0;
    width: 34px;
    height: 34px;
}
 
/* These must always be last */
.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}
</style>

サムネイル

<a href="images/full-image.jpg" class="highslide" 
   onclick="return hs.expand(this)"> 
  <img src="images/thumbnail.jpg" 
       alt="Highslide JS" title="Click to enlarge" 
       height="120" width="107" />
</a>

ポップアップキャプション

<div class="highslide-caption">This caption can be styled using CSS.</div>

.highslide の次の .highslide-caption が利用される。

Highslide HTML extension - Inline content

HTMLポップアップを使うのに必要なコードをみてみる。

まとめ

ポップアップする機能を実現するにはいろいろなライブラリがすでに存在しているところで、Highslide JS に注目したのは、ポップアップを自由に移動して配置することが出来る点である。

トラックバック - http://kdri.g.hatena.ne.jp/nakao_mitsuteru/20080329