EC-CUBE 開発コミュニティ

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

プラグイン

投稿者	スレッド
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 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/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

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行目を絶対パス私はこのように変更しました。

« 1 (2)