ホームページテンプレートを無料配布中
商用利用もWEB制作業者様利用も全て無料

テンプレートパーティー

サムネイルスライドショーについて

フリープログラム利用規約

  • 当サイトで配布中のフリープログラムは全て有限会社クリタス様に所有権があります。
    また、当サイト(Template Party)のテンプレート以外へ利用する場合は必ずこちらをお読み下さい
  • 開発初期段階のため、不具合が出た場合はお手数ですがお知らせ下さい。尚、フリープログラムにつき、不具合により利用者側に何らかの損害が発生した場合でも当サイト及び開発業者での保障は一切行いません。

当プログラムの機能

  • サムネイル(縮小)画像を複数枚並べ、横にスライドさせていくプログラムです。
  • パーツはhtmlタグの通常の編集で対応します。
  • 通常のhtmlなので、それぞれのサムネイル画像にリンク設定ももちろん可。

サムネイルスライドショーが既に盛り込まれているテンプレート

以下のテンプレートはすでにサムネイルスライドショーが設定されているタイプなので、ダウンロード後、すぐにそのままご利用頂く事が可能です。また、その他のテンプレートにも随時サムネイルスライドショーを設定予定です。

【注意点】
上記タイプのテンプレートには、通常のスライドショー(大きな画像が1枚ずつフェードイン・アウトするタイプ)も設定されています。ここにサムネイルスライドショーが入ると2つのプログラムが存在し、閲覧環境によっては動きがぎこちなくなる可能性があります。気になる場合はどちらかのスライドショーに限定してご利用下さい。

使用テンプレートを手元に準備しておいて下さい

今回の例題では、tp_shop2テンプレートを使いますが、基本的にどのテンプレートにもサムネイルスライドショーは設置できます。

尚、上のステップの注意書きにありますが、メインのスライドショーと2つ入っていると動きにムラが出る場合がある為、上記サンプルはメインスライドショーは固定画像化しておいてあります。

サムネイルスライドショー用プログラムをダウンロードします

rollimg.zip (rollimgフォルダ内にrollimg.jsが梱包されています)
をダウンロードして解凍します。

解凍したプログラムをご利用のテンプレートに移動します

ご利用のテンプレートにすでにjsフォルダがある場合は中身のjsファイル1枚だけをお手元のjsフォルダに移動します。jsフォルダがない場合は、jsフォルダを新たに作ってその中にrollimg.jsファイルを入れて下さい。

サムネイルスライドショーを配置するhtmlを開きます

html側が見えるようにし、下の方にある</body>の上の行に以下のタグを入れます。

サムネイルのパーツをhtmlに配置します

画像を表示させたい部分に以下のタグを入れます。必要に応じて画像ファイル名やリンク先を変更してご利用下さい。
※roll_windowの行にあるwidthの値だけ、ご利用のテンプレートのmainブロック幅に合わせて下さい。テンプレートによってはサイズがずれる場合がありますのでその場合は微調整してみて下さい。

id="roll_window"」は、画像の見えている部分(窓)の設定です。width(幅)とheight(高さ)を実際の表示にあわせて設定してください。
id="roll_contents"」は、表示する画像の設定です。
この横に長い画像部分の窓から見えている部分を移動させることで、スクロールさせていますので、窓より横に長く設定する必要があります。
枚数を増やしたい場合、例えば10枚から20枚にしたい場合、html側の「roll_contents」に設定されている「width:1100px;」を「width:2200px;」にして下さい。1枚あたり110pxでカウントしてもらえばOKです。
サンプルでは、10枚の画像を横に並べた物ですが、1つの横に長い画像でもかまいません。

roll_windowとroll_contentsのIDを変更する場合は、rollimg.jsの最後の行のIDも同じものに変更してください。

スタイルを追加します

cssフォルダ内のstyle.cssをエディタで開き、以下のタグを追加します。

※html側と同様に、#thumbnailのwidthの値だけ、ご利用のテンプレートのmainブロック幅に合わせて下さい。テンプレートによってはサイズがずれる場合がありますのでその場合は微調整してみて下さい。

補足

当プログラムと通常のスライドショーを併用する場合、動作環境により多少動きが鈍く見える場合があります。予めご了承下さい。

↑ PAGE TOP