画像の拡大表示Highslide JS
サムネイル画像を拡大表示するHighslide JSを利用してみました。
サムネイルをクリックするとウィンドウ内で拡大し、もう一度クリックすると元に戻ります。
キャプションをつけることもでき、ドラッグドロップで移動もできます。
本来はフォトギャラリー用なんでしょうが、ペーパーグッズやカレンダーでのサンプル表示に活用できそう！
2007年カレンダーと、2007年カレンダー：ハガキサイズに設定してみました。
矢印キーで次の画像へ移動できるのがおもしろい。興味のある方はお試しください♪
以下、覚え書き。
画像を拡大表示するHighslide JS
参考にさせていただいたサイト：
小粋空間：Highslide JS でサムネイル画像を拡大表示する
１．Highslide JSをダウンロードする。
現時点ではVersion:2.2.8でした。
２．highslideフォルダを丸ごとアップ
htmlファイル、imagesフォルダはサンプルのためアップ不要。
私はシャドー付きの角丸にしてみました。
３．スクリプトの記述。
</head>直前に設定。
<script type="text/javascript" src="<$MTBlogURL$>highslide/highslide.js"></script>
<script type="text/javascript">
hs.graphicsDir = 'http://domain/highslide/graphics/';
hs.outlineType = 'rounded-white';
window.onload = function() {
hs.preloadImages(5);
}
</script>
<script type="text/javascript">
hs.graphicsDir = 'http://domain/highslide/graphics/';
hs.outlineType = 'rounded-white';
window.onload = function() {
hs.preloadImages(5);
}
</script>
４．ポップアップ拡大表示用div要素を設定。
body 要素のすぐ後に直接設定。
<div id="highslide-container"></div>
５．タグ設定
キャプションを表示したいので
<a href="画像URL" class="highslide" onclick="return hs.expand(this)">
<img src="サムネイル画像URL" alt="..." id="image01" />
</a> <div class="highslide-caption" id="caption-for-image01"><p>タイトル</p></div>
<img src="サムネイル画像URL" alt="..." id="image01" />
</a> <div class="highslide-caption" id="caption-for-image01"><p>タイトル</p></div>
６．CSSの設定
White outline with rounded corners（角丸ボーダー・ドロップシャドウ）の場合
.highslide {
cursor: url(http://www.kfstudio.net/blog/highslide/graphics/zoomin.cur), pointer;
outline: none;
}
.highslide img {
border: 2px solid gray;
}
.highslide:hover img {
border: 2px solid white;
}
.highslide-image {
border: 2px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
display: none;
border: 2px solid white;
border-top: none;
font-family: Verdana, Helvetica;
font-size: 10pt;
padding: 5px;
background-color: white;
}
.highslide-display-block {
display: block;
}
.highslide-display-none {
display: none;
}
.highslide-loading {
display: block;
color: white;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 3px;
border-top: 1px solid white;
border-bottom: 1px solid white;
background-color: black;
/*
padding-left: 22px;
background-image: url(highslide/graphics/loader.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;
}
cursor: url(http://www.kfstudio.net/blog/highslide/graphics/zoomin.cur), pointer;
outline: none;
}
.highslide img {
border: 2px solid gray;
}
.highslide:hover img {
border: 2px solid white;
}
.highslide-image {
border: 2px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
display: none;
border: 2px solid white;
border-top: none;
font-family: Verdana, Helvetica;
font-size: 10pt;
padding: 5px;
background-color: white;
}
.highslide-display-block {
display: block;
}
.highslide-display-none {
display: none;
}
.highslide-loading {
display: block;
color: white;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 3px;
border-top: 1px solid white;
border-bottom: 1px solid white;
background-color: black;
/*
padding-left: 22px;
background-image: url(highslide/graphics/loader.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;
}
７．拡大画像にオンマウスしたときに表示されるテキストを日本語に。
highslide.jsの
restoreTitle : 'Click to close image, click and drag to move. Use arrow keys for next and previous.',
の部分を
restoreTitle : 'クリックすると元に戻ります。矢印キーで次の画像に移動します。',
にして、漢字コードをUTF8で保存して再アップ。
全てのページを書き換えるのはとても大変な作業になりそうなので・・これから作るページに設定しようかなと思います。
by sachie : 2007年01月26日
トラックバック
このエントリーのトラックバックURL:
