コメントなしでもサブ画像のみ表示する方法
商品詳細のページでサブ画像だけ増やしたいときにこれを使用。
最終的には縦並びになるのでCSSで横に並ぶようにしました。
templates/default/products/details.tpl
下記コードのサブタイトルとサブ画像を切り離します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!--▼サブコメント--> <!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}--> <!--{assign var=key value="sub_title`$smarty.section.cnt.index+1`"}--> <!--{if $arrProduct[$key] != ""}--> <div class="sub_area clearfix"> <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 class="expansion" onmouseover="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_expansion_on.gif', 'expansion_<!--{$lkey|h}-->');" onmouseout="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_expansion.gif', 'expansion_<!--{$lkey|h}-->');" href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" target="_blank"> <!--{/if}--> <img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|h}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" /> <!--{if $arrProduct[$lkey]|strlen >= 1}--></a> <span class="mini"> <a class="expansion" href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" target="_blank"> 画像を拡大する</a> </span> <!--{/if}--></div> <!--{else}--> <!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br_html}--> <!--{/if}--> <!--▲サブ画像--> </div> <!--{/if}--> <!--{/section}--> <!--▲サブコメント--> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!--▼サブコメント--> <!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}--> <!--{assign var=key value="sub_title`$smarty.section.cnt.index+1`"}--> <!--{if $arrProduct[$key] != ""}--> <div class="sub_area clearfix"> <h3><!--★サブタイトル★--><!--{$arrProduct[$key]|h}--></h3> <!--{assign var=ckey value="sub_comment`$smarty.section.cnt.index+1`"}--> <!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br_html}--> </div> <!--{/if}--> <!--{/section}--> <!--▲サブコメント--> |
上記コードを下記に丸ごと書き換え。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!--▼サブ画像--> <!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}--> <!--{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="subphotoimg"> <!--{if $arrProduct[$lkey]|strlen >= 1}--> <a class="expansion" onmouseover="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_expansion_on.gif', 'expansion_<!--{$lkey|h}-->');" onmouseout="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_expansion.gif', 'expansion_<!--{$lkey|h}-->');" href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" target="_blank"> <!--{/if}--> <img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|h}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" /> <!--{if $arrProduct[$lkey]|strlen >= 1}--></a> <span class="mini"> <a class="expansion" href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" target="_blank"> 画像を拡大する</a> </span> <!--{/if}--></div> <!--{/if}--> <!--{/section}--> <!--▲サブ画像--> |
多分コレで出来るはず。
（スマフォ版もコレで行けました。）
ただ縦に並ぶだけなので、CSSのdiv.subphotoimgを下記コードに書き換え。
|
1 2 3 4 |
div.subphotoimg { float: right; text-align: right; } |
ちなみにfloat：right；なので右揃え。
通常はleftでもいいかと思います。
なので、コメント欄の後ろのほうに登録した写真が左に来て、上位のコメントにつけた画像が右に来る可能性あり。
あと表示位置をメイン写真の真下に持ってこれれば最高、しかもクリックしたらそれもLightBox風にできぬだろうか・・・