メディア・画像
サムネ連動ギャラリー
下段のサムネをタップ/クリックするとメイン表示が切り替わる。選択中サムネをハイライトし、切替時にフェードイン。
プレビュー
クリック
操作クリック／タップで動きます。
コード（コピーして使えます）
<div class="tg-root">
<!-- メイン表示 -->
<div class="tg-main" id="tgMain">
<span class="tg-main-label" id="tgLabel">写真 A</span>
</div>
<!-- サムネ列 -->
<div class="tg-thumbs" role="list">
<button class="tg-thumb active" data-bg="linear-gradient(135deg,#2b50c7,#5a7bff)" data-label="写真 A" aria-label="写真 A を表示" role="listitem"></button>
<button class="tg-thumb" data-bg="linear-gradient(135deg,#e86c4d,#f5a623)" data-label="写真 B" aria-label="写真 B を表示" role="listitem"></button>
<button class="tg-thumb" data-bg="linear-gradient(135deg,#2dc793,#2b50c7)" data-label="写真 C" aria-label="写真 C を表示" role="listitem"></button>
<button class="tg-thumb" data-bg="linear-gradient(135deg,#9b59b6,#e86c4d)" data-label="写真 D" aria-label="写真 D を表示" role="listitem"></button>
</div>
</div>