楽天PC商品ページのコーディングについて

Question

■下記商品ページのPC用販売説明文上部のように画像にマウスをかざすと、
「画像をクリックして拡大イメージを表示」と表示するにはどのように記述すれば良いですか。
アドバイス頂けないでしょうか。

https://item.rakuten.co.jp/culture/co-f25870-imlov/

◎下記の様に記述したところ、レイアウトは同じになりましたが、
画像の拡大機能が作動しないようです。

 
ul.item_photo {
width: 780px;
height: auto;
margin: 0 0 0 -25px;
padding: 20px 0 30px 0;
overflow: hidden;
list-style: none;
}
ul.item_photo li {
width: 343px;
height: 343px;
margin: 0 0 30px 25px;
padding: 10px;
float: left;
border: #EFEFEF solid 1px;
box-shadow: 0px 0px 3px #CCC;
-moz-box-shadow: 0px 0px 3px #CCC;　/* Firefox用 */  
-webkit-box-shadow: 0px 0px 3px #CCC;　/* Safari,Google Chrome用 */  
}
ul.item_photo li a img {
width: 100%;
border: none;
}

Accepted Answer

ECマスターズの田中です。

大変お待たせして申し訳ありません。

確認したところ、で囲まれているタグをタグで囲み、
class属性とexpid属性を適切に設定すると、
楽天本来のイメージ拡大の仕組みを利用することができることがわかりました。

例）

↓




なお、貼り付けていただいたソースの下７行は、特に無くても動作するようです。
まずはこのように修正していただき、
動作をご確認いただきますようお願いします。

Answer

ECマスターズの田中です。

大変お待たせしております。
確認したところ、どうやら楽天の仕組みを流用しているようなのですが、
詳しく確認する必要がございますので、
確認完了まで今しばらくお待ちいただきますようお願いします。