どうか教えて下さい！
| 質問 > フロント機能 > LightBoxが導入について |
フロント機能
 |
| スレッド表示 | 新しいものから | 前のトピック | 次のトピック | 下へ |
| 投稿者 | スレッド |
|---|---|
| 44048 |
投稿日時: 2013/10/2 16:50
対応状況: −−−
|
半人前   登録日: 2013/6/3 居住地: 投稿: 11 |
LightBoxが導入について [EC-CUBE] 2.12.3
[レンタルサーバ] GMOサーバ/お名前.comサーバ [OS] Windows7 [PHP] PHP 5.2.17 [データベース] MySQL 5.0.51a-log [ブラウザ] IE/FireFox/safari/chrome など [LightBox] lightbox2.6 [現象] LightBox導入に当たり、以下サイト ・http://daihachi.sub.jp/archives/909 ・http://ec-cube.systemfriend.co.jp/technique/article0010/ ・http://www.fogburden.com/?p=78 等を試してみましたがうまくいきません。 具体的には、ページにソースがそのまま出てきたり、 画像を拡大するの文字が消え、リンクを踏んでもエラーとなります。 導入方法をご教授ください。 私が初心者な為、全く応用が利かず、対処ができません・・・ 質問自体キチンと出来ていないかもしれませんが、何卒、よろしくお願い致します。 |
| patapata |
投稿日時: 2013/10/7 20:16
対応状況: −−−
|
仙人   登録日: 2010/7/7 居住地: 神奈川県 投稿: 502 |
Re: LightBoxが導入について たまに親切に方が書いてくれますが・・・
基本的には質問者の方が、どこまでできていてどこができないのかを、わかるように書かないと答える人は少ないですよ。 手順 ?liteboxを本家よりダウンロードしてきます。 リンクが壊れているようGithubからもってくる。 https://github.com/lokesh/lightbox2/releases/tag/v2.6 ?解凍すると以下のようになります。 lightbox |-css |-img |-js |-index.html ?解凍したフォルダをアップロード 【ECCUBEフォルダ】/html/js にいれます。 html/js |-jquery.fancybox |-jquery.fancybox |-lightbox ?litebox2.6はjquery-1.4.2じゃ動かないようなので・・・ EC-CUBEのjqueryを切り替えます。 litebox/jsフォルダにあるjquery-1.10.2.min.jsをコピーもしくは、一個上の階層html/jsフォルダに入れます。 ⇒1.4.2.min.jsがある階層と一緒の場所 ?-1 【ECCUBEフォルダ】/data/Smarty/templates/【使用テンプレート】/site_frame.tpl の1.4.2.min.jsを読み込んでいる箇所を、jquery-1.10.2.min.jsに変更する。 ?デフォルトのfaceboxからlightboxへ変更する 【ECCUBEフォルダ】/data/Smarty/templates/【使用テンプレート】/products/detail.tpl を以下に変更 さらにAタグ部分を 以下を追加する ※2か所ありますよ 以上でたぶんできますよ。 ※上記修正コードはVer2.12.5でのコード修正例です。 ※上記ではdetail.tplのみ修正をかけてますが、その他のfaceboxを利用している箇所でも?と同等の修正をかける必要があります |
| 44048 |
投稿日時: 2013/10/8 10:59
対応状況: −−−
|
半人前 登録日: 2013/6/3 居住地: 投稿: 11 |
Re: LightBoxが導入について patapataさん
丁寧にお教え頂きありがとうございます。 また、phpもjsもわからない所さえ全く分かっておらず、わかりにくい質問にお答え頂きありがとうございます。 お教え頂いた内容をチャレンジしてみました。 すると、新しいタブで画像を開くようになりました。 lightboxでやりたいことが、 サムネイルをクリック→画像拡大(FaceBox?と同じ) 拡大画像をクリック→拡大画像を閉じる です。 導入は失敗でしょうか？ それとも導入は成功し、何か別に設定方法があるのでしょうか・・・ ?html/jsにjquery-1.10.2.min.jsを移動 |-jquery.fancybox |-jquery.fancybox |-lightbox |-jquery-1.10.2.min.js |-jquery-1.4.2.min.js 〜〜〜〜省略〜〜〜〜 ?-1 site_frame.tpl <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" class="<!--{$tpl_page_class_name|h}-->"> <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="<!--{$TPL_URLPATH}-->css/import.css" type="text/css" media="all" /> <link rel="alternate" type="application/rss+xml" title="RSS" href="<!--{$smarty.const.HTTP_URL}-->rss/<!--{$smarty.const.DIR_INDEX_PATH}-->" /> <!--{if $tpl_page_category == "abouts"}--> <!--{if ($smarty.server.HTTPS != "") && ($smarty.server.HTTPS != "off")}--> <script type="text/javascript" src="https://maps-api-ssl.google.com/maps/api/js?sensor=false"></script> <!--{else}--> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <!--{/if}--> <!--{/if}--> <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/css.js"></script> <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/navi.js"></script> <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/win_op.js"></script> <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/site.js"></script> <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery-1.10.2.min.js"></script> <title><!--{$arrSiteInfo.shop_name|h}--><!--{if $tpl_subtitle|strlen >= 1}--> / <!--{$tpl_subtitle|h}--><!--{elseif $tpl_title|strlen >= 1}--> / <!--{$tpl_title|h}--><!--{/if}--></title> <!--{if $arrPageLayout.author|strlen >= 1}--> <meta name="author" content="<!--{$arrPageLayout.author|h}-->" /> <!--{/if}--> <!--{if $arrPageLayout.description|strlen >= 1}--> <meta name="description" content="<!--{$arrPageLayout.description|h}-->" /> <!--{/if}--> <!--{if $arrPageLayout.keyword|strlen >= 1}--> <meta name="keywords" content="<!--{$arrPageLayout.keyword|h}-->" /> <!--{/if}--> <link rel="shortcut icon" href="<!--{$TPL_URLPATH}-->img/common/favicon.ico" /> <link rel="icon" type="image/vnd.microsoft.icon" href="<!--{$TPL_URLPATH}-->img/common/favicon.ico" /> <script type="text/javascript">//<![CDATA[ <!--{$tpl_javascript}--> $(function(){ <!--{$tpl_onload}--> }); //]]></script> <!--{* ▼Head COLUMN*}--> <!--{if $arrPageLayout.HeadNavi|@count > 0}--> <!--{* ▼上ナビ *}--> <!--{foreach key=HeadNaviKey item=HeadNaviItem from=$arrPageLayout.HeadNavi}--> <!--{* ▼<!--{$HeadNaviItem.bloc_name}--> ここから*}--> <!--{if $HeadNaviItem.php_path != ""}--> <!--{include_php file=$HeadNaviItem.php_path}--> <!--{else}--> <!--{include file=$HeadNaviItem.tpl_path}--> <!--{/if}--> <!--{* ▲<!--{$HeadNaviItem.bloc_name}--> ここまで*}--> <!--{/foreach}--> <!--{* ▲上ナビ *}--> <!--{/if}--> <!--{* ▲Head COLUMN*}--> </head> <!-- ▼BODY部 スタート --> <!--{include file='./site_main.tpl'}--> <!-- ▲BODY部 エンド --> </html> ?detail.tpl <!--↓★lightbox★↓--> <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/lightbox/js/lightbox-2.6.min.js"></script> <link rel="stylesheet" type="text/css" href="<!--{$smarty.const.ROOT_URLPATH}-->js/lightbox/css/lightbox.css" media="screen"/> <script type="text/javascript">//<![CDATA[ function fnSetClassCategories(form, classcat_id2_selected) { var $form = $(form); var product_id = $form.find('input[name=product_id]').val(); var $sele1 = $form.find('select[name=classcategory_id1]'); var $sele2 = $form.find('select[name=classcategory_id2]'); setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected); } $(document).ready(function() { $('a.expansion').lightBox({ fixedNavigation:true, overlayBgColor:'#000', overlayOpacity:0.7, imageLoading:'<!--{$smarty.const.ROOT_URLPATH}-->js/lightbox/img/loading.gif', imageBtnClose:'<!--{$smarty.const.ROOT_URLPATH}-->js/lightbox/img/close.gif', imageBtnPrev:'<!--{$smarty.const.ROOT_URLPATH}-->js/lightbox/img/prev.gif', imageBtnNext:'<!--{$smarty.const.ROOT_URLPATH}-->js/lightbox/img/next.gif', containerResizeSpeed:350, txtImage:'画像：', txtOf:'／' }); }); //]]></script> <!--↑★lightbox★↑--> <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}--> <!--↓★lightbox2★↓--> <a href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_large_image|h}-->" data-lightbox="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_large_image|h}-->" class="expansion" target="_blank" > <!--↑★lightbox2★↑--> <!--{/if}--> <img src="<!--{$arrFile[$key].filepath|h}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|h}-->" class="picture" /> <!--{if $arrProduct.main_large_image|strlen >= 1}--> </a> <!--{/if}--> </div> <!--{if $arrProduct.main_large_image|strlen >= 1}--> <span class="mini"> <!--★拡大する★--> <!--↓★lightbox2★↓--> <a href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_large_image|h}-->" data-lightbox="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_large_image|h}-->" class="expansion" target="_blank" > <!--↑★lightbox2★↑--> 〜〜〜〜省略〜〜〜〜 以上変更点です。 間違いなど変更点が御座いましたらお教えください。 よろしくお願いします。 |
| patapata |
投稿日時: 2013/10/8 14:45
対応状況: −−−
|
仙人 登録日: 2010/7/7 居住地: 神奈川県 投稿: 502 |
Re: LightBoxが導入について 導入失敗です。
なんらかのコードが間違っているか、単にキャッシュが効いてるだけかはわかりませんが・・・ ・キャッシュが効いてるだけであれば対象の画面を開いて、Ctrl + F5キーでリロードすれば動きます。 ・ファイル読込みが失敗している場合は、おっしゃっているような状態となりますので、以下のファイルが正しく読み込まれているかの確認してください。 jquery-1.10.2.min.js lightbox-2.6.min.js lightbox.css これ以上は実際作業されているサイトみないと助言は難しいです。 |
| 44048 |
投稿日時: 2013/10/9 9:56
対応状況: 確認中
|
半人前 登録日: 2013/6/3 居住地: 投稿: 11 |
Re: LightBoxが導入について patapataさん
ありがとうございます。 実際のページのソースを見て確認しましたが、 jquery-1.10.2.min.js lightbox-2.6.min.js lightbox.css は読み込みされているようです。 リロードもしましたが、変化なしです。 導入は厳しいようですね・・・ Lightbox以外に方法がないかもう一度検討してみます。 ありがとうございました。 |
| スレッド表示 | 新しいものから | 前のトピック | 次のトピック | トップ |
