いつも大変おせわになっております。


商品詳細ページにあるメイン画像の下にサブ画像が複数あり、そのサブ画像にマウスを当てるとメイン画像にサブ画像が表示され、そしてそのメイン画像に次へボタンが表示され、その”次へ”にマウスを当てると次から次ぎへと画像が入れ替わるというようなサイトを大手のファッション系ECサイトでよく拝見しますが、ECCubeでもそのようなことは可能でしょうか。

現在、ネット上からLightbox2をダウンロード致しまして、説明に従い、Eccubeの最新版に付け加えようとしておりますが、全く機能致しません。

Eccubeの最新版に上記の様な機能の搭載は可能でありますでしょうか？

構築環境

[EC-CUBE] 　2.12
[PHP]　PHP 5.2.9
[データベース]　MySQL 5.0.77
[ブラウザ]各種、IE、Chorome、Safari等

こんにちは

以下はLightbox2ではなcolorboxですが、設置は似た感じだと思います。
http://bellhouse.ne.jp/products/detail.php?product_id=9034

基本的にはイメージのパスに注意しながら作業すれば上手くいくと思います。

detai.tplのメインイメージ場合だと

引用：

を以下のようにすれば良いのではないかと思います。



テストしてないので、はずしていたらすいません。

あと、colorboxの場合jQueryのバージョンで問題が出ました。
バージョンをあげてテストしてみるとかしてはいかがでしょう。

----------------
Norihiro Maruoka
Wear Net

kenz様の要望に近い制作予定の案件がありましたので確認してみました。
その要望というのは、サブ画像にマウスオーバーでメイン画像が切り替わるというものです。

テストページ
http://www.eck.jp/eccube-2.12.2/products/detail.php?product_id=2

作り方はこちらが参考になると思います。
http://tenderfeel.xsrv.jp/javascript/271/

私が必要なのはここまででしたが、興味本位でLightbox2も同時に設定できないか
確認したところ、マウスオーバーで画像切り替えのJavaScriptと競合するようで
Lightbox2までは設定できませんでした。

Lightbox2のみ設置であれば特に問題ないようです。

テストページ2
http://www.eck.jp/eccube-2.12.1/products/detail.php?product_id=2

detai.tplの記述内容はmarugizmo様が提示されている内容で大丈夫です。

kenz様のサイトのLightbox2が機能しない原因は分かりませんが、
lightbox.jsへのパスが通っているかや他のプラグインと競合していないか
などを確認されてみてはいかがでしょうか。

----------------
他社システムからEC-CUBEへの移行などお気軽にご相談ください。
福岡のホームページ制作会社 ECカンパニー
担当：田中利宏

tanaca様

ご丁寧に説明頂きましてありがとうございます。感謝致します。実際に作成されたサイト等も紹介頂きまして、よくここまで完成できたなあと感心しておりますし、大変素晴らしいです。

私の場合、どのように試してみましても動作致しておりません。

デフォルトではfacebox.jsが設置されておりますので、まず、それをはずしまして、以下のようにlightbox.js、およびlightbox.cssをダウンロードいたしまして、商品詳細ページの最上段に設置致しました。

その上でメイン画像、およびサブ画像に以下の様にrel="lightbox[roadtrip]"class="expansion"を付け加えました。しかしながら、faceboxでは普通にfaceboxのあるべき動作をしているところが、このlightboxではただ写真だけが、画面左上に表示され、lightbox.js自体が動作していないようでございます。

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

<div id="undercolumn">
<form name="form1" id="form1" method="post" action="?">
<input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" />
<div id="detailarea" class="clearfix">
<div id="detailphotobloc">

<div class="photo">


<!--{assign var=key value="main_image"}-->
<!--★画像★-->
<!--{if $arrProduct.main_large_image|strlen >= 1}-->

<a href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_large_image|h}-->"rel="lightbox[roadtrip]"class="expansion">
<!--{/if}-->
<img src="<!--{$arrFile[$key].filepath|h}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|h}-->" class="expansion" />
<!--{if $arrProduct.main_large_image|strlen >= 1}-->
</a>
<!--{/if}-->
</div>

<!--{if $arrProduct.main_large_image|strlen >= 1}-->
<span class="mini">
<!--★拡大する★-->
<a
href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_large_image|h}-->"rel="lightbox[roadtrip]"class="expansion">
画像を拡大する</a>
</span>

<br>
<br>
<!--▼サブ画像ここから-->


<!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->
<!--{assign var=key value="sub_title`$smarty.section.cnt.index+1`"}-->
<!--{assign var=ikey value="sub_image`$smarty.section.cnt.index+1`"}-->
<!--{if $arrProduct[$key] != "" or $arrProduct[$ikey]|strlen >= 1}-->


<!--▼サブ画像-->
<!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}-->
<!--{if $arrProduct[$ikey]|strlen >= 1}-->

<!--{if $arrProduct[$lkey]|strlen >= 1}-->

<a href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->"rel="lightbox[roadtrip]"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}-->');">

<!--{/if}-->


<img src="<!--{$arrFile[$ikey].filepath}-->" alt="<!--{$arrProduct.name|h}-->"width="60" height="60>"/>


<!--{if $arrProduct[$lkey]|strlen >= 1}--></a>



<!--{/if}-->

<!--{else}-->
<p class="subtext"><!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br_html}--></p>
<!--{/if}-->
<!--▲サブ画像-->

<!--{/if}-->
<!--{/section}-->
<!--▼サブ画像ここまで-->


<!--{/if}-->

</div>

simple-rollover.jsもlightbox.jsと同様の作業を致しましたが、結果は同じで、画面左上に写真が表示されるだけでjsファイルが動作していない模様です。

引き続き試していきますが、ざっと見て何かお分かりになりますでしょうか。

ソースの内容を拝見しても, 原因が解る方はなかなかいらっしゃらないと思います.

こういった場合は, JavaScript エラーが出ていたり, CSS が読み込まれていなかったりすることがほとんどですので, まずはエラーの内容を確認してみてください.

提示いただいたソースを入念にチェックしたわけではありませんが、問題なさそうです。
nanasess様もおっしゃってあるようにブラウザの開発ツールなどを使って、動作しない原因を探すのが近道かと思います。
引用：
まずは、上記で指定した場所にファイルがアップされているかから確認されるとよいかもしれません。

----------------
他社システムからEC-CUBEへの移行などお気軽にご相談ください。
福岡のホームページ制作会社 ECカンパニー
担当：田中利宏