バージョン選択

フォーラム

 どうか教えて下さい！  バグ見つけましたよ！  こんな機能あったらなぁ  プラグインについて  その他

メニュー

 当サイトについて  初めてご利用になる方へ  EC-CUBE開発情報

オンライン状況

49 人のユーザが現在オンラインです。 (40 人のユーザが フォーラム を参照しています。)
登録ユーザ: 1
ゲスト: 48
h_tanaka もっと...

サイト内検索
 > プラグイン > Lightboxの導入について

プラグイン

新規スレッドを追加する

スレッド表示 | 古いものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
dedede
投稿日時: 2009/6/8 15:21
対応状況: −−−
新米
登録日: 2009/6/6
居住地:
投稿: 3
Re: Lightboxの導入について
私も同じ事で悩んでいましたので大変参考になりました。
jQuery lightBox pluginで問題無く動かせる事が出来ました。
----------------
- レンタルサーバ：CORESERVER.jp
- OS：Linux
- EC-CUBEバージョン：2.4.0
- PHP情報：5.2.5
- DB情報：MySQL 5.1.22-rc（UNICODE）
----------------

abnet 様
site_frame.tplにlightbox2のjavascriptが残ったままですと正常に作動しない様です。（参考迄）

flealog 様
大変参考になりました。有難うございます。


detail.tpl

<!--{if $arrProduct.main_large_image != ""}-->
<!--★画像★-->
<a href="<!--{$arrFile[$keyl].filepath}-->" width="<!--{$arrFile[$keyl].width}-->" height="<!--{$arrFile[$keyl].height}-->" alt="<!--{$arrProduct.name|escape}-->" class="product-main-photo">
 <img src="<!--{$arrFile[$key].filepath}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|escape}-->" class="picture" />
<br>
<!--★拡大する★-->
 <img src="<!--{$TPL_DIR}-->img/products/b_expansion.gif" width="85" height="13" alt="画像を拡大する" name="expansion01" id="expansion01" />
</a> 
<!--{else}-->
<img src="<!--{$arrFile[$key].filepath}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|escape}-->" class="picture" />
<!--{/if}-->
</div>


site_frame.tpl

<!-- Arquivos utilizados pelo jQuery lightBox plugin -->
<script type="text/javascript" src="<!--{$TPL_DIR}-->jquery-lightbox/js/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="<!--{$TPL_DIR}-->jquery-lightbox/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="<!--{$TPL_DIR}-->jquery-lightbox/css/jquery.lightbox-0.5.css" media="screen" />
<!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin -->
    
<!-- Ativando o jQuery lightBox plugin -->
<script type="text/javascript">
$(function() {
$('a.product-main-photo').lightBox();
$('a.product-sub-photo').lightBox();
$('a.product-top-photo').lightBox();
});
</script>



jquery.lightbox-0.5.jsの30行目から34行目を絶対パス

私はこのように変更しました。
flealog
投稿日時: 2009/6/6 0:15
対応状況: −−−
仙人
登録日: 2008/6/10
居住地:
投稿: 485
Re: Lightboxの導入について
引用：

あとは以下の問題点が解決できればよいのですが・・・。
（1）lightbox用画像パーツのパス指定
（2）なぜが画像が２枚設定になっている
（3）Safariでは背景の「透かし黒」がコンテンツ下部に表示される
（4）既存デフォルトCSSの反映


（2）だけわかります＾＾：

詳細ページの商品画像と画像を拡大する（虫眼鏡イラスト）で拡大用のリンクが分かれている為にもかかわらず、同じclass（ class="product-main-photo"）で使用している為、2枚と認識してしまってます。

product-main-photo部分を変えるか、<a></a>タグをひとつにまとめてひとくくりにすれば1枚で認識すると思います。


･･･後は私より知識のある方にお願い♪（爆


----------------
EC-CUBE3っぽいテンプレート
GitHub で公開中
https://github.com/bluestylejp

お問い合わせ番号CSV登録&メール送信プラグイン
http://urx.red/qDT6
abnet
投稿日時: 2009/6/5 23:23
対応状況: −−−
常連
登録日: 2009/5/28
居住地: 新潟
投稿: 35
Re: Lightboxの導入について
flealog 様

ありがとうございます。
教えていただいたとおりにしてみたところ「lightbox」の動作が確認できるまでになりました。

あとは以下の問題点が解決できればよいのですが・・・。
（1）lightbox用画像パーツのパス指定
（2）なぜが画像が２枚設定になっている
（3）Safariでは背景の「透かし黒」がコンテンツ下部に表示される
（4）既存デフォルトCSSの反映

なお（1）については、自分なりに考えて以下の通りにカスタマイズしてみましたが反映されませんでした。

site_frame.tpl

<script>imageLoading="<!--{$TPL_DIR}-->img/lightbox/ico-loading.gif";</script>
<script>imageBtnClose="<!--{$TPL_DIR}-->img/lightbox/btn-close.gif";</script>
<script>imageBlank="<!--{$TPL_DIR}-->img/lightbox/blank.gif";</script>

※画像パーツのファイル名および配置場所は変更いたしました。


もしわかることがありましたら教えていただけますでしょうか。
よろしくお願いいたします。
flealog
投稿日時: 2009/6/5 21:26
対応状況: −−−
仙人
登録日: 2008/6/10
居住地:
投稿: 485
Re: Lightboxの導入について
import.cssにjquery.lightbox-0.5.cssは記載しましたか？

私の場合
/html/user_data/packages/default/css
にjquery.lightbox-0.5.cssをアップして、import.cssに@import url("./jquery.lightbox-0.5.css");を追加しました。

ここが抜けてる気が･･･＾＾；


----------------
EC-CUBE3っぽいテンプレート
GitHub で公開中
https://github.com/bluestylejp

お問い合わせ番号CSV登録&メール送信プラグイン
http://urx.red/qDT6
abnet
投稿日時: 2009/6/5 21:18
対応状況: −−−
常連
登録日: 2009/5/28
居住地: 新潟
投稿: 35
Re: Lightboxの導入について
flealog 様

jquery.lightbox-0.5.jsの設定について、以下の通りご報告いたします。

・画像に関するパスは絶対パスで記載したところ、必要な画像は表示されました。
・症状としては変わらずです。

以上のことからみると、何となくですがCSSが適用されていない気がしています。

あと、デザインのテンプレート化することを視野に入れているので「jqueryのlightbox」では画像の位置が都度変化することを考慮しなければならないと考えています。

よろしくお願いいたします。
abnet
投稿日時: 2009/6/5 20:57
対応状況: −−−
常連
登録日: 2009/5/28
居住地: 新潟
投稿: 35
Re: Lightboxの導入について
Linux-user 様

ご回答ありがとうございました。

教えていただいたとおり「div idで<a>を囲む」ことをやってみました。

ところが、lightbox自体が効かなくなってしまいました。

現在は元に戻しております。
flealog
投稿日時: 2009/6/5 18:26
対応状況: −−−
仙人
登録日: 2008/6/10
居住地:
投稿: 485
Re: Lightboxの導入について
jquery.lightbox-0.5.jsは設定しましたか？

jquery.lightbox-0.5.js
30行目〜

ここじゃないのかなぁ･･･
外してたらすみません。。。


----------------
EC-CUBE3っぽいテンプレート
GitHub で公開中
https://github.com/bluestylejp

お問い合わせ番号CSV登録&メール送信プラグイン
http://urx.red/qDT6
Linux-user
投稿日時: 2009/6/5 17:30
対応状況: −−−
常連
登録日: 2008/1/8
居住地:
投稿: 62
Re: Lightboxの導入について
<a>のclass属性で指定するのではなく、
div idで<a>を囲んでみてください。
abnet
投稿日時: 2009/6/5 16:04
対応状況: −−−
常連
登録日: 2009/5/28
居住地: 新潟
投稿: 35
Re: Lightboxの導入について
flealog 様
kishik　様

回答いただきありがとうございました。
下記のようにして導入してみました。

（site_frame.tpl：追加）

<script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="<!--{$TPL_DIR}-->lightbox/js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(function() {
$('a.product-main-photo').lightBox();
});
</script>


（detail.tpl：変更）

    <!--★画像★-->
      <a href="<!--{$arrFile[$keyl].filepath}-->" width="<!--{$arrFile[$keyl].width}-->" height="<!--{$arrFile[$keyl].height}-->" alt="<!--{$arrProduct.name|escape}-->" class="product-main-photo">
      <img src="<!--{$arrFile[$key].filepath}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|escape}-->" class="picture" />
      </a>
      <p>
      <!--★拡大する★-->
      <a href="<!--{$arrFile[$keyl].filepath}-->" width="<!--{$arrFile[$keyl].width}-->" height="<!--{$arrFile[$keyl].height}-->" alt="<!--{$arrProduct.name|escape}-->" class="product-main-photo">
      <img src="<!--{$TPL_DIR}-->img/products/b_expansion.gif" width="85" height="13" alt="画像を拡大する" name="expansion01" id="expansion01" />
      </a>
      </p>


設置後確認したところ、CSSレイアウトが適用されていない上にlightbox起動時にえらいところに配置されてしまいました。

差支えなければ、設定方法など教えていただけますでしょうか。
よろしくお願いします。


[当方設置環境]----------------------------
http://www.ab-net.jp/~test/demo/html/
--------------------------------
EC-CUBEバージョン　：　2.4.0
PHPバージョン　：　PHP 4.3.11
DBバージョン　：　PostgreSQL 7.4.
サーバー　：　www.ab-net.jp
OS　：　TurLinux 10 Server
WEBサーバ　：　Apache 2.2
kishik
投稿日時: 2009/6/5 10:15
対応状況: −−−
仙人
登録日: 2009/4/3
居住地: 東京
投稿: 382
Re: Lightboxの導入について
私もjQueryがオススメです。
あとEC-CUBEとprototype.jsは相性があまりよくないので
避けた方が無難です。
マメ知識ということで。


-----
カスタマイズ承ります
http://ec-cube-mall.jp/
http://ec-cube.ec-orange2.jp/
http://wiki.ec-orange2.jp/
(1) 2 »
スレッド表示 | 古いものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は89,077名です
総投稿数は110,023件です

投稿数ランキング

1
seasoft 		7367
2
468 		3217
3
AMUAMU 		2712
4
nanasess 		2314
5
umebius 		2085
6
yuh 		1819
7
h_tanaka 		1646
8
red 		1570
9
mcontact 		1296
10
tsuji 		958
11
fukap 		907
12
shutta 		835
13
tao_s 		799
14 ramrun 789
15 karin 689
16 sumida 641
17
homan 		633
18 DELIGHT 572
19
patapata 		502
20
flealog 		485


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.