HTMLファイルに貼り付けるシンプルなJavascriptギャラリーの基本構造[オープン][S][レスポンシブ対応]cpSHD_n05

・　このページの説明: 　このページは文字コード「UTF-8」で書いています。ソースコードの一部を他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。; 　既存のHTMLファイルに貼り付けて使う、レスポンシブデザイン対応でシンプルなJavascriptギャラリーの基本構造を解説しています。「アニメーション無し型」と「透かしアニメーション型」と「全スクロールアニメーション型」の3種類です。; 　掲載されているソースコードを目的のホームページのHTMLファイルのHEAD内とBODY内に貼り付け、データ部分を自分の写真に書き換えて使用してください。なお、ギャラリーだけの独立したページを作る場合は、 Javascriptギャラリーの基本構造をご覧ください。; 　このギャラリーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。個人・商用を問わず無料で自由に使用できます。有料版はありません。

⇔

</div>

</div>

</div>

・　アニメーション無しギャラリー id="my_gal10"

・　アニメーション無しギャラリーのHEAD内のソース: 　HEAD内に以下をコピーしてください。

・　アニメーション無しギャラリーのBODY内のソース: 　ギャラリーを貼り付ける場所に以下をコピーしてください。

</div>

</div>

</div>

"use strict";						//--strict（厳格）モード」で実行。

!function(o) {						//--ギャラリー要素oを引数にした無名関数。

}(document.getElementById("my_gal11"));			//--id="my_gal11"の要素を引数にする。

・　透かしギャラリー id="my_gal11": 　これ以降の見本で使用している画像は生成AIが作ったものです。植物の組み合わせに季節的な違和感がある画像を作らせてみました。

・　透かしギャラリーのHEAD内のソース: 　HEAD内に以下をコピーしてください。

・　透かしギャラリーのBODY内のソース: 　ギャラリーを貼り付ける場所に以下をコピーしてください。

</div>

</div>

</div>

・　全スクロールギャラリー id="my_gal12"

・　全スクロールギャラリーのHEAD内のソース: 　HEAD内に以下をコピーしてください。

・　全スクロールギャラリーのBODY内のソース: 　スライドショーを貼り付ける場所に以下をコピーしてください。

HTMLファイルに貼り付けるシンプルなJavascriptギャラリーの基本構造[オープン][S][レスポンシブ対応]cpSHD_n05_os