- ・ みやけ工房INDEX
-
- ・ メインコンテンツ
-
IMGスライドショー
他のページに貼り付けて使用するスライドショーで、画像（img要素など）専用型です。
大部分のコンテンツの解説ページはアニメーション（またはアニメーションの組合せ）を変更できる仕様になっています。即ち、最初に表示されるアニメーション以外のアニメーションを使ったスライドショーの見本やソースコードも見る事ができます。
-
BLOCKスライドショー
他のページに貼り付けるタイプのBLOCKコンテンツ （文章やリンクや画像などを入れた四角い領域） 専用のスライドショーで、BLOCKの内部をHTMLで自由にデザインできます。
大部分のコンテンツの解説ページはアニメーション（またはアニメーションの組合せ）を変更できる仕様になっています。即ち、最初に表示されるアニメーション以外のアニメーションを使ったスライドショーの見本やソースコードも見る事ができます。
-
ホームページテンプレート
上記「貼り付ける～スライドショー」を使用したスライドショー、ギャラリー、拡大ビューアがあるページのテンプレート集です。
ページ全体のテンプレートで、他のページに貼り付けるタイプではありません。
- ・ ホームページ制作ツール他
-
- ・ コンテンツの題名のブラケット（角括弧[]）について
- [オープン]
全ソースコードを公開していて、解説ページに掲載してあるソースコードのみで動きます。
jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。
- [レスポンシブ]
レスポンシブデザインのホームページに二種類の型で対応しています。
一つは「アスペクト比維持型」で、画面の小さいデバイスでもアスペクト比（縦横比）を維持します。写真や画像など形状を維持する必要があるスライドショーに使います。
もう一つは「高さ維持型」で、画面の小さいデバイスではスライドショーの幅のみが小さくなり高さは維持されます。文章や画像などをまとめて表示するBLOCK型で、内容がはみ出さない様に高さを大きいままに維持して面積を確保します。
- [アクティブ]
スライドショーを表示しているWindowを非アクティブにする（最前面ではなくする・選択を外す・blurにする）と停止し、アクティブに戻す（最前面にする・選択する・focusにする）と再開します。
即ち、別のタブを開いたり、別のWindowで別の作業すると、スライドショーは一時停止して待機状態になります。
スライドショーの写真をクリックして、別のタブに設定したページを開いた時も一時停止します。
スライドショーのタブやWindowをクリックしてアクティブに戻すと再開します。
この機能は「カスタマイズ」でON／OFFを設定できます。
- [シャッフル]
記述したスライドショーデータを、ページを開いた時点でシャッフルする事ができます。
即ち、スライドショーがあるページを開くたびに異なる順番で実行できます。
「記述した順番で実行」または「シャッフルして実行」を「カスタマイズ」で選択できます。
- [実行時ランダム]
「カスタマイズ」でスライドショー実行時のアニメーションの動作方向を「ランダム」に設定できます。
当サイトでは、（ランダム型アニメーションのスライドショー以外は）通常型スライドショーの実行時のアニメーションの動作方向は右→左または下→上に、シャトル型は右→左と左→右・下→上と上→下の繰り返し、にしてあります。
即ち、次ボタンを押した時と同じ動作です。
それを（ランダム型アニメーション以外でも）動作方向をランダムにできます。
使用するアニメーションによって使い分けてください。
- [4画像]
通常のアニメーションは二枚の画像（またはBLOCK）を動かす事で作っています。
現在見えている画像と次の画像の二枚です。
[4画像]型ではこれを四枚の画像を動かしてアニメーションを表現しています。
- [多種類]
複数のアニメーションを用意して、スライドショーで画像（またはBLOCK）が切り替えるたびにアニメーションがランダムに選択され実行されます。
スライドショーの機能はこのままでアニメーションの組み合わせだけを変更したい場合は、解説ページ最下部「別のアニメーションの組み合わせを作る」をご参照ください。当サイトで提供している全アニメーションから複数の組み合わせを選択し、その見本とソースコードを表示した解説ページを見る事ができます。
[多種類]型以外でも解説ページ最下部に「別のアニメーションを見る」が用意してあり、スライドショーの機能は今のままで別のアニメーションに変更した解説ページを見る事ができます。
- [DrFlMw縦横連動]
縦横連動型のアニメーションでは、ドラッグ（パソコン）やフリック（スマホやタブレット）でも操作でき、縦横それぞれの操作でアニメーション方向も連動します。
即ちアニメーションは、モバイルでは縦フリックと横フリック操作でフリックした方向に動作し、パソコンでは縦ドラッグと横ドラッグでドラッグした方向に動作します。
マウスが使える環境ではマウスホイールでも操作でき、アニメーションは縦方向に動作します。
ドラッグ・フリック・マウスホイール操作は「カスタマイズ」で機能の有無を選択できます。
- [ガイド]
ガイドボタンで操作する事もできるスライドショーです。通常ガイドボタンは丸型で数字が書いてあり、クリックすると数字番目の画像（またはBLOCK）が表示されます。
- [divサムネイル]
サムネイルをimg要素ではなくdiv要素の背景として表示するタイプです。使用する画像のアスペクト比がバラバラな時などに利用できます。
- [サムネイル連動]
サムネイル一覧（ギャラリー）がスライドショーの動作に連動して横にスクロールするタイプです。
イメージとしては、平らな板の上にサムネイルが横一列に並んでいて最初と最後があり、それがスライドショーに連動して左右にスクロールします。
表示中の画像（またはBLOCK）のサムネイルが可能な限りサムネイル一覧の中央にスクロール移動します。
サムネイル一覧は、モバイルではスワイプで、パソコンではスクロールバーで動かせるため、目的の画像を素早く探す事ができます。
- [カルーセル連動]
サムネイル一覧（ギャラリー）がカルーセル型になっていて、スライドショーの動作に連動して横に永久スクロールするタイプです。
イメージとしては、サムネイル一覧の最初と最後が連結して輪を作り、それがスライドショーに連動して回転します。
表示中の画像（またはBLOCK）のサムネイルが常にサムネイル一覧の中央にスクロール移動します。
- [F]
画像（img要素）を使ったスライドショーで、使用する画像のアスペクト比に制限がないタイプです。
- [S]
画像（img要素）を使ったスライドショーで、アスペクト比が同じ画像を使用するタイプです。
[レスポンシブ]はアスペクト比維持型のみです。
高さ維持型では画像が歪んでしまいます。
- [連番]
ファイル名が連番の数字になっている画像を使うスライドショーです。
連番のファイル名とは、0.jpg・1.jpg・2.jpg や 12.jpg・13.jpg・14.jpg などの、連続する正の整数値として成り立つ数字をファイル名にした画像群です。
例えばファイル名が 700.jpg の画像は使えますが 007.jpg は使えません。
もちろん 2022_10.jpg や Y1953.jpg などの様に文字が入ったファイル名も使えません。
- [不連番]
0.jpgから99.jpgまでの間の不連続番号の写真を使用できるスライドショーです。
連番の様に数字が連続している必要はありません。
- [BLOCK]
IMG要素の画像ではなく、画像や文章やリンクなどをひとまとめにしたBLOCK要素をスライドさせる事ができるスライドショーです。BLOCK要素の中身は、あたかも小さなホームページを作る様にHTMLで記述してください。
[BLOCK]型で画像だけを表示する時はBLOCK要素の背景画像にその画像を設定し、BLOCK要素の中身を空にしてください。
- [マルチ]
IMG要素もBLOCK要素を混ぜて使えるスライドショーです。
IMG要素を使う倍は[レスポンシブ]はアスペクト比維持型のみです。
- [複]
一つのページに複数個を配置できるスライドショーです。
- [バナー]
画像だけではなくバナー（画像をクリックすると設定したページなどが開く）も扱えるスライドショーです。
[バナー]は表記していない場合もありますが、解説かソースのHTML部分には記述してあります。
- [セレクト]
ページを開いた後にスライドショー速度やアニメーション速度や表示方法などを視聴者が変更できるスライドショーです。
[セレクト]は表記していない場合もありますが、解説かソースのHTML部分には記述してあります。
- [部品削除可]
各種操作ボタン・ガイド・サムネイル一覧などのスライドショー部品が不要な時は、HTMLの該当箇所を削除すれば、その部品が無いスライドショーとして動作します。
[部品削除可]は表記していない場合もありますが、解説かソースのHTML部分には記述してあります。
- [asif]
Windowいっぱいに表示するスライドショーで、IFRAME用としても使用できます。
画像を表示する場合、個々のデータのスタイルbackground-size:をcontainにすれば常にWindowに収まるサイズで表示され、coverにすればWindowいっぱいに表示されて、はみ出す部分はトリミングされます。
[asif]は表記していない場合もありますが、解説には記述してあります。
- [asifof]
[asif]と同様にWindowいっぱいに表示するスライドショーですが、メイン画像は縮小表示しています。
その為アニメーション動作時に画像の一部が表示枠から溢れ出ます。当サイトのアニメーションはoverflow:hidden;で動作する様に作ってありますので、スクロール型など一部のアニメーションは[asifof]のスライドショーでは不自然に感じられます。「別のアニメーションの組み合わせを作る」時に注意してください。
[PR]
- ・ コンテンツと著作権について
-
当サイトは、スライドショーを中心にしたホームページ用のオリジナルJavaScriptプログラムを、種類別に分類して掲載しています。
全てのコンテンツの著作権は私が所有します。
-
全てのコンテンツを無料で使用できるようにしました。
同時に、インターネットエクスプローラや旧型のEdgeなど古いブラウザへの配慮や対応を終了しました。
これにより、一部のコンテンツは古いブラウザでは動作しなくなりますが、私の製作時間を１／２ ～ １／１０に短縮できます。
その分、より高性能なコンテンツを無料で提供していきますので、ご容赦ください。
-
サンプルは全てオープン版で、プログラムの全てが解説ページに記載されています。
詳細は下記、
オープン版について
をご覧ください。
-
当サイトに掲載しているプログラムサンプルを使用するには、ホームページ制作の経験と、ある程度のHTMLやCSSの知識が必要になります。
また、プログラムサンプルを使用（または改良して使用）して発生した不具合には、一切責任を負いません。
- ・ オープン版について
-
コンテンツ名に [オープン] や [オープンソース] があるオープン版コンテンツは、個人・商用を問わず無料で自由に永久に使用できます。
手続きや連絡は不要です。
プログラムの全てが解説ページに記載されていて、ソースコードをコピーすれば使用できます。
jQueryなどのプラグインやjQuery本体、JavaScripやcssの外部ファイル、などは一切不要です。
ただし、オープン版はWindowsのChromeでしか動作確認をしていませんので、ご自身で必要なOSとブラウザでの動作を確認し、必要ならばスタイルシートやスクリプトにベンダープレフィックスを加筆してください。
-
禁止事項
-
ソースコードに著作権表記がある場合これを削除する事を禁止します。
-
当サイトに掲載しているプログラムや画像などのコンテンツを非合法サイトや迷惑サイトで使用する事を禁止します。
- ・ サンプル使用上の注意事項
-
ホームページ（ＨＴＭＬファイル）はテキストファイルですから、「メモ帳」（Windowsの場合）などのテキストエディターで編集し、htmlまたはhtmという拡張子を付けて「名前をつけて保存」して作ります。
-
参考：Windows11の新メモ帳が使いづらくて困っている方へ。
新メモ帳を旧メモ帳に変更する方法は、単純に新メモ帳をアンインストールすれば自動的に旧メモ帳が復活します（新メモ帳に戻すには、マイクロソフト・ストアから新メモ帳を再度インストールしてください）。
新メモ帳をアンインストールすると、スタートやタクスバーのメモ帳のアイコンも消えてしまいますが、エクスプローラでパソコン内のテキストファイルをクリックすると旧メモ帳が開きます。
その状態ではタクスバーに旧メモ帳のアイコンが表示されているので、そのアイコンを右クリックして「タクスバーにピン留め」してください。
またエクスプローラで、PC＞Windows(C:)＞Windows＞System32ホルダー内にnotepadまたはnotepad.exeがあるので（Windowsの検索でnotepad.exeを検索し「ファイルの場所を開く」でも可）、右クリックから「スタートにピン留め」する事もできます。
-
当サイトのテンプレートタイプのサンプルを使用する場合も、「メモ帳」を開き、サンプルのソースコードを貼り付けて「名前をつけて保存」して作ります。
また、当サイトの貼り付けるタイプや部品タイプのサンプルを、既存のホームページに貼り付ける場合も、貼り付けるホームページファイルを「メモ帳」で開き、サンプルのソースコードを貼り付け、「名前をつけて保存」してください。
-
その際、一つのＨＴＭＬファイル内に複数の文字コードが混在すると、「文字化け」や「誤動作」が発生する事があります。当サイトのサンプルは、文字コードを「UTF-8」（一部は「 ANSI 」）で書いていて、解説文に使用しているコード名を明記しています。別の文字コードのソースに貼り付ける場合や、複数の場所から複数のソースを貼り合わせてページを作る場合、ページ全体の文字コードを統一して「名前を付けて保存」し直してください。
-
ＨＴＭＬファイルの編集に、ホームページビルダーなどの編集ソフトを使用する場合や、ホームページ管理業者が提供する編集ページを使用する場合も、それぞれのヘルプ等を参照して「文字化け対策」を行ってください。
また、同じページ内に複数のJavaScriptプログラムがある場合、変数名や関数名などの重複により誤動作する事があります。重複した変数名や関数名などを変更してください。
-
また、サンプルのHTML部分には説明がありデザインを改良し易く作ってありますが、JavaScript部分は圧縮タイプ（インデントと改行を削除など）で説明もありません。私は多くの解説ページをJavaScriptで自動製作しているため、サンプルのソースコード内に改行や空白があると作業が複雑なってしまいます。ご容赦ください。圧縮タイプを整形し直すには、Chromeのデベロッパーツールか、無料のWebサービスをご利用ください。
-
ネットショップでサンプルを利用する場合、各ネットショップ運営業者の禁止事項等の規則のため、解説ページに記載した制作方法ではプログラムを使用できない事があります。
規則をよく調べ、JavaScriptプログラムの使用が可能ならば、各ネットショップの独自の制作方法でページを作り、動作を確認してください。
- ・ スライドショーとデータの記述方法
-
当サイト内のスライドショーのロジックは大きく分けて３種類あります。何らかの操作をすると自動停止するタイプ（１）、操作をしても停止しないタイプ（２）、一時停止と完全停止を分けているタイプ（３）です。
（１）は「start」「stop」ボタン、（２）は「play」「pause」ボタン、（３）は「go」「stop」ボタンを使用して区別しています。
ただし、それぞれの中間タイプもありますので、解説をご参照ください。
-
スライドショーデータの記述場所は、HTML部分やスタイルシート部分に書くタイプと、JavaScript部分に書くタイプとがあります。
各サンプルの解説ページにそのサンプルの記述方法が書いてあります。類似したスライドショーでも記述方法が異なる場合がありますのでご注意ください。
-
画像ファイル名は、画像がスライドショーと同じホルダーにある場合は「～.jpg」などとファイル名だけを、別のホルダーにある場合は「../～.jpg」（一つ上のホルダー）「../../～.jpg」（二つ上のホルダー）などの相対表記で書いてください。また、一部のサンプルで使用している様に「http://～」で始まる絶対表記でもかまいません。
また、題名部分はHTMLで文字を修飾する事ができ、コメントを書く事もできます。
-
ID名とクラス名で、ID名は固有の名前で、ページ内で唯一である必要があり、複数個存在すると誤動作します。クラス名は共通の性質を持つグループ名で、ページ内に複数個存在するものです。両者を混同しないように注意してください。また、サンプル内のID名やクラス名を変更すると動作しなくなる事があります。
-
スライドショーの画像が表示されない方は、
パソコンが「拡張子を表示しない」設定になっていると、0.jpg と名前を付けたつもりでも、0.jpg.jpg と二重に拡張子が付いている可能性があります。画像ファイルを右クリックして「プロパティー」で確認してください。また、ファイル形式がJPG形式であること、拡張子が小文字であること、なども確認してください。
- ・ アップロード
-
制作したＨＴＭＬファイルやホームページで使用する写真ファイルを、パソコンの中からネット上の自分のホームページスペースにコピーする事をアップロードと言います。パソコンのハードディスクからサービス業者のコンピュータ（サーバーと呼ぶ）のハードディスクにファイルをコピーするわけです。ホームページスペースも、パソコン内と同様に、ホルダー（ディレクトリーと呼ぶ事もある）を多重に作ることができます。ページ数が多くなってきたら、カテゴリーごとにホルダーを作ると便利です。
-
アップロードは、専用のソフト（フリーソフトのFFFTPが有名）や、ホームページスペース業者が提供するアップロードページを利用します。操作方法はそれぞれのヘルプをご参照ください。
- ・ みやけ工房へのメール
-
メールソフトをお使いの方は下の「みやけ工房へのメール」をクリックしてください。
メールソフトを使わずにWebメールで送信する方は下のメールアドレスをコピーして使用してください。
-
みやけ工房へのメール
- ・ スライドショーアニメーションの見本
-
● 当サイトのスライドショーで使用しているアニメーションを体験して頂く為の見本スライドショーです。
この見本スライドショーで扱えるアニメーションはNo.1からNo.タイプで、このページを開くとランダムに決定したアニメーションから始まり、スライドショーの切替えの度にアニメーションも切替わっていきます。
見本スライドショーの種類は「ガイド付きカルーセル連動型スライドショーギャラリー」です。
● サムネイルの上部の「prev」「next」ボタンのクリックで前のNo次のNoのアニメーションに変わり、「Jump」ボタンでランダムなNoにジャンプできます。
ボタンの右に現在のNoとアニメーション名が表示されています。
その右に、アニメーションの切替え方法のセレクトボックスがあります。最初は「ランダム」で、「切替えない」「No順通り」に変更できます。
その右のセレクトボックスではスライドショー速度とアニメーション速度の変更ができます。
また、サムネイルの下のタイプ別セレクトボックスでアニメーションを指定する事もできます。
● なお、タイプ名でDrFlMw縦横連動型とはドラッグ・フリック・マウスホイールで操作した方向にスライドショーも動くタイプです。
「前」と「次」ボタン操作では「前の画像が左⇒右」と「次の画像が右⇒左」に動き、マウスホイール操作では回転方向に動きます。
ただし、DrFlMw縦横連動型もランダム型も通常型も（シャトル型以外は）自動スライドショー時はランダムな方向に動きます。
アニメーションの名前を表示
▲