Embedded Files
ZenCartでの、商品の写真を拡大する表現にLightboxを採用するための方法です。時すでに日本語版v1.3もリリースされて久しいのですが、このエントリーで紹介するのはv1.2向けの情報になります＞＜
※ここに公開するコードを利用したことによって発生した不都合の責任を当方では負いかねます。あらかじめご了承下さい。
用意するファイル1:Lightbox JS v2.0
用意するファイル2:GD自動サムネイル作成
動作テスト済み環境：Zencart v1.2.0-l10n-jp-6 / MySQL 4.0.26-standard / PHP 4.3.11 (Zend: 1.3.0) / Apache 1.3.34 (Unix)
参考サイト: 人力検索はてな 指定した画像URL（例：http://aaa.com/sample.jpg）のサムネイルを取得、生成するようなPHPスクリプトを探しています
インストール
インストール
GD自動サムネイル作成をZenCartのRoot直下へ、Lightboxを環境に合わせて任意のフォルダへアップロードします 。Lightboxインストール参考
修正するファイルとその箇所
修正するファイルとその箇所
\includes\templates\your_template\templates\tpl_product_info_display.php (101~107行目付近)
≪変更前≫
<?php if (zen_not_null($products_image)) {
require(DIR_WS_MODULES . 'pages/' . $current_page_base . '/main_template_vars_images.php');
} else {
echo ' ';
}
?>
≪変更後≫
<a href="<?php echo(DIR_WS_IMAGES . $products_image);?>" rel="lightbox" title="<?php echo $products_name; ?>"><img src="gdthumb.php?path=<?php echo(DIR_WS_IMAGES . $products_image);?>" /></a>
\includes\modules\pages\product_reviews\main_template_vars_images.php
\includes\modules\pages\product_reviews_info\main_template_vars_images.php (31行目付近)
≪変更前≫
if (file_exists(DIR_WS_IMAGES . 'medium/' . $products_image_medium)) {
?>
<script language="javascript" type="text/javascript"><!--
document.write('<?php echo '<a href="javascript:popupWindow(\\\'' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) . '\\\')">' . zen_image(DIR_WS_IMAGES . 'medium/' . $products_image_medium, addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');
//--></script>
<?php
} else {
?>
<script language="javascript" type="text/javascript"><!--
document.write('<?php echo '<a href="javascript:popupWindow(\\\'' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) . '\\\')">' . zen_image(DIR_WS_IMAGES . $products_image, addslashes($products_name), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');
//--></script>
≪変更後≫
if (file_exists(DIR_WS_IMAGES . 'medium/' . $products_image_medium)) {
?>
<a rel="lightbox" href="<?php echo(DIR_WS_IMAGES . $products_image); ?>" title="<?php echo $products_name; ?>"><img src="gdthumb.php?path=<?php echo(DIR_WS_IMAGES . $products_image);?>&mw=80" /><br />商品コメント</a>
<?php
} else {
?>
<a rel="lightbox" href="<?php echo(DIR_WS_IMAGES . $products_image); ?>" title="<?php echo $products_name; ?>"><img src="gdthumb.php?path=<?php echo(DIR_WS_IMAGES . $products_image);?>&mw=80" /><br />商品コメント</a>
\includes\modules\pages\product_reviews\header.php (35行目付近)
≪変更前≫
$products_name = $review->fields['products_name'] . '<br /><span class="smallText">[' . $review->fields['products_model'] . ']</span>';
≪変更後≫
$products_name = $review->fields['products_name'];
\includes\modules\pages\product_reviews_write\main_template_vars_images.php (54行目付近)
≪変更前≫
<script language="javascript" type="text/javascript"><!--
document.write('<?php echo '<a href="javascript:popupWindow(\\\'' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) . '\\\')">' . zen_image($products_image_medium, addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');
//--></script>
<noscript>
<?php
echo '<a href="' . zen_href_link($products_image_large) . '" target="_blank">' . zen_image($products_image_medium, $products_name, MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>';
?>
</noscript>
≪変更後≫
<a rel="lightbox" href="<?php echo(DIR_WS_IMAGES . $products_image); ?>" title="<?php echo $products_name; ?>"><img src="gdthumb.php?path=<?php echo(DIR_WS_IMAGES . $products_image);?>" /><br />商品コメント</a>
以上の作業で、商品ページおよびレビューページでの写真拡大がLightboxで表現されるようになりました。
これと併せて商品の追加画像をLightbox[roadtrip]でスライドショー表示できたらカッコいいのですが、勝手に追加した画像にサムネイルを作って拡大させるというZenCart仕様の挙動が個人的にイヤで、次の箇所を修正し追加画像のサムネイルを出さないようにしました。商品説明のTEXTAREAにgdthumb.phpとLightboxコードを使って直接画像を呼んで来てスライドショーを再現させるという、ちょっと手間な方法で対応しました。※ZenCartコミュニティ掲示板にこれを成功された方のコードが掲載されています。
\includes\templates\your_template\templates\tpl_product_info_display.php (256行目付近の下のソースを削除)
<?php require(DIR_WS_MODULES . 'pages/' . $current_page_base . '/main_template_vars_images_additional.php'); ?>
GD自動サムネイル (gdthumb.php) 補足
GD自動サムネイル (gdthumb.php) 補足
『指定されたパスにファイルが見つかりません』のエラーが出る場合、PHPのチェックに引っかかっている可能性があります。gdthumb.phpのソース内で次の箇所を削除するかコメントアウトしてみて下さい。(79行目付近)
if(!file_exists($path)) {
return array(0, "指定されたパスにファイルが見つかりません。");
exit;
}
gdthumb.phpソース内(58行目付近)で、あらかじめサムネイル画像の最大値を指定しておくと、各ページの商品写真の大きさを一定にできるので、設定をおすすめします。
// 画像の最大横幅
$this->imgMaxWidth = 250; // 1以上の値// 画像の最大縦幅
$this->imgMaxHeight = 0; // 指定しない場合は0 指定する場合は1以上の値
Page updated
Report abuse