lightboxのダウンロード
lightboxを解凍し、「lightbox」にリネームする
lightbox/css
lightbox/images
lightbox/js
lightbox.js （49行あたり）
loading.gif、closelabel.gifのパスをあわせる。
相対パスの場合はdetail.phpから参照するパスになる。
絶対パスの方が簡単である。
// Configurationl
//
LightboxOptions = Object.extend({
fileLoadingImage: ‘../user_data/lightbox/images/loading.gif’,
fileBottomNavCloseImage: ‘../user_data/lightbox/images/closelabel.gif’,
overlayOpacity: 0.8, // controls transparency of shadow overlay
animate: true, // toggles resizing animations
resizeSpeed: 7, // controls the speed of the image resizing animations (1=slowest and 10=fastest)
borderSize: 10, //if you adjust the padding in the CSS, you will need to update this variable
// When grouping images this is used to write: Image # of #.
// Change it for non-english localization
labelImage: “Image”,
labelOf: “of”
}, window.LightboxOptions || {});
ヘッダの変更(35行あたり）
場所 /data/Smarty/tamplates/default/site_frame.tpl
<script type=”text/javascript” src=”<!–{$TPL_DIR}–>js/css.js”></script>
<script type=”text/javascript” src=”<!–{$TPL_DIR}–>js/navi.js”></script>
<script type=”text/javascript” src=”<!–{$TPL_DIR}–>js/win_op.js”></script>
<script type=”text/javascript” src=”<!–{$TPL_DIR}–>js/site.js”></script>
<!–変更部分 開始–>
<script type=”text/javascript” src=”<!–{$smarty.const.URL_DIR}–><!–{$smarty.const.USER_DIR}–>lightbox/js/prototype.js”></script>
<script type=”text/javascript” src=”<!–{$smarty.const.URL_DIR}–><!–{$smarty.const.USER_DIR}–>lightbox/js/scriptaculous.js?load=effects,builder”></script>
<script type=”text/javascript” src=”<!–{$smarty.const.URL_DIR}–><!–{$smarty.const.USER_DIR}–>lightbox/js/lightbox.js”></script>
<link rel=”stylesheet” href=”<!–{$smarty.const.URL_DIR}–><!–{$smarty.const.USER_DIR}–>lightbox/css/lightbox.css” type=”text/css” media=”screen” />
<!–変更部分 終了–>
<title><!–{$arrSiteInfo.shop_name|escape}–>/<!–{$tpl_title|escape}–></title>
置く場所
/user_data/lightbox
メイン画像の設定
/user_data/packages/default/detail.tpl
変更前（62行あたり）
<!–{assign var=key value=”main_image”}–>
<!–{if $arrProduct.main_large_image != “”}–>
<!–★画像★–>
<a href=”javascript:void(win01(’./detail_image.php?product_id=<!–{$arrProduct.product_id}–>&image=main_large_image<!–{if $smarty.get.admin == ‘on’}–>&admin=on<!–{/if}–>’,'detail_image’,'<!–{$arrFile.main_large_image.width+60}–>’, ‘<!–{$arrFile.main_large_image.height+80}–>’))”>
<img src=”<!–{$arrFile[$key].filepath}–>” width=”<!–{$arrFile[$key].width}–>” height=”<!–{$arrFile[$key].height}–>” alt=”<!–{$arrProduct.name|escape}–>” class=”picture” />
</a>
<p>
変更後
<!–★画像★–>
<a href=”<!–{$arrFile.main_large_image.filepath}–>” rel=”lightbox”>
<img src=”<!–{$arrFile[$key].filepath}–>” width=”<!–{$arrFile[$key].width}–>” height=”<!–{$arrFile[$key].height}–>” alt=”<!–{$arrProduct.name|escape}–>” class=”picture” />
</a>
<p>
<!–★拡大する★–>
[サブ画像]
変更前（245行あたり）
<!–{if $arrFile[$key].filepath != “”}–>
<div class=”subtext”><!–★サブテキスト★–><!–{$arrProduct[$ckey]|nl2br}–></div>
<div class=”subphotoimg”>
<!–{if $arrFile[$lkey].filepath != “”}–>
<a href=”<!–{$smarty.server.PHP_SELF|escape}–>” onclick=”win01(’./detail_image.php?product_id=<!–{$arrProduct.product_id}–>&image=<!–{$lkey}–><!–{if $smarty.get.admin == ‘on’}–>&admin=on<!–{/if}–>’,'detail_image’,'<!–{$arrFile[$lkey].width+60}–>’,'<!–{$arrFile[$lkey].height+80}–>’); return false;” target=”_blank”>
<!–{/if}–>
<!–サブ画像–>
変更後
<!–{if $arrFile[$lkey].filepath != “”}–>
<a href=”<!–{$arrFile[$lkey].filepath}–>” rel=”lightbox”>
<!–{/if}–>
<!–サブ画像–>
※サブ画像の配列名は”lkey”になっている。
