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に下記を追加
<!--▼jquery.easing.1.3.jsは、パネルスライダーで利用--> <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.easing.1.3.js"></script> <!--パネルスライダー--> <!--{assign var=detail value="`$smarty.const.ROOT_URLPATH`products/detail.php"}--> <!--{if $smarty.server.PHP_SELF==$detail}--> <link media="screen" rel="stylesheet" href="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.panel.slider/coda-slider.css" /> <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.panel.slider/jquery-easing-compatibility.1.2.pack.js"></script> <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.panel.slider/coda-slider.1.1.1.pack.js"></script> <!--▲jquery.easing.1.3.js利用--> <!--{/if}-->
(3) ■data/Smarty/templates/default/products/detail.tpl
① 上部にスクリプトを追加
<!-- パネルスライダー --> <script type="text/javascript"> jQuery(window).bind("load", function() { jQuery("div#slider1").codaSlider() // jQuery("div#slider2").codaSlider() // etc, etc. Beware of cross-linking difficulties if using multiple sliders on one page. }); </script>
② からまでを以下に書き換える
★2012.5.2修正
↓ 【理由】サブ画像を登録しないと、サブ情報が表示されないため。(サブ画像を登録しないサブ情報も有り得るので) しかし、条件分岐文を設定しておかないと、サブ情報を登録しない場合、余計なスペースが表示されてしまう。そこで、サブ情報を登録する場合は、詳細-サブタイトル(1)を必須とする。 詳細-サブタイトル(1)が必須であることを知らせるために、下記ファイルの417行目あたり、サブ情報
のすぐ下、詳細-サブタイトル・・・の箇所を変更する。 ■data/Smarty/templates/admin/products/product.tpl ------------------------------------ 詳細-サブタイトル() サブ情報入力時 必須 ------------------------------------<!--▼サブコメント--> <!--{if $arrProduct.sub_title1}--> <div class="slider-wrap"> <div id="slider1" class="csw"> <div class="panelContainer"> <!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}--> <!--{assign var=key value="sub_title`$smarty.section.cnt.index+1`"}--> <!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}--> <!--{if $arrProduct[$key] != ""}--> <div class="panel sub_area clearfix" title="<!--{$arrProduct[$key]|h}-->"> <div class="wrapper"> <h3><!--★サブタイトル★--><!--{$arrProduct[$key]|h}--></h3> <!--{assign var=ckey value="sub_comment`$smarty.section.cnt.index+1`"}--> <!--▼サブ画像--> <!--{assign var=key value="sub_image`$smarty.section.cnt.index+1`"}--> <!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}--> <!--{if $arrProduct[$key]|strlen >= 1}--> <div class="subtext"><!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br_html}--></div> <div class="subphotoimg"> <!--{if $arrProduct[$lkey]|strlen >= 1}--> <a href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" class="cbox"> <!--{/if}--> <img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|h}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" /> <!--{if $arrProduct[$lkey]|strlen >= 1}--></a><br /> <span class="mini"> <a href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" class="cbox"> 画像を拡大する</a> </span> <!--{/if}--> </div> <!--{else}--> <p class="subtext"><!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br_html}--></p> <!--{/if}--> <!--▲サブ画像--> </div> </div> <!--{/if}--> <!--{/section}--> </div> </div> </div> <br /> <!--{else}--> <!--{/if}--> <!--▲サブコメント-->(4) ■html/user_data/packages/default/css/contents.css
▼商品詳細のレイアウトの箇所#detailarea, .sub_area { margin-bottom: 20px; width: 100%; } ↓ #detailarea { margin-bottom: 20px; width: 100%; } .sub_area { width: 100%; } .slider-wrap { margin-bottom:20px; }▼/* 2カラム用 */と/* 3カラム用 */の箇所
/* 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 */(5)■html/js/
jsフォルダにローディング用のGIF画像「ajax-loader.gif」を置く。2カラムで表示すると以下の通り