imgchg.jsを同一ページで複数使う方法。（2020/10/12）

一般のhtmlテンプレートの詳細ページなどで、サムネイルで画像を切り替える処理を行うタイプがありますが、そのブロックを複数設置する方法のご紹介です。

デモページをみる

設定方法

1. 複数設置用のimgchg（imgchg2.js）ファイルをダウンロードします。
   imgchg2.zipをダウンロード
2. imgchg2.zipをダウンロードしたら解凍し、imgchg2.jsファイルをお手元のテンプレートフォルダのjsフォルダに移動して下さい。
3. htmlの設定をします。
   今回はfudosan12をサンプルで使用します。
   fudosan12の場合、item.htmlに１セット入っていますが、このページで２セット使えるよう編集していきます。
4. item.htmlを開き、html下部に元々入っているimgchg_pack.jsの読み込みブロックを丸ごと置き換えます。
   
   ↓以下をコピペして使って下さい。
   <!-- この後が画像切り替えの処理です --> <script src="js/imgchg2.js"></script> <script> // 最初の切り替え部分 var imcg = new ImageChange(); imcg.start('item_image1', 'item_image2', 'thumbnail', 'imgcaption', 1, 10); // 2番めの切り替え部分 var imcg2 = new ImageChange(); imcg2.start('item_image3', 'item_image4', 'thumbnail2', 'imgcaption2', 1, 10); </script> <!-- ここまで -->
5. 続いて、画像があるブロックの設定です。
   元々あるサムネイル切り替えのブロックはひとまずそのままで、同じタグをコピペで追加します。
   
6. コピペしたタグの以下部分を書き替えます。
   
7. cssを編集します。
   「thumbnail」でテキスト検索をかけるとヒットしますので、そこに以下を追加します。
   ご利用のテンプレートにより、内容は若干異なると思います。わからない場合はサポート掲示板からご質問下さい。
   
   
   補足：
   お手元のテンプレートには、「#item_image」という文字列が入っている場合があるかもしれません。
   これは特になくても問題ないので、今回は見やすくする為に削除しました。
   
8. あとは、cssやhtmlが理解できている人は、「id="item-image"」をclassに変更して下さい。
   同じ名前のidは同一のhtml内では使ってはいけない決まりなのですが、動作には問題ないのでわからない人はそのままでも構いません。
   classに変更する際は、cssも変更が必要です。
9. 以上です。