kamome.js
特徴
- ウェブページの好きな位置に自由なサイズで設置できます。
- スライドごとにリンク先を設定することができます。
- コントローラーの表示／非表示は選択できます。
- 自動再生のオン／オフ、表示間隔、トランジション（フェード）のスピードなどを指定できます。
- 複数スライドショーの設置に対応しています。
設置方法
1.ダウンロード
zip ファイルをダウンロード、解凍し、解凍されたフォルダ(kamomeフォルダ)を、スライドショー設置先のHTMLから読み込める場所へ移動して ください。2.ファイル文字コードの確認、変更（必要時）
JavaScript を動作させるためには、HTML自体とHTMLからリンクするファイル(js, css等)の文字コードが一致している必要があります。ダウンロードいただいたkamome.jsファイルの文字コードは utf-8 です。設置先HTMLの文字コードがutf-8でない場合には、kamome.jsまたはHTMLの文字コードを変更し、両ファイルの文字コードを一致さ せてください。
3.HTMLの編集
まず、設置先となるHTMLから kamome.css, kamome.js 両方へリンクします。HTMLの<head>内へ下記を追加してください。 <style type="text/css">@import "folder-path/kamome/kamome.css";</style>
<script type="text/javascript" src="folder-path/kamome/kamome.js"></script>
次に、スライドを設置したい場所にイメージのリストを作成します（ol）。この部分がスライドショーとなります。
リストは全体を divで囲みます。divにはclassとidが必須です。idは設置先に応じて任意で設定可能です
<div class="slideshow" id="top_slideshow">
<ol>
<li><img src="your_image_folder/image01.jpg" width="320" height="215" alt="caption01" /></li>
<li><img src="your_image_folder/image02.jpg" width="320" height="215" alt="caption02" /></li>
<li><img src="your_image_folder/image03.jpg" width="320" height="215" alt="caption03" /></li>
</ol>
</div>※イメージは必用な枚数設置できますが、数が多すぎるとページの読み込みに時間がかかります。
4.スライドショーの設定
kamomeフォルダにある、kamome.jsを開き、30行目から始まる以下の部分で設定を行います。
太字の部分を必要に応じて 書き換えてください。カンマやクォーテーションを消さないよう注意してください。
var configurations = [
{
elem_id : "top_slideshow", //画像リストを囲むdivのid（HTML上の値と同じ）
slide_width : 320, //横サイズ（ピクセル値、数値のみ）
slide_height : 215, //縦サイズ（ピクセル値、数値のみ）
stay : 5000, //表示間隔（ミリ秒：1000 = 1秒）
fade_gain : 1.0, //トランジションの加速度（0.5 ~ 15.0程度で調整）
controll_panel : true, //コントロールパネルの表示／非表示 true or false
panel_font_size : '76.92%', //コントロールパネルの文字サイズ（単位はCSSの記法に準じます、%, em, px等）
play : true, //自動再生 true or false
to : true, //再生方向 true or false
elem_class_name : "slideshow" //画像リストを囲むdivのclass値。通常は変更しないでください
}
];基本的な設置は以上で完了です。HTMLをブラウザで開いて、あなたのスライドショーを確認してみましょう。
オプション機能
1. キャプションやリンクの設定
- キャプション：画像のalt属性がキャプションとして表示されます。
- リンク：画像をaタグで囲むと、キャプションからURLへリンクします。
- 新しいウインドウで開く：上記のaタグに rel="newWin" を付け加えると、リンク先を新しいウインドウで開きます。
<div class="slideshow" id="top_slideshow">
<ol>
<li><img src="your_image_folder/image01.jpg" width="320" height="215" alt="caption01" /></li>
<li><a href="URL"><img src="your_image_folder/image02.jpg" width="320" height="215" alt="caption02" /></a></li>
<li><a href="link_path" rel="newWin"><img src="your_image_folder/image03.jpg" width="320" height="215" alt="caption03" /></a></li>
</ol>
</div>2. 複数スライドの設置
Ver.1.1 より、複数スライドショーの設置に対応しました。また、不要な設定は省略できます。
var configurations = [
// １つ目のスライドショーの設定
{
elem_id : 'top_slideshow',
slide_width : 320,
slide_height : 215
},
// カンマで区切った後、2つ目のスライドショーの設定
{
elem_id : 'th_slideshow',
slide_width : 146,
slide_height : 110,
controll_panel : false
}
// 最後尾の設定の後にはカンマを付けないでください。
];
