このカスタマイズを現行サイトへ実装したい方はこちら
トップページのバナー画像を複数アップロードできるようにし、jQueryを適用する。
(「支払い方法設定」をもとに作る)
(1)データベースにテーブルを追加する
名前:dtb_upload_photo フィールド:9
—————————————–
フィールド:id
種別:INT
デフォルト値:None
not null
フィールド:rank
種別:INT
デフォルト値:NULL
NULL:チェック
フィールド:del_flg
種別:SMALLINT
デフォルト値:0
not null
フィールド:creator_id
種別:INT
デフォルト値:None
not null
フィールド:create_date
種別:TIMESTAMP
デフォルト値:CURRENT_TIMESTAMP
not null
フィールド:update_date
種別:TIMESTAMP
デフォルト値:0000-00-00 00:00:00
not null
フィールド:top_image
種別:TEXT
デフォルト値:NULL
照合順序:utf8_general_ci
NULL:チェック
フィールド:memo01
種別:TEXT
デフォルト値:NULL
照合順序:utf8_general_ci
NULL:チェック
フィールド:memo02
種別:TEXT
デフォルト値:NULL
照合順序:utf8_general_ci
NULL:チェック
—————————————–
(2)画像のサイズ指定が行えるように、mtb_constantsテーブルに登録する。
—————————————–
id:TOP_IMAGE_WIDTH
name:580
rank:1239(←適宜)
remarks:トップページ画像横
id:TOP_IMAGE_HEIGHT
name:272
rank:1240(←適宜)
remarks:トップページ画像縦
—————————————–
★システム設定>パラメーター設定を開き、「この内容で登録する」をクリック。
(2)アップロードする画像を保存するためのフォルダを作成する
■html/upload/top_image
(3)画像をアップロードするためのファイルを新規作成
①
■html/admin/contents/upload.php
■data/class_extends/page_extends/admin/contents/LC_Page_Admin_Contents_Upload_Ex.php
■data/class/pages/admin/contents/LC_Page_Admin_Contents_Upload.php
■data/Smarty/templates/admin/contents/upload.tpl
②
■html/admin/contents/upload_photo.php
■data/class_extends/page_extends/admin/contents/LC_Page_Admin_Contents_Upload_Photo_Ex.php
■data/class/pages/admin/contents/LC_Page_Admin_Contents_Upload_Photo.php
■data/Smarty/templates/admin/contents/upload_photo.tpl
(4)管理画面のメニューに追加
■data/Smarty/templates/admin/contents/subnavi.tpl
<li<!--{if $tpl_subno == 'upload'}--><!--{/if}--> id="navi-contents-upload"><a href="<!--{$smarty.const.ROOT_URLPATH}--><!--{$smarty.const.ADMIN_DIR}-->contents/upload.php"><span>トップ画像管理</span></a></li>
(5)画像を表示するためのファイルを作成
① ■data/class/pages/LC_Page_Index.php
function action()内に追加
$objQuery =SC_Query_Ex::getSingletonInstance(); $this->arrRet = array(); //トップ画像を取得 $arrRet = $objQuery->select("*", "dtb_upload_photo", "del_flg = 0"); //データベースからデータの取得ができたか if(isset($arrRet)){ $this->arrRet = $arrRet; }
② jQueryを適用する。画像は下記よりダウンロードして使用する。
http://landofcoder.com/jquery-plugins/lof-jslidernew-plugin.html
■ html/js/jquery.lofslidernewsフォルダを置く。
jquery.lofslidernewsフォルダの中身と位置関係
——————————————
■jquery.lofslidernews/jquery.easing.js(jsフォルダに初めから入っているjquery.easing.1.3.jsを利用するので、こちらは不使用)
■jquery.lofslidernews/script.js
■jquery.lofslidernews/images ←必要のないサンプル画像は削除
■jquery.lofslidernews/css/style1.css
■jquery.lofslidernews/css/style2.css
——————————————
③ ■data/Smarty/templates/default/site_frame.tplに追加
<!--▼jquery.easing.1.3.jsは、トップ画像スライド・パネルスライダーで利用--> <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.easing.1.3.js"></script> <!--トップ画像スライド--> <!--{assign var=index value="`$smarty.const.ROOT_URLPATH`index.php"}--> <!--{if $smarty.server.PHP_SELF==$index}--> <!--{if $tpl_column_num == 3}--> <link media="screen" rel="stylesheet" href="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.lofslidernews/css/style1.css" /> <!--{else}--> <link media="screen" rel="stylesheet" href="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.lofslidernews/css/style2.css" /> <!--{/if}--> <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.lofslidernews/script.js"></script> <!--▲jquery.easing.1.3.js利用--> <!--{/if}-->
④ ■data/Smarty/templates/default/index.tplの書き換え
<!--{* * This file is part of EC-CUBE * * Copyright(c) 2000-2011 LOCKON CO.,LTD. All Rights Reserved. * * http://www.lockon.co.jp/ * * This program is free software; you can redistribute it and/or * modify it under the terms of the GNU General Public License * as published by the Free Software Foundation; either version 2 * of the License, or (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program; if not, write to the Free Software * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. *}--> <!--{if $tpl_column_num == 3}--><!--▼3カラム▼--> <script type="text/javascript"> $(document).ready( function(){ // buttons for next and previous item var buttons = { previous:$('#jslidernews1 .button-previous') , next:$('#jslidernews1 .button-next') }; $('#jslidernews1').lofJSidernews( { interval : 6000, direction: 'opacitys', easing: 'easeInOutExpo', duration: 1200, auto: true, maxItemDisplay: 4, navPosition: 'horizontal', // horizontal navigatorHeight: 32, navigatorWidth: 80, mainWidth: <!--{$smarty.const.TOP_IMAGE_WIDTH}-->, buttons: buttons } ); }); </script> <!--{if $arrRet}--> <div id="jslidernews1" class="lof-slidecontent" style="width:<!--{$smarty.const.TOP_IMAGE_WIDTH}-->px; height:<!--{$smarty.const.TOP_IMAGE_HEIGHT}-->px;"> <div class="preload"><div></div></div> <!-- MAIN CONTENT --> <div class="main-slider-content" style="width:<!--{$smarty.const.TOP_IMAGE_WIDTH}-->px; height:<!--{$smarty.const.TOP_IMAGE_HEIGHT}-->px;"> <ul class="sliders-wrap-inner"> <!--{section name=cnt loop=$arrRet}--> <li> <a href="<!--{$arrRet[cnt].memo02|h}-->"><img src="upload/top_image/<!--{$arrRet[cnt].top_image|h}-->" title="" / ></a> <!--{if $arrRet[cnt].memo01 !=""}--> <div class="slider-description"> <p><!--{$arrRet[cnt].memo01|h|nl2br}--></p> </div> <!--{/if}--> </li> <!--{/section}--> </ul> </div> <!-- END MAIN CONTENT --> <!-- NAVIGATOR --> <div class="navigator-content"> <div class="button-next">Next</div> <div class="navigator-wrapper"> <ul class="navigator-wrap-inner"> <!--{section name=cnt loop=$arrRet}--> <li><img src="upload/top_image/<!--{$arrRet[cnt].top_image|h}-->" width="70" height="25" /></li> <!--{/section}--> </ul> </div> <div class="button-previous">Previous</div> </div> <!-- END OF NAVIGATOR --> <!-- BUTTON PLAY-STOP --> <div class="button-control"><span></span></div> <!-- END OF BUTTON PLAY-STOP --> </div><!--/jslidernews1--> <!--{else}--> <div id="main_image"> <a href="<!--{$smarty.const.P_DETAIL_URLPATH}-->1.html" onmouseover="chgImg('<!--{$TPL_URLPATH}-->img/banner/bnr_top_main_on.jpg','bnr_top_main');" onmouseout="chgImg('<!--{$TPL_URLPATH}-->img/banner/bnr_top_main.jpg','bnr_top_main');"><img src="<!--{$TPL_URLPATH}-->img/banner/bnr_top_main.jpg" alt="詳細はこちら" id="bnr_top_main" name="bnr_top_main" /> </a> </div> <br /> <!--{/if}--> <!--{else}--><!--▼3カラム以外▼--> <script type="text/javascript"> $(document).ready( function(){ var buttons = { previous:$('#jslidernews2 .button-previous') , next:$('#jslidernews2 .button-next') }; $('#jslidernews2').lofJSidernews( { interval:6000, easing:'easeInOutQuad', duration:1200, auto:true, mainWidth:<!--{$smarty.const.TOP_IMAGE_WIDTH}-->, mainHeight:<!--{$smarty.const.TOP_IMAGE_HEIGHT}-->, navigatorHeight: 91, navigatorWidth: 200, maxItemDisplay:3, buttons:buttons } ); }); </script> <!--{if $arrRet}--> <style> ul.lof-main-wapper li { position:relative; } </style> <div id="jslidernews2" class="lof-slidecontent" style="width:<!--{$smarty.const.TOP_IMAGE_WIDTH+185}-->px; height:<!--{$smarty.const.TOP_IMAGE_HEIGHT}-->px;"> <div class="preload"><div></div></div> <div class="button-previous">Previous</div> <!-- MAIN CONTENT --> <div class="main-slider-content" style="width:<!--{$smarty.const.TOP_IMAGE_WIDTH}-->px; height:<!--{$smarty.const.TOP_IMAGE_HEIGHT}-->px;"> <ul class="sliders-wrap-inner"> <!--{section name=cnt loop=$arrRet}--> <li> <a href="<!--{$arrRet[cnt].memo02|h}-->"><img src="upload/top_image/<!--{$arrRet[cnt].top_image|h}-->" title="" / ></a> <!--{if $arrRet[cnt].memo01 !=""}--> <div class="slider-description"> <p><!--{$arrRet[cnt].memo01|h|nl2br}--></p> </div> <!--{/if}--> </li> <!--{/section}--> </ul> </div> <!-- END MAIN CONTENT --> <!-- NAVIGATOR --> <div class="navigator-content"> <div class="navigator-wrapper"> <ul class="navigator-wrap-inner"> <!--{section name=cnt loop=$arrRet}--> <li> <div> <img src="upload/top_image/<!--{$arrRet[cnt].top_image|h}-->" /> </div> </li> <!--{/section}--> </ul> </div> </div> <!-- END OF NAVIGATOR --> <div class="button-next">Next</div> <!-- BUTTON PLAY-STOP --> <div class="button-control"><span></span></div> <!-- END OF BUTTON PLAY-STOP --> </div> <!--{else}--> <div id="main_image"> <a href="<!--{$smarty.const.P_DETAIL_URLPATH}-->1.html" onmouseover="chgImg('<!--{$TPL_URLPATH}-->img/banner/bnr_top_main_on.jpg','bnr_top_main');" onmouseout="chgImg('<!--{$TPL_URLPATH}-->img/banner/bnr_top_main.jpg','bnr_top_main');"><img src="<!--{$TPL_URLPATH}-->img/banner/bnr_top_main.jpg" alt="詳細はこちら" id="bnr_top_main" name="bnr_top_main" /> </a> </div> <br /> <!--{/if}--> <!--{/if}-->
⑤ ■html/user_data/packages/default/css/contents.css
11行目あたり
#main_image { margin-bottom: 10px; text-align: center; } ↓ #jslidernews1, #jslidernews2 { margin-bottom: 10px; } /* トップ画像スライド表示にかかわるCSSは→◆jquery.lofslidernews/css/style1.css ◆jquery.lofslidernews/css/style2.css */