ITOBEN STYLE > EC-CUBE：商品詳細ページのメイン画像の下にサムネイル画像
2012年3月10日カテゴリー:未分類

EC-CUBE：商品詳細ページのメイン画像の下にサムネイル画像

サムネイル画像は、サブ情報に画像が登録されて初めて表示される。サムネイル画像は、サブ情報に登録される画像と同じもの。サムネイル画像にカーソルを乗せると上のメイン画像が入れ替わり、クリックすると拡大画像（サブ情報に登録された拡大画像）が表示される。

（1）■data/Smarty/templates/default/products/detail.tpl

①　imgタグに、name=”remote_image” id=”remote_image”　追加
[php]
②　から

に変更

[php]

③　上記の下に下記コードを追加

[php]

[/php]

（2）■html/user_data/packages/default/css/contents.css
[php]
/* ロールオーバー画像 */
div#over_image_box {
clear:both;
margin-top:5px;
margin-bottom:20px;
padding-top:25px;
background:url(../img/background/sonota_image.png) no-repeat top center;
}
div.over_image {
float:left;
}
div.over_image img {
border:#ddd 2px solid;
margin:0 1px;
}
div.over_image img:hover {
border: #F60 2px solid;
}

div#over_image_box div#dummy {
height:5px;
background: url(“../img/background/line_dot_01.gif”) repeat-x bottom ;
margin-right:5px;
}

#detailrightbloc h2 {
margin: 0 0 10px 0;
padding: 0 0 15px 0;
color: #666;
background: url(“../img/background/line_dot_01.gif”) repeat-x bottom ;
font-weight: bold;
font-size: 160%;
}
#detailrightbloc .point,
#detailrightbloc .relative_cat,
#detailrightbloc .stock {
margin: 0 0 10px 0;
padding: 0 0 10px 0;
background: url(“../img/background/line_dot_01.gif”) repeat-x bottom ;
}
#detailrightbloc .main_comment {
margin-bottom: 20px;
}
[/php]

（3）sonota_image.pngを、■html/user_data/packages/default/img/background/フォルダに置く。

（4）サブ画像の画質が気になるときは・・・
メイン画像の幅が260pxに対して、サブ画像の幅は200pxになっているため、画像が入れ替わる際、サブ画像はもとのサイズより拡大されて表示されるので画質が落ちる。
拡大サブ画像をリサイズする方法もあるが、このページではすでにリサイズ画像が多いので、あまり多用すると表示が重くなる。また、必ずしも管理者が拡大画像を登録するとは限らない。よって、ベストなのは、メイン画像とサブ画像を同じサイズにする方法でしょう。

①　システム設定＞パラメーター設定で値を変更する。
NORMAL_SUBIMAGE_WIDTH：260（通常サブ画像横）
NORMAL_SUBIMAGE_HEIGHT：260（通常サブ画像縦）

②　サブ画像が既に登録されている場合は、もう一度登録をやり直す。

③　サブ情報エリアのCSSを調整する。パネルスライダーを適用している場合は下記に変更。
■html/user_data/packages/default/css/contents.css
[php]
/* 1カラム用 */
#one_maincolumn div.subtext {
margin-bottom: 20px;
float: left;
width: 61%; /*パネルスライダー用に変更　69%→61%　*/
}
#one_maincolumn div.subphotoimg {
float: right;
text-align: right;
}
#one_maincolumn p.subtext {
margin-bottom: 20px;
}

/* 2カラム用 */
#two_maincolumn_left div.subtext,
#two_maincolumn_right div.subtext {
margin-bottom: 20px;
float: left;
width: 61%; /*パネルスライダー用に変更　73%→61%　*/
}
#two_maincolumn_left p.subtext,
#two_maincolumn_right p.subtext {
margin-bottom: 20px;
}
#two_maincolumn_left div.subphotoimg ,
#two_maincolumn_right div.subphotoimg {
float: right;
text-align: right;
}

/* 3カラム用 */
#three_maincolumn div.subtext {
margin-bottom: 20px;
float: left;
width: 49%; /*パネルスライダー用に変更　63%→49%　*/
}
#three_maincolumn p.subtext {
margin-bottom: 20px;
}
#three_maincolumn div.subphotoimg {
float: right;
text-align: right;
}
[/php]

↓