firstAudience : Website Design & Development

kamome.js

  1. Balcerona Airport
  2. Temple de la Sagrada Famiilia
  3. Temple de la Sagrada Famiilia
  4. Cordobes
  5. Barcelona 508
  6. Jaume 1
  7. Placa Nova
  8. Barcelona 516
  9. Barcelona 165
  10. Barcelona 174
  11. Temple de la Sagrada Famiilia
  12. Temple de la Sagrada Famiilia
  13. Barcelona 131
  14. Barceloneta
  15. Barceloneta
  16. Barcelona 250
  17. Placa Nova
  18. Via Laietana
  19. Barcelona 265

ウェブサイトに設置できるシンプル・軽量なスライドショープログラム
Ver.1.14 update 2012.4.18 / First version released at 2009.8.10
License : The MIT License

特徴

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

最新 ver.1.14
トランジション(切替えのアニメーション)がなめらかになりました。

ライセンス

The MIT License :
スクリプト内にあります著作権及びライセンスの表記を残していただければ商用/非商用を問わず無料でご利用いただけます。再配布やカスタマイズ利用についてはライセンス本文に準じて利用願います。

設置方法

  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
	}
	// 最後尾の設定の後にはカンマを付けないでください。
];