EC-CUBE 開発コミュニティ

> プラグイン > Lightboxの導入について

プラグイン

投稿者	スレッド
abnet	投稿日時: 2009/6/5 0:19 対応状況: −−−
常連登録日: 2009/5/28 居住地: 新潟投稿: 35	Lightboxの導入について下記のアドレスを元に「Lightbox」を導入してみました。 http://ec-cube.systemfriend.co.jp/technique/article0010/ 導入自体は成功しました。しかし、「Lightbox」を導入するとCSSによるレイアウトがめちゃくちゃになってしまいます。デフォルトのテンプレートではCSSがきちんと機能しているのですが、「Lightbox」の記述をテンプレートに加えるとCSSレイアウトがおかしくなります。ちなみに、IE7とSafariとFireFoxで確認したところIE7だけがこの現象になってしまいます。他は正常なレイアウトで表示されます。「Lightbox」を導入した経験のある方、どうかご教授お願いいたしたくよろしくお願いします。 [当方設置環境]---------------------------- http://www.ab-net.jp/~test/demo/html/

takoyaki	投稿日時: 2009/6/5 1:29 対応状況: −−−
一人前登録日: 2008/1/26 居住地: 沖縄県投稿: 111	Re: Lightboxの導入について IE 特有の css バグのようですね。IE6 でも崩れていました。 IE 用には、main.cssを下記のようにすればとりあえず大丈夫だと思います。 `/* 2カラム設定 */ div#two_maincolumn { float: left; width: 580px; padding: 15px 0 0; margin: 0px 0px 0px 10px; }` また、leftcolumn の崩れは、cartearea や categoryarea などの width を削除してやばいいのではないでしょうか。ヒントになりますでしょうか。

abnet	投稿日時: 2009/6/5 9:20 対応状況: −−−
常連登録日: 2009/5/28 居住地: 新潟投稿: 35	Re: Lightboxの導入について takoyaki様ご回答ありがとうございます。遅くなりましたが、先程試してみましたところ、レイアウトの崩れをなくすという意味合いではある程度理解できました。しかし、細部の調整ができないという意味では根本的な解決になっていないような気がします。引用：・div#containerの中央寄せ・コンテンツメインの余白調整・lightboxの縦軸の中央寄せ　　等やはり、Lightbox.jsとcss.jsが何か緩衝しているのでしょうか？（※IE7ステータスバーの「実行しましたが、ページでエラーが発生しました。」と表示されているのが気になります。）また、今後の予定では３カラム設定で使用を予定しているので、widthを指定できないとなると、今後の作業に支障が出ることが予想されます。やはりcssはデフォルトの状態で使用でき、かつ、lightboxを導入する方法がありましたら、お願いできますでしょうか。よろしくお願いいたします。

flealog	投稿日時: 2009/6/5 9:25 対応状況: −−−
仙人登録日: 2008/6/10 居住地: 投稿: 485	Re: Lightboxの導入について jQuery lightBox plugin がオススメですよ＾＾ jQuery lightBox pluginではcssが崩れることはなかったです ---------------- EC-CUBE3っぽいテンプレート GitHub で公開中 https://github.com/bluestylejp お問い合わせ番号CSV登録&メール送信プラグイン http://urx.red/qDT6

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/

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

Linux-user	投稿日時: 2009/6/5 17:30 対応状況: −−−
常連登録日: 2008/1/8 居住地: 投稿: 62	Re: Lightboxの導入について <a>のclass属性で指定するのではなく、 div idで<a>を囲んでみてください。

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

abnet	投稿日時: 2009/6/5 20:57 対応状況: −−−
常連登録日: 2009/5/28 居住地: 新潟投稿: 35	Re: Lightboxの導入について Linux-user 様ご回答ありがとうございました。教えていただいたとおり「div idで<a>を囲む」ことをやってみました。ところが、lightbox自体が効かなくなってしまいました。現在は元に戻しております。

abnet	投稿日時: 2009/6/5 21:18 対応状況: −−−
常連登録日: 2009/5/28 居住地: 新潟投稿: 35	Re: Lightboxの導入について flealog 様 jquery.lightbox-0.5.jsの設定について、以下の通りご報告いたします。・画像に関するパスは絶対パスで記載したところ、必要な画像は表示されました。・症状としては変わらずです。以上のことからみると、何となくですがCSSが適用されていない気がしています。あと、デザインのテンプレート化することを視野に入れているので「jqueryのlightbox」では画像の位置が都度変化することを考慮しなければならないと考えています。よろしくお願いいたします。

(1) 2 »