はじめに
本グログでは、これまでにLightbox2やColorboxを解説していますが、今回は第三弾としてKwicksの使用方法を解説します。
2013年12月27日 09時43分
本グログでは、これまでにLightbox2やColorboxを解説していますが、今回は第三弾としてKwicksの使用方法を解説します。
作業の前提条件は、下記のとおりです。
| ソフトウエア | バージョン |
|---|---|
| OS | Windows 7 Ultimate 32bit |
| Cygwin | Setup Version 2.831 |
設置に必要なアーカイブをダウンロードし、解凍します。
$ cd /tmp/demo $ wget -q https://github.com/jmar777/kwicks/archive/master.zip $ unzip -q master.zip $ rm -f master.zip $ mv kwicks-master kwicks
Kwicksのスタイルシートを、HTMLファイル中に指定します。
CTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>021-1</title>
<link href="kwicks/jquery.kwicks.min.css" rel="stylesheet">
</head>
<body style="background:#000; width:720px;">
jquery.kwicks.min.jsを、HTMLファイル中に指定し、Kwicksのロードを行うJavaScriptを 追加します。
<script src = "jquery-1.10.2.min.js"></script>
<script src = "kwicks/jquery.kwicks.min.js"></script>
<script type = "text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
maxSize : 300,
spacing: 0,
behavior: 'menu'
});
});
</script>
</body>
</html>
表示する画像ファイルを、HTMLファイル中に指定します。
ここでは、以前の記事で使用した画像を指定しま
す。
指定には、ul～liタグを使用し、ulタグにKwicksのクラスを指定します。
<ul class = "kwicks kwicks-horizontal">
<li><a href="img/016-01.png" target="_blank"><img src="img/016-01.png" width="300"></a></li>
<li><a href="img/016-02.png" target="_blank"><img src="img/016-02.png" width="300"></a></li>
<li><a href="img/016-03.png" target="_blank"><img src="img/016-03.png" width="300"></a></li>
<li><a href="img/016-04.png" target="_blank"><img src="img/016-04.png" width="300"></a></li>
<li><a href="img/016-05.png" target="_blank"><img src="img/016-05.png" width="300"></a></li>
<li><a href="img/016-06.png" target="_blank"><img src="img/016-06.png" width="300"></a></li>
</ul>
11行目で画像のサイズを300pxに指定し、先のJavaScriptの24行目のmaxSizeでも同一サイズを指定します。
これにより、画像をスライドした時に、指定した画像サイズで表示することができます。仮に、300pxよりも小さい値をmaxSizeに指定するとmaxSizeで指定したサイズでしか表示できません。25行目のspacingでは、各画像間の隙間をゼロに指定しています。デフォルトが5pxですので画像間の隙間を無くす場合、ゼロを指定します。
26行目のbehaviorが、画像の表示方法をメニュー形式または、スライドショー形式で指定します。デフォルトは、menuですが、slideshowを指定することもできます。
ページを表示すると、画像がメニュー形式で表示され、クリックすると元画像が別ウインドウで表示されます。
画像を、スライドショー形式で表示します。
24行目と26行目を変更するだけで、スライドショー形式で表示できます。
$().ready(function() {
$('.kwicks').kwicks({
minSize : 84,
spacing: 0,
behavior: 'slideshow'
});
});
</script>
</body>
</html>
24行目では、minSizeとして84pxを指定しています。
これは、領域のサイズ(720px) = 画像サイズ(300px) + 5(枚)×画像の表示サイズ(84px)
とするためです。もちろん、minSizeを元画像のサイズ(300px)で指定しても間違いではありませんが、この場合スライド幅がゼロになりますので、スライド表示できません。
したがって、minSizeには、元画像のサイズ未満を指定し、なおかつ領域のサイズを越えないようにサイズを算出する必要があります。つまり、領域サイズ(R)に対して、1枚あたり(S)ピクセルの画像を(N)枚表示したい場合
minSize = (R - S) / N
で計算できます。
ページを表示すると、画像がスライドショー形式で表示され、クリックすると元画像が別ウインドウで表示されます。
なお、minSizeに10pxを指定し、widthに350pxを指定すると、クールなスライドショーになります。
<body style="background:#000; width:350px;">
$().ready(function() {
$('.kwicks').kwicks({
minSize : 10,
spacing: 0,
behavior: 'slideshow'
});
});
