parts_thumbnail_changer1を配布中のテンプレートに配置したい場合

解説

1. 動作確認は、必ず配布中のテンプレートに対して行って下さい。
2. まず最初に、「1.フレーム選択」から「frame」をダウンロード＆解凍しておきます。
3. js/main.jsファイルがお手元にあるかチェック。
4. ある場合は、以下のコードだけをjs内にコピペします。
   //=============================================================== // 詳細ページのサムネイル切り替え //=============================================================== $(function() { // 初期表示: 各 .thumbnail-view に対して、直後の .thumbnail の最初の画像を表示 $(".thumbnail-view-parts").each(function() { var firstThumbnailSrc = $(this).next(".thumbnail-parts").find("img:first").attr("src"); var defaultImage = $("<img>").attr("src", firstThumbnailSrc); $(this).append(defaultImage); }); // サムネイルがクリックされたときの動作 $(".thumbnail-parts img").click(function() { var imgSrc = $(this).attr("src"); var newImage = $("<img>").attr("src", imgSrc).hide(); // このサムネイルの直前の .thumbnail-view 要素を取得 var targetPhoto = $(this).parent(".thumbnail-parts").prev(".thumbnail-view-parts"); targetPhoto.find("img").fadeOut(400, function() { targetPhoto.empty().append(newImage); newImage.fadeIn(400); }); }); });
5. ない場合は、冒頭でダウンロードしておいたframeフォルダからmain.jsファイル本体をコピーし、html下部（※jQueryの読み込みより後）に
   <script src="js/main.js"></script>
   の１行を追加して下さい。

画像が出ない場合

コピペしてきたhtmlファイルでは、画像ファイル名に1.jpg〜3.jpgを指定しています。
これらの画像ファイルがないと画像が空になるので、入れ替えて下さい。

余白バランスが崩れる場合

古いテンプレートをご利用の場合に、余白のバランスが崩れる場合が多くあります。
その場合、cssフォルダのstyle.cssに以下を１行ずつ追加し、都度プレビュー確認して下さい。
body * {box-sizing: border-box;}
nav,ul,li,ol {margin: 0;padding: 0;}
nav ul {list-style: none;}

※１行目のスタイルはbody要素全てに適用されます。場合によってはご利用中のテンプレート内のブロックの余白が小さくなってしまう事もありますので、その場合はbodyではなく特定の要素内をターゲットにしぼって下さい。

解決しない場合は

サポート掲示板からお問い合わせ下さい。
ただし、場合によっては解決できない場合もあります。予めご了承下さい。
また、テンプレートは未編集の状態にしてから質問をお願いします。ご自身でテンプレートを編集済みの場合は対応できませんのでご注意下さい。