ITOBEN STYLE > EC-CUBEトップページ画像を管理画面からアップロードし、jQueryでスライドさせる
2012年3月13日カテゴリー:未分類

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

[php] id=”navi-contents-upload”>（5）画像を表示するためのファイルを作成
①　■data/class/pages/LC_Page_Index.php
function action()内に追加

[php]
$objQuery =SC_Query_Ex::getSingletonInstance();
$this->arrRet = array();

//トップ画像を取得
$arrRet = $objQuery->select(“*”, “dtb_upload_photo”, “del_flg = 0”);

//データベースからデータの取得ができたか
if(isset($arrRet)){
$this->arrRet = $arrRet;
}
[/php]

② 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に追加

[php]








[/php]

④　■data/Smarty/templates/default/index.tplの書き換え

[php]


    • Next

    • Previous