EC-CUBEの小技:カタログ閲覧にjQuery lightBox pluginの設置

この記事は最終更新日から1年以上が経過しています。
以前にやりましたECCUBEで画像追加の最大数を10に増やす方法で、画像を見て回るのに、いちいち拡大解除しなければならないのを改善したいと書きましたが、それなりに便利そうなものをみつけたので、ご紹介します。

FaceboxをlightBoxに変えるだけ

まず、jQuery lightBox pluginをダウンロードしましょう
jQuery lightBox pluginダウンロード

解凍後、フォルダ名をjquery-lightboxに変更し、いつものように/html/js/へとアップロードします。

あとは以下の2ファイルにコードを書きたして、完了です。
data/Smarty/templates/default/products/detail.tpl
data/Smarty/templates/default/products/list.tpl

<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery-lightbox/js/jquery.js"></script>
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery-lightbox/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery-lightbox/css/jquery.lightbox-0.5.css" media="screen" />

$(document).ready(function() {
	$('a.expansion').lightBox({
		fixedNavigation:true,
		overlayBgColor:'#000',
		overlayOpacity:0.7,
		imageLoading:'../js/jquery-lightbox/images/lightbox-ico-loading.gif',
		imageBtnClose:'../js/jquery-lightbox/images/lightbox-btn-close.gif',
		imageBtnPrev:'../js/jquery-lightbox/images/lightbox-btn-prev.gif',
		imageBtnNext:'../js/jquery-lightbox/images/lightbox-btn-next.gif',
		containerResizeSpeed:350,
		txtImage:'画像:',
		txtOf:'/'
	});
});

以下の部分はFaceboxのコードなので、邪魔であれば消して下さい。

<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.facebox/facebox.js"></script>
<link rel="stylesheet" type="text/css" href="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.facebox/facebox.css" media="screen" />

$(document).ready(function() {
    $('a.expansion').facebox({
        loadingImage : '<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.facebox/loading.gif',
        closeImage   : '<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.facebox/closelabel.png'
    });
});

これで、拡大画像内のボタンで画像の行き来ができるので、画像数が多くてもストレスになりません。
カタログサイトを作る場合は、このような道具を使うのがよいかと思います。

以上でした。

1 Comment

  1. いつも素敵な技をどうもありがとうございます。
    どうにかLightBoxを導入できましたが、
    縮小画像と拡大画像が連続で表示されるので、同じ画像が2回づつ表示されます。
    縮小画像を飛ばして拡大画像のみを、表示するにはどうのようにしたら良いのでしょうか?
    どうぞよろしくお願いいたします。

Leave a Reply

Your email address will not be published.


*


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください