どうか教えて下さい！
| 質問 > その他 > Colorboxの導入について。 |
その他
 |
| スレッド表示 | 新しいものから | 前のトピック | 次のトピック | 下へ |
| 投稿者 | スレッド |
|---|---|
| hunterman |
投稿日時: 2010/3/19 6:58
対応状況: −−−
|
一人前   登録日: 2010/3/14 居住地: 投稿: 78 |
Colorboxの導入について。 どうも未熟者ですので質問いたします。
Ver 2.4.3です。 jQueryのColorboxを商品詳細画面で商品画像をクリックしたときに使用したく、沢山のサイトを参考に実践してみたのですが、うまくいきません。 まず、colorboxのzipファイルを解凍し、/html/user_data/packages/default/colorboxへ。 その後サイトhttp://www.skuare.net/test/jcolorbox.htmlを参考に wwwroot/eccube/data/Smarty/templates/defaultで site_frame.tplを下記のようにし、 <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=<!--{$smarty.const.CHAR_CODE}-->" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="<!--{$smarty.const.URL_DIR}--><!--{$smarty.const.USER_DIR}-->css/common.css" type="text/css" media="all" /> <link rel="alternate" type="application/rss+xml" title="RSS" href="<!--{$smarty.const.SITE_URL}-->rss/index.php" /> <script type="text/javascript" src="<!--{$TPL_DIR}-->js/css.js"></script> <script type="text/javascript" src="<!--{$TPL_DIR}-->js/navi.js"></script> <script type="text/javascript" src="<!--{$TPL_DIR}-->js/win_op.js"></script> <script type="text/javascript" src="<!--{$TPL_DIR}-->js/site.js"></script> <title><!--{$arrSiteInfo.shop_name|escape}-->/<!--{$tpl_title|escape}--></title> <meta name="author" content="<!--{$arrPageLayout.author|escape}-->" /> <meta name="description" content="<!--{$arrPageLayout.description|escape}-->" /> <meta name="keywords" content="<!--{$arrPageLayout.keyword|escape}-->" /> <script type="text/javascript">//<![CDATA[ <!--{$tpl_javascript}--> //]]> </script> <link type="text/css" media="screen" rel="stylesheet" href="colorbox.css" /> <link type="text/css" media="screen" rel="stylesheet" href="colorbox-custom.css" /> <!--[if IE]> <link type="text/css" media="screen" rel="stylesheet" href="colorbox-custom-ie.css" /> <![endif]--> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.colorbox.js"></script> <script language="JavaScript" type="text/javascript"> $(function() { $("#id名").colorbox(); }); </script> </head> <!-- ▼BODY部 スタート --> <!--{include file='./site_main.tpl'}--> <!-- ▲BODY部 エンド --> </html> 管理画面＞商品詳細ページ編集にて <!--▼CONTENTS--> <div id="undercolumn"> <div id="detailtitle"><h2><!--★タイトル★--><!--{$tpl_subtitle|escape}--></h2></div> <img src="<!--{$TPL_DIR}-->img/products/newline7.gif"> <p><!--★詳細メインコメント★--><!--{$arrProduct.main_comment|nl2br}--></p> <div id="detailarea"> <div id="detailphotoblock"> <!--{assign var=key value="main_image"}--> <!--{if $arrProduct.main_large_image != ""}--> <!--★画像★--> <a id="id名" href="java script:void(win01('./detail_image.php?product_id=<!--{$arrProduct.product_id}-->&image=main_large_image"<!--{if $smarty.get.admin == 'on'}-->&admin=on<!--{/if}-->','detail_image','<!--{$arrFile.main_large_image.width+60}-->', '<!--{$arrFile.main_large_image.height+80}-->'))"> <img src="<!--{$arrFile[$key].filepath}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|escape}-->" class="picture" /></a> <p> <!--★拡大する★--> <a id="id名" href="java script:void(win01('./detail_image.php?product_id=<!--{$arrProduct.product_id}-->&image=main_large_image<!--{if $smarty.get.admin == 'on'}-->&admin=on<!--{/if}-->','detail_image','<!--{$arrFile.main_large_image.width+60}-->', '<!--{$arrFile.main_large_image.height+80}-->'))" onmouseover="chgImg('<!--{$TPL_DIR}-->img/products/kakudaion.gif','expansion01');" onMouseOut="chgImg('<!--{$TPL_DIR}-->img/products/kakudai.gif','expansion01');"> <img src="<!--{$TPL_DIR}-->img/products/kakudai.gif" width="44" height="33" alt="画像を拡大する" name="expansion01" id="expansion01" /></a> </p> <!--{else}--> <img src="<!--{$arrFile[$key].filepath}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|escape}-->" class="picture" /> <!--{/if}--> </div> <br> <div id="detailrightblock"> <!--アイコン--> <!--{if count($arrProduct.product_flag) > 0}--> <ul class="status_icon"> <!--{section name=flg loop=$arrProduct.product_flag|count_characters}--> <!--{if $arrProduct.product_flag[flg] == "1"}--> <li> <!--{assign var=key value="`$smarty.section.flg.iteration`"}--> <img src="<!--{$TPL_DIR}--><!--{$arrSTATUS_IMAGE[$key]}-->" width="65" height="17" alt="<!--{$arrSTATUS[$key]}-->" id="icon<!--{$key}-->" /> </li> <!--{/if}--> <!--{/section}--> </ul> <!--{/if}--> 以上を付けたしました。 ですが、まったくの無反応です。何がいけないのでしょうか？ それと、商品拡大のためを画像をクリックしても無反応で、ポップアップも開きません。商品拡大のgifをクリックすると開くのですが、何が原因でしょうか？ どなたかお願い致します。 |
| DELIGHT |
投稿日時: 2010/3/19 16:18
対応状況: −−−
|
仙人  登録日: 2010/2/3 居住地: 熊本県・九州・長野県・関東甲信越 投稿: 572 |
Re: Colorboxの導入について。 ColorBox関連のファイルはアップされてますでしょうか？
jqueryなどのパスってあっていますか？ もし確認できるURLとかがあれば、おしえてください。
|
| hunterman |
投稿日時: 2010/3/20 5:50
対応状況: −−−
|
一人前 登録日: 2010/3/14 居住地: 投稿: 78 |
Re: Colorboxの導入について。 さっそくのご返信ありがとうございます。
ColorBoxのファイルは /wwwroot/eccube/html/user_data/packages/default/colorbox の中に解凍後のファイルをすべてアップローﾄﾞしてあります。 jqueryなどのパスってあっていますか？＞パスとはこの事ですよね？ * jQuery JavaScript Library v1.3.1 Site_frameで <script type="text/javascript" src="jquery-1.3.2.js"></script> となっていたので、1.3.1と直しました。 ですが、機能いたしません。 URLの方ですが、まだ公開前のでして確認してもらう事が出来ません。 以上のような感じなのですが、何が問題なのでしょうか？ |
| DELIGHT |
投稿日時: 2010/3/20 12:52
対応状況: −−−
|
仙人 登録日: 2010/2/3 居住地: 熊本県・九州・長野県・関東甲信越 投稿: 572 |
Re: Colorboxの導入について。 念の為確認ですが、jsのパスが下記の様になっていますが
<script type="text/javascript" src="jquery-1.3.2.js"></script> src="jquery-1.3.2.js" のパスってこれであってますか？ 多分こんな感じになると思うのですが。。。 src="<!--{$TPL_DIR}-->×××/jquery-1.3.2.js"
|
| hunterman |
投稿日時: 2010/3/21 9:48
対応状況: −−−
|
一人前 登録日: 2010/3/14 居住地: 投稿: 78 |
Re: Colorboxの導入について。 ご指摘ありがとうございます。理解が足りないのでご迷惑掛けます。
ご指摘のパスを以下のようにしてみました。下記が埋め込んだ記述です。 <script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.js"></script> <script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.colorbox.js"></script> <script language="JavaScript" type="text/javascript"> $(function() { $("#id名").colorbox(); }); </script> /wwwroot/eccube/html/user_data/packages/default/js にjquery.jsがあります。 同じく同階層にColorbox解凍後のフォルダがあります。 /wwwroot/eccube/html/user_data/packages/default/js 管理画面＞商品詳細ページ編集にて <!--★画像★--> <a id="id名" href="java script:void(win01('./detail_image.php?product_id=<!--{$arrProduct.product_id}-->&image=main_large_image"<!--{if $smarty.get.admin == 'on'}-->&admin=on<!--{/if}-->','detail_image','<!--{$arrFile.main_large_image.width+60}-->', '<!--{$arrFile.main_large_image.height+80}-->'))"> <img src="<!--{$arrFile[$key].filepath}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|escape}-->" class="picture" /></a> 通常通りのポップアップが開き昨日致しません。 ご指摘お願い致します。 |
| ecbeginner |
投稿日時: 2010/3/21 16:11
対応状況: −−−
|
常連   登録日: 2010/1/26 居住地: 大阪 投稿: 46 |
Re: Colorboxの導入について。 hunterman 様
はじめまして。 引用： /wwwroot/eccube/html/user_data/packages/default/js js/jquery.jsと同階層にcolorboxフォルダがある場合↓ <link type="text/css" media="screen" rel="stylesheet" href="<!--{$TPL_DIR}-->js/colorbox/colorbox.css" /> <link type="text/css" media="screen" rel="stylesheet" href="<!--{$TPL_DIR}-->js/colorbox/colorbox-custom.css" /> <!--[if IE]> <link type="text/css" media="screen" rel="stylesheet" href="<!--{$TPL_DIR}-->js/colorbox/colorbox-custom-ie.css" /> <![endif]--> <script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.js"></script> <script type="text/javascript" src="<!--{$TPL_DIR}-->js/colorbox/jquery.colorbox.js"></script> <script language="JavaScript" type="text/javascript"> $(function() { $(".class名").colorbox(); }); </script> jsフォルダと同階層にcolorboxフォルダがある場合↓ <link type="text/css" media="screen" rel="stylesheet" href="<!--{$TPL_DIR}-->colorbox/colorbox.css" /> <link type="text/css" media="screen" rel="stylesheet" href="<!--{$TPL_DIR}-->colorbox/colorbox-custom.css" /> <!--[if IE]> <link type="text/css" media="screen" rel="stylesheet" href="<!--{$TPL_DIR}-->colorbox/colorbox-custom-ie.css" /> <![endif]--> <script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.js"></script> <script type="text/javascript" src="<!--{$TPL_DIR}-->colorbox/jquery.colorbox.js"></script> <script language="JavaScript" type="text/javascript"> $(function() { $(".class名").colorbox(); }); </script> で、大丈夫だと思うのですが…。 間違っていたらすみません。 また、商品詳細ページ編集に関しましては、EC-CUBE工房 様の下記記事が参考になると思います。 http://ec-cube.systemfriend.co.jp/technique/article0010/ http://ec-cube.systemfriend.co.jp/technique/article0017/
|
| hunterman |
投稿日時: 2010/3/22 5:43
対応状況: −−−
|
一人前 登録日: 2010/3/14 居住地: 投稿: 78 |
Re: Colorboxの導入について。 まずは、ecbeginner様ご返答いただきありがとうございます。
また提示してくださったサイトやその他のサイトも参考にしたのですが、問題が解決しなかったための投稿させて頂きました。 ご指摘の内容を参考にこの様にしてみました。 jsフォルダと同階層にcolorboxフォルダを設置し /wwwroot/eccube/data/Smarty/templates/default/site_frame にて下記のようにしてみました。 <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=<!--{$smarty.const.CHAR_CODE}-->" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link type="text/css" media="screen" rel="stylesheet" href="<!--{$TPL_DIR}-->colorbox/colorbox.css" /> <link type="text/css" media="screen" rel="stylesheet" href="<!--{$TPL_DIR}-->colorbox/colorbox-custom.css" /> <!--[if IE]> <link type="text/css" media="screen" rel="stylesheet" href="<!--{$TPL_DIR}-->colorbox/colorbox-custom-ie.css" /> <![endif]--> <script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.js"></script> <script type="text/javascript" src="<!--{$TPL_DIR}-->colorbox/jquery.colorbox.js"></script> <script language="JavaScript" type="text/javascript"> $(function() { $(".class 名").colorbox(); }); </script> <link rel="stylesheet" href="<!--{$smarty.const.URL_DIR}--><!--{$smarty.const.USER_DIR}-->css/common.css" type="text/css" media="all" /> <link rel="alternate" type="application/rss+xml" title="RSS" href="<!--{$smarty.const.SITE_URL}-->rss/index.php" /> <script type="text/javascript" src="<!--{$TPL_DIR}-->js/css.js"></script> <script type="text/javascript" src="<!--{$TPL_DIR}-->js/navi.js"></script> <script type="text/javascript" src="<!--{$TPL_DIR}-->js/win_op.js"></script> <script type="text/javascript" src="<!--{$TPL_DIR}-->js/site.js"></script> <title><!--{$arrSiteInfo.shop_name|escape}-->/<!--{$tpl_title|escape}--></title> <meta name="author" content="<!--{$arrPageLayout.author|escape}-->" /> <meta name="description" content="<!--{$arrPageLayout.description|escape}-->" /> <meta name="keywords" content="<!--{$arrPageLayout.keyword|escape}-->" /> <script type="text/javascript">//<![CDATA[ <!--{$tpl_javascript}--> //]]> </script> </head> <!-- ▼BODY部 スタート --> <!--{include file='./site_main.tpl'}--> <!-- ▲BODY部 エンド --> </html> 同じくデザイン管理＞ページ詳細設定＞商品詳細ページにて 下記のようにいたしました。 <div id="detailarea"> <div id="detailphotoblock"> <!--{assign var=key value="main_image"}--> <!--{if $arrProduct.main_large_image != ""}--> <!--★画像★--> <a href="<!--{$smarty.const.URL_DIR}-->products/detail_image.php?product_id=<!--{$arrProduct.product_id}-->&image=main_large_image<!--{if $smarty.get.admin == 'on'}-->&admin=on<!--{/if}-->&TB_iframe=true&width=<!--{$arrFile.main_large_image.width+60}-->&height=<!--{$arrFile.main_large_image.height+80}-->" class="colorbox"> <img src="<!--{$arrFile[$key].filepath}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|escape}-->" class="picture" /></a> <p> <!--★拡大する★--> <a href="<!--{$smarty.const.URL_DIR}-->products/detail_image.php?product_id=<!--{$arrProduct.product_id}-->&image=main_large_image<!--{if $smarty.get.admin == 'on'}-->&admin=on<!--{/if}-->&TB_iframe=true&width=<!--{$arrFile.main_large_image.width+60}-->&height=<!--{$arrFile.main_large_image.height+80}-->" class="colorbox" onmouseover="chgImg('<!--{$TPL_DIR}-->img/products/b_expansion_on.gif','expansion01');" onMouseOut="chgImg('<!--{$TPL_DIR}-->img/products/b_expansion.gif','expansion01');"> <img src="<!--{$TPL_DIR}-->img/products/b_expansion.gif" width="85" height="13" alt="画像を拡大する" name="expansion01" id="expansion01" /> </a> </p> <!--{else}--> <img src="<!--{$arrFile[$key].filepath}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|escape}-->" class="picture" /> <!--{/if}--> </div> ですが、画像をクリックするとポップアップウィンドウは開きませんが、違うページへジャンプし、フルスクリーンで従来のポップアップウィンドウの画像が表示されます。 いったい原因は何なのでしょうか？ 未熟者でご迷惑お掛けしますが、ご教授下さい。 |
| ecbeginner |
投稿日時: 2010/3/22 16:50
対応状況: −−−
|
常連 登録日: 2010/1/26 居住地: 大阪 投稿: 46 |
Re: Colorboxの導入について。 引用：
$(function() { class 名のところは次のようになっていますか？ $(".colorbox").colorbox(); 追記： 引用： <!--{assign var=key value="main_image"}--> の下に <!--{assign var=keyl value="main_large_image"}--> を追加 引用： <!--★画像★--> を下記に変更 <!--★画像★--> <a href="<!--{$arrFile[$keyl].filepath}-->" class="colorbox"> <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}-->" class="colorbox" onmouseover="chgImg('<!--{$TPL_DIR}-->img/products/b_expansion_on.gif','expansion01');" onmouseout="chgImg('<!--{$TPL_DIR}-->img/products/b_expansion.gif','expansion01');"> <img src="<!--{$TPL_DIR}-->img/products/b_expansion.gif" width="85" height="13" alt="画像を拡大する" name="expansion01" id="expansion01" /> </a> </p> ColorBox は試しておりませんが、同様の jQuery プラグイン CeeBox は、これで問題なく動いております。 さらに追記： だめな場合、最新の jQuery をダウンロードして、colorboc フォルダに入れて、 引用： <script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.js"></script> を、 <script type="text/javascript" src="<!--{$TPL_DIR}-->colorbox/jquery.js"></script> に、変更してみてください。
|
| hunterman |
投稿日時: 2010/3/23 7:16
対応状況: −−−
|
一人前 登録日: 2010/3/14 居住地: 投稿: 78 |
Re: Colorboxの導入について。 ecbeginnerさま本当に何度もご指摘いただきありがとうございます。
ですが、まだ問題の解決に至っておりません。 最新のjqueryもダウンロードして、アップローﾄﾞいたしました。 /wwwroot/eccube/html/user_data/packages/default/ 同階層にjsフォルダ（jquery.js v1.4.2),colorboxフォルダを設置。 /wwwroot/eccube/data/Smarty/templates/default/site_frame にて <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=<!--{$smarty.const.CHAR_CODE}-->" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link type="text/css" media="screen" rel="stylesheet" href="<!--{$TPL_DIR}-->colorbox/colorbox.css" /> <link type="text/css" media="screen" rel="stylesheet" href="<!--{$TPL_DIR}-->colorbox/colorbox-custom.css" /> <!--[if IE]> <link type="text/css" media="screen" rel="stylesheet" href="<!--{$TPL_DIR}-->colorbox/colorbox-custom-ie.css" /> <![endif]--> <script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.js"></script> <script type="text/javascript" src="<!--{$TPL_DIR}-->colorbox/jquery.colorbox.js"></script> <script language="JavaScript" type="text/javascript"> $(function() { $(".colorbox").colorbox(); }); </script> <link rel="stylesheet" href="<!--{$smarty.const.URL_DIR}--><!--{$smarty.const.USER_DIR}-->css/common.css" type="text/css" media="all" /> <link rel="alternate" type="application/rss+xml" title="RSS" href="<!--{$smarty.const.SITE_URL}-->rss/index.php" /> <script type="text/javascript" src="<!--{$TPL_DIR}-->js/css.js"></script> <script type="text/javascript" src="<!--{$TPL_DIR}-->js/navi.js"></script> <script type="text/javascript" src="<!--{$TPL_DIR}-->js/win_op.js"></script> <script type="text/javascript" src="<!--{$TPL_DIR}-->js/site.js"></script> <title><!--{$arrSiteInfo.shop_name|escape}-->/<!--{$tpl_title|escape}--></title> <meta name="author" content="<!--{$arrPageLayout.author|escape}-->" /> <meta name="description" content="<!--{$arrPageLayout.description|escape}-->" /> <meta name="keywords" content="<!--{$arrPageLayout.keyword|escape}-->" /> <script type="text/javascript">//<![CDATA[ <!--{$tpl_javascript}--> //]]> </script> </head> <!-- ▼BODY部 スタート --> <!--{include file='./site_main.tpl'}--> <!-- ▲BODY部 エンド --> </html> デザイン管理＞商品詳細ページ編集にて function lnSetSelect(form, name1, name2, val) { sele11 = document[form][name1]; sele12 = document[form][name2]; if(sele11 && sele12) { index = sele11.selectedIndex; // セレクトボックスのクリア count = sele12.options.length; for(i = count; i >= 0; i--) { sele12.options[i] = null; } // セレクトボックスに値を割り当てる len = lists[index].length; for(i = 0; i < len; i++) { sele12.options[i] = new Option(lists[index][i], vals[index][i]); if(val != "" && vals[index][i] == val) { sele12.options[i].selected = true; } } } } //]]> </script> <!--▼CONTENTS--> <div id="undercolumn"> <div id="detailtitle"><h2><!--★タイトル★--><!--{$tpl_subtitle|escape}--></h2></div> <img src="<!--{$TPL_DIR}-->img/products/newline7.gif"> <p><!--★詳細メインコメント★--><!--{$arrProduct.main_comment|nl2br}--></p> <div id="detailarea"> <div id="detailphotoblock"> <!--{assign var=key value="main_image"}--> <!--{assign var=keyl value="main_large_image"}--> <!--{if $arrProduct.main_large_image != ""}--> <!--★画像★--> <a href="<!--{$arrFile[$keyl].filepath}-->" class="colorbox"> <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}-->" class="colorbox" onmouseover="chgImg('<!--{$TPL_DIR}-->img/products/b_expansion_on.gif','expansion01');" onmouseout="chgImg('<!--{$TPL_DIR}-->img/products/b_expansion.gif','expansion01');"> <img src="<!--{$TPL_DIR}-->img/products/b_expansion.gif" width="85" height="13" alt="画像を拡大する" name="expansion01" id="expansion01" /> </a> </p> <!--{else}--> <img src="<!--{$arrFile[$key].filepath}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|escape}-->" class="picture" /> <!--{/if}--> </div> の様にいたしましたが、商品画像をクリックすると、違うページに切り替わり商品画像以外のものは全て真っ白で表示されます。 ポップアップなども開かず、"targetと違う"その画面から切り替わります。 <script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.js"></script> を <script type="text/javascript" src="<!--{$TPL_DIR}-->colorbox/jquery.js"></script> にしても同じ結果です。 いったい何がいけないのでしょうか？ 何度も何度もご迷惑お掛けいたしますが、ご指導下さい。 |
| ecbeginner |
投稿日時: 2010/3/23 16:54
対応状況: −−−
|
常連 登録日: 2010/1/26 居住地: 大阪 投稿: 46 |
Re: Colorboxの導入について。 hunterman 様
お疲れさまです。 実際に colorbox をダウンロードして展開したところ、colorbox 最新版では colorbox/colorbox-custom-ie.css の内容が colorbox/colorbox.css に含まれており、またデフォでは colorbox/colorbox-custom.css もありません。 一度、hunterman 様の colorbox フォルダの中身をご確認いただけるでしょうか？ もし、私と同じ状態でしたら、次の(1)〜(4)の手順通り変更してみてください。 (1)ダウンロードし展開した colorbox フォルダ colorbox/example1 〜 colorbox/example5 フォルダの中からお好みのものを選び、選んだ colorbox/example の中の colorbox.css と images フォルダを /wwwroot/eccube/html/user_data/packages/default/colorbox フォルダに移動する。 colorbox/colorbox フォルダに入っている jquery.colorbox.js を /wwwroot/eccube/html/user_data/packages/default/colorbox フォルダに移動する。 ※その他のフォルダおよびファイルは要りません。 example1 〜 example5 を選ぶ際は、http://colorpowered.com/colorbox/ の、View Demonstration を参考にしてください。 (2)/wwwroot/eccube/data/Smarty/templates/default/site_frame 下記に変更 <link type="text/css" media="screen" rel="stylesheet" href="<!--{$TPL_DIR}-->colorbox/colorbox.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="<!--{$TPL_DIR}-->colorbox/jquery.colorbox.js"></script> <script language="JavaScript" type="text/javascript"> $(function() { $(".colorbox").colorbox(); }); </script> (3)デザイン管理＞商品詳細ページ編集 引用： <!--{assign var=key value="main_image"}--> の下に <!--{assign var=keyl value="main_large_image"}--> を追加 (4)<!--★画像★-->以下を <!--★画像★--> <a href="<!--{$arrFile[$keyl].filepath}-->" class="colorbox"> <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}-->" class="colorbox" onmouseover="chgImg('<!--{$TPL_DIR}-->img/products/b_expansion_on.gif','expansion01');" onmouseout="chgImg('<!--{$TPL_DIR}-->img/products/b_expansion.gif','expansion01');"> <img src="<!--{$TPL_DIR}-->img/products/b_expansion.gif" width="85" height="13" alt="画像を拡大する" name="expansion01" id="expansion01" /> </a> </p> に変更 私の環境では、これにて正常に動きました。
|
| (1) 2 » | |
| スレッド表示 | 新しいものから | 前のトピック | 次のトピック | トップ |
