09時43分はじめに本グログでは、これまでにLightbox2やColorboxを解説していますが、今回は第三弾としてKwicksの使用方法を解説します。作業の前提条件は、下記のとおりです。必要なアーカイブをダウンロードし、解凍します。kwicksCSSファイルの指定Kwicksのスタイルシートを、HTMLファイル中に指定します。</body></html>メニュー形式で表示する表示する画像ファイルを、HTMLファイル中に指定します。指定には、ul~liタグを使用し、ulタグにKwicksのクラスを指定します。</ul>11行目で画像のサイズを300pxに指定し、先のJavaScriptの24行目のmaxSizeでも同一サイズを指定します。これにより、画像をスライドした時に、指定した画像サイズで表示することができます。仮に、300pxよりも小さい値をmaxSizeに指定するとmaxSizeで指定したサイズでしか表示できません。25行目のspacingでは、各画像間の隙間をゼロに指定しています。デフォルトが5pxですので画像間の隙間を無くす場合、ゼロを指定します。26行目のbehaviorが、画像の表示方法をメニュー形式または、スライドショー形式で指定します。デフォルトは、menuですが、slideshowを指定することもできます。ページを表示すると、画像がメニュー形式で表示され、クリックすると元画像が別ウインドウで表示されます。デモは、021-1.htmlからご覧頂けます。ファイルは、021-1.zipからダウンロードできます。スライドショー形式で表示する画像を、スライドショー形式で表示します。24行目と26行目を変更するだけで、スライドショー形式で表示できます。</body></html>24行目では、minSizeとして84pxを指定しています。5(枚)×画像の表示サイズ(84px)とするためです。minSizeを元画像のサイズ(300px)で指定しても間違いではありませんが、この場合スライド幅がゼロになりますので、スライド表示できません。したがって、minSizeには、元画像のサイズ未満を指定し、なおかつ領域のサイズを越えないようにサイズを算出する必要があります。ページを表示すると、画像がスライドショー形式で表示され、クリックすると元画像が別ウインドウで表示されます。デモは、021-2.htmlからご覧頂けます。ファイルは、021-2.zipからダウンロードできます。minSizeに10pxを指定し、widthに350pxを指定すると、クールなスライドショーになります。});デモは、021-3.htmlからご覧頂けます。ファイルは、021-3.zipからダウンロードできます。