jQueryのパネルスライダーでコンパクトにまとめる。

↓

（1）　jquery.panel.sliderフォルダを■html/jsに追加
jquery.panel.sliderフォルダの中身
coda-slider.1.1.1.pack.js　coda-slider.css　jquery-easing.1.2.pack.js（jsフォルダに初めから入っているjquery.easing.1.3.jsを利用するので、こちらは不使用）　jquery-easing-compatibility.1.2.pack.js

（2）　■data/Smarty/templates/default/site_frame.tplに下記を追加

[php]

[/php]

（3）　■data/Smarty/templates/default/products/detail.tpl
①　上部にスクリプトを追加

[php]


[/php]

②　からまでを以下に書き換える

★2012.5.2修正

↓


【理由】サブ画像を登録しないと、サブ情報が表示されないため。（サブ画像を登録しないサブ情報も有り得るので）

しかし、条件分岐文を設定しておかないと、サブ情報を登録しない場合、余計なスペースが表示されてしまう。そこで、サブ情報を登録する場合は、詳細-サブタイトル(1)を必須とする。

詳細-サブタイトル(1)が必須であることを知らせるために、下記ファイルの417行目あたり、
サブ情報
のすぐ下、
詳細-サブタイトル・・・の箇所を変更する。

■data/Smarty/templates/admin/products/product.tpl

------------------------------------


詳細-サブタイトル() サブ情報入力時 必須


------------------------------------

[php]


























画像を拡大する


















[/php]
（4）　■html/user_data/packages/default/css/contents.css

▼商品詳細のレイアウトの箇所
[php]

 #detailarea,

 .sub_area {

 margin-bottom: 20px;

 width: 100%;

 }
↓
#detailarea {

 margin-bottom: 20px;

 width: 100%;

 }

 .sub_area {

 width: 100%;

 }

 .slider-wrap {

 margin-bottom:20px;

 }

[/php]
▼/* 2カラム用 */と/* 3カラム用 */の箇所
[php]

 /* 2カラム用 */

 #two_maincolumn_left div#detailphotobloc ,

 #two_maincolumn_right div#detailphotobloc {

 float: left;

 width: 37%;

 }

 #two_maincolumn_left #detailrightbloc ,

 #two_maincolumn_right #detailrightbloc {

 float: right;

 width: 63%;

 }

 #two_maincolumn_left div.subtext,

 #two_maincolumn_right div.subtext {

 margin-bottom: 20px;

 float: left;

 width: 71%; /*パネルスライダー用に変更　73%→71%　*/

 }

 #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;

 width: 25%;

 text-align: right;

 padding-right:20px; /*パネルスライダー用に追加*/

 }
/* 3カラム用 */

 #three_maincolumn div#detailphotobloc {

 float: left;

 width: 49%;

 }

 #three_maincolumn #detailrightbloc {

 float: right;

 width: 50%;

 }

 #three_maincolumn div.subtext {

 margin-bottom: 20px;

 float: left;

 width: 60%; /*パネルスライダー用に変更　63%→38%　*/

 }

 #three_maincolumn p.subtext {

 margin-bottom: 20px;

 }

 #three_maincolumn div.subphotoimg {

 float: right;

 width: 35%;

 text-align: right;

 padding-right:10px; /*パネルスライダー用に追加*/

 }
/* ★★★パネルスライダーのCSS設定は、js/jquery.panel.slider/coda-slider.css */
[/php]
（5）■html/js/

jsフォルダにローディング用のGIF画像「ajax-loader.gif」を置く。

2カラムで表示すると以下の通り