火曜日, 6月 04, 2013

ウェブサイトに簡単に設置できるシンプル軽量スライドショー【 kamome.js 】

kamome.js


特徴


  • ウェブページの好きな位置に自由なサイズで設置できます。
  • スライドごとにリンク先を設定することができます。
  • コントローラーの表示/非表示は選択できます。
  • 自動再生のオン/オフ、表示間隔、トランジション(フェード)のスピードなどを指定できます。
  • 複数スライドショーの設置に対応しています。


  1. caption01
  2. caption02
  3. caption03
  4. caption04
  5. caption05
  6. caption06
  7. caption07
  8. caption08
  9. caption09
  10. caption10
  11. caption11
  12. caption12
  13. caption13
  14. caption14
  15. caption15
  16. caption16
  17. caption17
  18. caption18
  19. caption19
  20. caption20
  21. caption21

 

設置方法 

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>

※css, js の順でリンクして下さい。folder-pathは設置先に応じて書き換えます。

次に、スライドを設置したい場所にイメージのリストを作成します(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 = [
 // 1つ目のスライドショーの設定
 {
  elem_id :  'top_slideshow',
  slide_width :  320,
  slide_height :  215
 },
 // カンマで区切った後、2つ目のスライドショーの設定
 {
  elem_id :  'th_slideshow',
  slide_width :  146,
  slide_height :  110,
  controll_panel : false
 }
 // 最後尾の設定の後にはカンマを付けないでください。
];