これでちょっと立ち往生。次の機能が必要な Shopify ショップの製品画像ギャラリーを構築しています。
- 各商品画像のサムネイル
- メイン画像「コンテナ」に入る中型画像
- 中サイズの画像をクリックするとライトボックスとして表示されるフルサイズの画像
したがって、サムネイルをクリックすると、中サイズの画像が画像コンテナーに読み込まれ、その中サイズの画像をクリックすると、フルサイズの画像がライトボックス オーバーレイとして表示されます。
ここに私のマークアップがあります:
<div id="imgcontainer">
<a href="assets/product-fullsize.jpg" class="overlay"><img src="assets/product-main.jpg" alt="product-main" width="360" height="231" /></a>
</div> <!-- End div#imgcontainer -->
<div id="thumbs">
<div class="thumbnav">
<ul>
<li><a href="assets/medium-1.jpg"><img src="assets/thumb-1.jpg" alt="thumb-1" width="100" height="70" /></a></li>
<li><a href="assets/medium-2.jpg"><img src="assets/thumb-2.jpg" alt="thumb-2" width="100" height="70" /></a></li>
<li><a href="assets/medium-3.jpg"><img src="assets/thumb-3.jpg" alt="thumb-3" width="100" height="70" /></a></li>
<li><a href="assets/medium-1.jpg"><img src="assets/thumb-1.jpg" alt="thumb-1" width="100" height="70" /></a></li>
<li><a href="assets/medium-2.jpg"><img src="assets/thumb-2.jpg" alt="thumb-2" width="100" height="70" /></a></li>
<li><a href="assets/medium-3.jpg"><img src="assets/thumb-3.jpg" alt="thumb-3" width="100" height="70" /></a></li>
</ul>
</div> <!-- End div#thumbnav -->
<a href="javascript:void(0);" class="tbpr"> </a>
<a href="javascript:void(0);" class="tbnx"> </a>
</div> <!-- End div#thumbs -->
</div> <!-- End div#main -->
誰でもこれを行うための最良の方法をお勧めできますか? Shopify は「Liquid」と呼ばれる言語を使用しており、「foreach」ステートメントを使用して画像のマークアップを出力したり、3 種類の画像 URL (サムネイル、中サイズ、フルサイズ) だけを出力したりすることもできます。
画像のファイル名と場所はオンザフライで生成されるため、単純な命名規則はないことに注意してください。そのため、ファイル名の「中」部分を「フルサイズ」などに置き換えることはできません。
ご指摘ありがとうございます。
大須