【2STEP】カラーミーショップで商品画像をクリックしたら拡大させるライブラリを実装

相談者にゃんぴ

「突然、クライアントさんがカラーミーショップで画像クリックしたら拡大させたいっていってきたんにゃ。どうしよどうしよ。」

どこにいてもデザインサポート Anywhere,Design.|デザイナーAyakaの似顔絵イラスト
Ayaka

「超かんたんに実装できる方法みつけたから共有するよ!」

この記事で解決できること

  • 【たったの2STEP】カラーミーショップ内の、商品詳細ページで「商品画像をクリックしたら、画像が拡大される」を実装!
  • ソースをコピペするだけの最速実装!

【STEP1】まずはLIGHTBOXのソースをコピペするよ!

わけあって、外部にソース置いたりが無理なので、ソースをぺっと貼りました。

商品詳細でしか使わない場合は、商品詳細ページの「HTML編集」内にコピペしてください!

カラーミーショップ|HTML編集管理画面の参考画像

参考ソース

<script src="//cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox-plus-jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/css/lightbox.min.css" />

STEP2】商品画像のリンクに魔法をかけるよ!

aタグの中に、 rel=”lightbox”を記述したら完成!

imgをaで囲むだけ。relを追加するだけ。

参考ソース

<a href="<{$product.img_url}>" rel="lightbox">
    <img src="<{$product.img_url}>"/>
</a>

うそだろ…これだけで実装完了だと…?

by Ayaka

というわけで、お困りの方は実践してみてくださいませ!

1600 1200 Ayaka@Designer