[2007/03/22] ZenCartの商品写真拡大をLightboxで表現する

ZenCartでの、商品の写真を拡大する表現にLightboxを採用するための方法です。時すでに日本語版v1.3もリリースされて久しいのですが、このエントリーで紹介するのはv1.2向けの情報になります＞＜

※ここに公開するコードを利用したことによって発生した不都合の責任を当方では負いかねます。あらかじめご了承下さい。

Lightboxとは？→Lightbox JS 2.02を導入する

インストール

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) 補足