EC-CUBEトップページ画像を管理画面からアップロードし、jQueryでスライドさせる

このカスタマイズを現行サイトへ実装したい方はこちら
トップページのバナー画像を複数アップロードできるようにし、jQueryを適用する。
(「支払い方法設定」をもとに作る)

▼3カラムに設定したとき

▼2カラムに設定したとき

(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 */

▼管理画面で、画像をアップロードする

▼登録済みの画面