ITOBEN STYLE > EC-CUBE2.12:トップページ画像をjQueryでスライドさせる。複数パターン登録。 2012年10月8日カテゴリー:未分類 EC-CUBE2.12:トップページ画像をjQueryでスライドさせる。複数パターン登録。 このカスタマイズを現行サイトへ実装したい方はこちら 上記4つのパターンについては、下記URLで実際の動きを確認できます。 http://www.kaiplus.com/download/user_data/design_template2.php ▼ここでのカスタマイズファイルをすべてダウンロードできます。 必要な箇所だけコピーしてご利用ください。 他のカスタマイズも含まれている場合がありますので、ファイルの上書きは絶対におやめください。 こちらから(facebookユーザーのみ) (1)データベースに追加する。 ① テーブル(dtb_upload_photo)を作成する 【MySQL・PostgreSQL】 [php] CREATE TABLE dtb_upload_photo ( id int NOT NULL, rank int, del_flg smallint NOT NULL DEFAULT 0, creator_id int NOT NULL, create_date timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, update_date timestamp NOT NULL, top_image text, memo01 text, memo02 text, PRIMARY KEY (id) ); [/php] ② テーブル(mtb_constants)にデータを追加する。 [php] INSERT INTO mtb_constants (id, name, rank, remarks) VALUES (‘TOP_IMAGETYPE_TWOCOLM’, ‘1’, 1419, ‘2カラム:トップページ画像表示選択 1 または 2’); INSERT INTO mtb_constants (id, name, rank, remarks) VALUES (‘TOP_IMAGETYPE_THREECOLM’, ‘1’, 1420, ‘3カラム:トップページ画像表示選択 1 または 2’) [/php] ③ 管理画面のパラメータ設定で、「この内容で登録する」をクリックする。 (2)トップページ画像保存用のフォルダを作成する。 ■html/upload/top_image/ (3)管理画面からスライド用の画像を登録できるようにする。 ① ■html/admin/contents/upload.php [php] init(); $objPage->process(); ?> [/php] ② ■data/class_extends/page_extends/admin/contents/LC_Page_Admin_Contents_Upload_Ex.php [php] [/php] ③ ■data/class/pages/admin/contents/LC_Page_Admin_Contents_Upload.php [php] tpl_mainpage = ‘contents/upload.tpl’; $this->tpl_mainno = ‘contents’; $this->tpl_subno = ‘upload’; $this->tpl_maintitle = ‘コンテンツ管理’; $this->tpl_subtitle = ‘トップ画像管理’; } /** * Page のプロセス. * * @return void */ function process() { $this->action(); $this->sendResponse(); } /** * Page のアクション. * * @return void */ function action() { $objDb = new SC_Helper_DB_Ex(); $mode = $this->getMode(); if (!empty($_POST)) { $objFormParam = new SC_FormParam_Ex(); $objFormParam->addParam(‘画像ID’, ‘id’, INT_LEN, ‘n’, array(‘NUM_CHECK’, ‘MAX_LENGTH_CHECK’)); $objFormParam->setParam($_POST); $objFormParam->convParam(); $arrErr = $objFormParam->checkError(); if (!empty($this->arrErr[‘id’])) { SC_Utils_Ex::sfDispException(); return; } $post = $objFormParam->getHashArray(); } switch($this->getMode()) { case ‘delete’: // ランク付きレコードの削除 $objDb->sfDeleteRankRecord(“dtb_upload_photo”, “id”, $post[‘id’]); // 再表示 $this->objDisplay->reload(); break; case ‘up’: $objDb->sfRankUp(“dtb_upload_photo”, “id”, $post[‘id’]); // 再表示 $this->objDisplay->reload(); break; case ‘down’: $objDb->sfRankDown(“dtb_upload_photo”, “id”, $post[‘id’]); // 再表示 $this->objDisplay->reload(); break; } $this->arrPaymentListFree = $this->lfGetPaymentList(); } /** * デストラクタ. * * @return void */ function destroy() { parent::destroy(); } /** * 一覧の取得. */ function lfGetPaymentList() { $objQuery =& SC_Query_Ex::getSingletonInstance(); $col = “id, top_image, memo01, memo02”; $where = “del_flg = 0”; $table = “dtb_upload_photo”; $objQuery->setOrder(“rank DESC”); $arrRet = $objQuery->select($col, $table, $where); return $arrRet; } } ?> [/php] ④ ■data/Smarty/templates/admin/contents/upload.tpl [php] ▼登録方法 ・ 画像サイズ 横幅:578px 高さ:272px(2カラム、3カラム共通) ・ 2カラム(タイプ1とタイプ2)、3カラム(タイプ1とタイプ2)のどれかを選択。 パラメータの、「TOP_IMAGETYPE_TWOCOLM」「TOP_IMAGETYPE_THREECOLM」で設定。 ・ 2カラムのタイプ1を使用する場合は、画像を5枚以上登録。 ・ 登録しているすべての画像を削除すると、img/banner/bnr_top_main.jpgが表示される。 画像を新規登録 ID 画像 説明 リンク先 編集 削除 移動 ★画像が登録されていません。編集画面にもどり、画像をアップロードした後、「この内容で登録する」をクリックしてください。 ⑤ ■html/admin/contents/upload_photo.php [php] init(); $objPage->process(); ?> [/php] ⑥ ■data/class_extends/page_extends/admin/contents/LC_Page_Admin_Contents_Upload_Photo_Ex.php [php] [/php] ⑦ ■data/class/pages/admin/contents/LC_Page_Admin_Contents_Upload_Photo.php [php] tpl_mainpage = ‘contents/upload_photo.tpl’; $this->tpl_mainno = ‘contents’; $this->tpl_subno = ‘upload_photo’; $this->tpl_maintitle = ‘コンテンツ管理’; $this->tpl_subtitle = ‘画像アップロード’; } /** * Page のプロセス. * * @return void */ function process() { $this->action(); $this->sendResponse(); } /** * Page のアクション. * * @return void */ function action() { $objFormParam = new SC_FormParam_Ex(); $mode = $this->getMode(); $this->lfInitParam($mode, $objFormParam); // ファイル管理クラス $this->objUpFile = new SC_UploadFile(IMAGE_TEMP_REALDIR, HTML_REALDIR . “upload/top_image/”); // ファイル情報の初期化 $this->objUpFile = $this->lfInitFile(); // Hiddenからのデータを引き継ぐ $this->objUpFile->setHiddenFileList($_POST); switch($mode) { case ‘edit’: $objFormParam->setParam($_REQUEST); $objFormParam->convParam(); $post = $objFormParam->getHashArray(); $this->arrErr = $this->lfCheckError($post, $objFormParam); if(count($this->arrErr) == 0) { $this->lfRegistData($post[‘id’], $_SESSION[‘member_id’], $objFormParam); $this->objUpFile->moveTempFile(); $this->tpl_onload = “location.href = ‘./upload.php’; return;”; } $this->tpl_id = $post[‘id’]; break; // 画像のアップロード case ‘upload_image’: $objFormParam->setParam($_REQUEST); $objFormParam->convParam(); $post = $objFormParam->getHashArray(); // ファイル存在チェック $this->arrErr = $this->objUpFile->checkEXISTS($post[‘image_key’]); // 画像保存処理 $this->arrErr[$post[‘image_key’]] = $this->objUpFile->makeTempFile($post[‘image_key’]); $this->tpl_id = $post[‘id’]; break; // 画像の削除 case ‘delete_image’: $objFormParam->setParam($_REQUEST); $objFormParam->convParam(); $this->arrErr = $objFormParam->checkError(); $post = $objFormParam->getHashArray(); if(count($this->arrErr) == 0) { $this->objUpFile->deleteFile($post[‘image_key’]); } $this->tpl_id = $post[‘id’]; break; case ‘pre_edit’: $objFormParam->setParam($_REQUEST); $objFormParam->convParam(); $this->arrErr = $objFormParam->checkError(); $post = $objFormParam->getHashArray(); if(count($this->arrErr) == 0) { $arrRet = $this->lfGetData($post[‘id’]); $objFormParam->addParam(“説明”, “memo01”, MTEXT_LEN, “KVa”, array(“MAX_LENGTH_CHECK”)); $objFormParam->addParam(“リンク先”, “memo02”, MTEXT_LEN, “KVa”, array(“MAX_LENGTH_CHECK”)); $objFormParam->setParam($arrRet); $this->objUpFile->setDBFileList($arrRet); } $this->tpl_id = $post[‘id’]; break; default: break; } $this->arrForm = $objFormParam->getFormParamList(); // FORM表示用配列を渡す。 $this->arrFile = $this->objUpFile->getFormFileList(IMAGE_TEMP_URLPATH, ROOT_URLPATH . “upload/top_image/”); // HIDDEN用に配列を渡す。 $this->arrHidden = array_merge((array)$this->arrHidden, (array)$this->objUpFile->getHiddenFileList()); } /** * デストラクタ. * * @return void */ function destroy() { parent::destroy(); } /* ファイル情報の初期化 */ function lfInitFile() { $this->objUpFile->addFile(“画像”, ‘top_image’, array(‘jpg’, ‘gif’, ‘png’), IMAGE_SIZE, false, TOP_IMAGE_WIDTH, TOP_IMAGE_HEIGHT); return $this->objUpFile; } /* パラメーター情報の初期化 */ function lfInitParam($mode, &$objFormParam) { switch ($mode) { case ‘edit’: $objFormParam->addParam(‘画像ID’, ‘id’, INT_LEN, ‘n’, array(‘NUM_CHECK’, ‘MAX_LENGTH_CHECK’)); $objFormParam->addParam(“説明”, “memo01”, MTEXT_LEN, “KVa”, array(“MAX_LENGTH_CHECK”)); $objFormParam->addParam(“リンク先”, “memo02”, MTEXT_LEN, “KVa”, array(“MAX_LENGTH_CHECK”)); break; case “upload_image”: case “delete_image”: $objFormParam->addParam(‘画像ID’, ‘id’, INT_LEN, ‘n’, array(‘NUM_CHECK’, ‘MAX_LENGTH_CHECK’)); $objFormParam->addParam(“画像キー”, “image_key”, STEXT_LEN, ‘KVa’, array(“EXIST_CHECK”, “MAX_LENGTH_CHECK”)); $objFormParam->addParam(“説明”, “memo01”, MTEXT_LEN, “KVa”, array(“MAX_LENGTH_CHECK”)); $objFormParam->addParam(“リンク先”, “memo02”, MTEXT_LEN, “KVa”, array(“MAX_LENGTH_CHECK”)); break; case “pre_edit”: $objFormParam->addParam(‘画像ID’, ‘id’, INT_LEN, ‘n’, array(‘NUM_CHECK’, ‘MAX_LENGTH_CHECK’)); break; } } /* DBからデータを読み込む */ function lfGetData($id) { $objQuery =& SC_Query_Ex::getSingletonInstance(); $where = “id = ?”; $arrRet = $objQuery->select(“*”, “dtb_upload_photo”, $where, array($id)); return $arrRet[0]; } /* DBへデータを登録する */ function lfRegistData($id = “”, $member_id, &$objFormParam) { $objQuery =& SC_Query_Ex::getSingletonInstance(); $sqlval = $objFormParam->getHashArray(); $arrRet = $this->objUpFile->getDBFileList(); // ファイル名の取得 $sqlval = array_merge($sqlval, $arrRet); $sqlval[‘update_date’] = ‘CURRENT_TIMESTAMP’; // 新規登録 if($id == “”) { // INSERTの実行 $sqlval[‘creator_id’] = $member_id; $sqlval[‘rank’] = $objQuery->max(‘rank’, “dtb_upload_photo”) + 1; $sqlval[‘create_date’] = ‘CURRENT_TIMESTAMP’; $sqlval[‘id’] = $objQuery->max(‘id’, “dtb_upload_photo”) + 1; $objQuery->insert(“dtb_upload_photo”, $sqlval); // 既存編集 } else { $where = “id = ?”; $objQuery->update(“dtb_upload_photo”, $sqlval, $where, array($id)); } } /* 入力内容のチェック */ function lfCheckError($post, $objFormParam) { // DBのデータを取得 $arrUpphotoData = $this->lfGetData($post[‘id’]); // 入力データを渡す。 $arrRet = $objFormParam->getHashArray(); $objErr = new SC_CheckError_Ex($arrRet); $objErr->arrErr = $objFormParam->checkError(); return $objErr->arrErr; } } ?> [/php] ⑧ ■data/Smarty/templates/admin/contents/upload_photo.tpl [php] ▼登録方法 ・ 画像サイズ 横幅:578px 高さ:272px(2カラム、3カラム共通) ・ 2カラム(タイプ1とタイプ2)、3カラム(タイプ1とタイプ2)のどれかを選択。 パラメータの、「TOP_IMAGETYPE_TWOCOLM」「TOP_IMAGETYPE_THREECOLM」で設定。 ・ 2カラムのタイプ1を使用する場合は、画像を5枚以上登録。 ・ 登録しているすべての画像を削除すると、img/banner/bnr_top_main.jpgが表示される。 トップページの画像アップロード 画像(幅528px、高さ272px) コメント(表示しない場合は空欄) リンク先(リンクしない場合は空欄) 前のページに戻る この内容で登録する [/php] ⑨ ■data/Smarty/templates/admin/contents/subnavi.tplに追加 [php] class=”on” id=”navi-contents-upload”>(4)フロントページで表示する。 ① データベースから画像を読み込む。 ■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 caroufredselを利用する。 http://caroufredsel.frebsite.nl/ ■html/js/jquery.caroufredsel(追加) ■data/Smarty/templates/default/site_frame.tpl [php] [/php] ③ 画像を追加する。 ■html/user_data/packages/default/img/button/btn_topnavi.png ■html/user_data/packages/default/img/button/dummy.gif (1px×1pxの透過画像) ④ ■data/Smarty/templates/default/index.tpl [php] $(function() { $('#top_image_area3 #carousel_top03').carouFredSel({ width: 776, //box全体の幅(画像の影をプラス、割り切れる値) height: 272, align: false, padding: [0, 531, 0, 0], //左から2つ目の値は、画像の幅から下のwidthの値を引いたもの。580-49=531。contents.cssの#top_image_area3 #carousel_toptop03 div {margin-right: -531px;}に対応。 items: { width: 49, //全体の幅から画像の幅を引き、visible:「5」なのでメイン画像の1つを除いた「4」で割る。(776-580)÷4=49。contents.cssの#top_image_area3 #carousel_top03 div img.link {left:49px;}に対応。 height: 272, visible: 5, minimum: 1 }, scroll: { items: 1, duration: 1000 }, auto: { pauseDuration: 5000, pauseOnHover: true } }); $('#carousel_top03').children().click(function() { $('#carousel_top03').trigger( 'slideTo', [this, -4, 'prev'] ); }); }); ⑤ ■html/user_data/packages/default/css/contents.css ▼TOPの最後に追加 [css] /* トップ画像スライド表示 ———————————————– */ /* 3カラム タイプ1 */ #top_image_area1 { border: 1px solid #ccc; width: 578px; height: 272px; margin-bottom:10px; } #top_image_area1 #inner { position: relative; width: 578px; height: 272px; overflow: hidden; } #top_image_area1 #carousel_top01 .item { display: block; float: left; } #top_image_area1 #carousel_top01 .text { /*コメントの位置*/ position:absolute; top:170px; width:568px; /*画像の幅に合わせる*/ z-index:50; background-color: #666; background-color: rgba(30, 30, 30, 0.5); color:#FFF; font-weight:bold; padding:5px; } #top_image_area1 #navi_top01 { background-color: #666; background-color: rgba(30, 30, 30, 0.5); border-top: 1px solid #333; width: 578px; height: 50px; position: absolute; bottom: -40px; left: 0; z-index: 10; } #top_image_area1 #timer_top01 { background-color: #666; background-color: rgba(20, 20, 20, 0.5); width: 0; height: 50px; position: absolute; z-index: 20; top: 0; left: 0; } #top_image_area1 #prev_top01, #top_image_area1 #next_top01, #top_image_area1 #play_top01 { display: block; position: absolute; z-index: 30; } #top_image_area1 #prev_top01, #top_image_area1 #next_top01 { width: 24px; height: 24px; top: 10px; } #top_image_area1 #play_top01 { width: 24px; height: 24px; top: 10px; background: transparent url(../img/button/btn_topnavi.png) no-repeat 0 0; left: 50%; margin-left: -12px; } #top_image_area1 #play_top01.paused { background-position:-24px 0; } #top_image_area1 #prev_top01 { background: transparent url(../img/button/btn_topnavi.png) no-repeat 0 -24px; left: 220px; } #top_image_area1 #next_top01 { background: transparent url(../img/button/btn_topnavi.png) no-repeat -24px -24px; right: 220px; } /* 3カラム タイプ2 */ #top_image_area2 { width: 578px; position:relative; margin-bottom:10px; } #top_image_area2 #carousel_top02 { width: 578px; height: 272px; overflow: hidden; } #top_image_area2 #carousel_top02 div { display: block; float: left; border:#CCC 1px solid; } #top_image_area2 #carousel_top02 .text { /*コメントの位置*/ position:absolute; top:170px; width:568px; /*画像の幅に合わせる*/ background-color: #666; background-color: rgba(30, 30, 30, 0.5); color:#FFF; font-weight:bold; padding:5px; } #top_image_area2 #pager_top02 { text-align: right; padding: 10px 30px 0 0; } #top_image_area2 #pager_top02 a { background-color: #356; display: inline-block; width: 15px; height: 15px; margin-right: 6px; border-radius: 10px; box-shadow: 0 1px 1px #cef; } #top_image_area2 #pager_top02 a.selected { background-color: #134; } #top_image_area2 #pager_top02 a span { display: none; } #top_image_area2 #thumbs_top02 { display: none; border: 1px solid rgba(0, 0, 0, 0.8); background-color: rgba(0, 0, 0, 0.5); width: 150px; height: 77px; padding: 5px; position: absolute; top: 170px; right: 10px; } #top_image_area2 #thumbs_top02 img { display: block; float: left; } /* 2カラム タイプ1 */ #top_image_area3 { width: 763px; height: 272px; background-color:#F5F5F5; overflow: hidden; border: 1px solid #ccc; margin-bottom:10px; } #top_image_area3 #carousel_top03 div { cursor: pointer; margin-right: -531px; /*index.tplに合わせる*/ float: left; position: relative; box-shadow: 0 0 10px #000; } #top_image_area3 #carousel_top03 div:last-child { cursor: default; } #top_image_area3 #carousel_top03 div .text { /*コメントの位置*/ position:absolute; top:170px; width:568px; /*画像の幅に合わせる*/ background-color: #666; background-color: rgba(30, 30, 30, 0.5); color:#FFF; font-weight:bold; padding:5px; } #top_image_area3 #carousel_top03 div img.link { position:absolute; top:0; left:49px; /*index.tplに合わせる*/ } /* 2カラム タイプ2 */ #top_image_area4 { position:relative; background-color: #fff; width: 763px; height: 272px; overflow: hidden; border:1px solid #CCC; margin-bottom:10px; } #carousel_top04 div { display: block; float: left; } #top_image_area4 #carousel_top04 .text { /*コメントの位置*/ position:absolute; top:170px; width:568px; /*画像の幅に合わせる*/ background-color: #666; background-color: rgba(30, 30, 30, 0.5); color:#FFF; font-weight:bold; padding:5px; } #prev_top04, #next_top04 { background-color: rgba(255, 255, 255, 0.7); display: block; height: 272px; width: 93px; /*左右の透けて見える画像の幅*/ top: 0; position: absolute; } #prev_top04:hover, #next_top04:hover { background-color: #fff; background-color: rgba(255, 255, 255, 0.8); } #prev_top04 { left: 0; } #next_top04 { right: 0; } [/css]
このカスタマイズを現行サイトへ実装したい方はこちら
上記4つのパターンについては、下記URLで実際の動きを確認できます。
http://www.kaiplus.com/download/user_data/design_template2.php
▼ここでのカスタマイズファイルをすべてダウンロードできます。
必要な箇所だけコピーしてご利用ください。
他のカスタマイズも含まれている場合がありますので、ファイルの上書きは絶対におやめください。
こちらから(facebookユーザーのみ)
(1)データベースに追加する。
① テーブル(dtb_upload_photo)を作成する
【MySQL・PostgreSQL】
[php]
CREATE TABLE dtb_upload_photo (
id int NOT NULL,
rank int,
del_flg smallint NOT NULL DEFAULT 0,
creator_id int NOT NULL,
create_date timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
update_date timestamp NOT NULL,
top_image text,
memo01 text,
memo02 text,
PRIMARY KEY (id)
);
[/php]
② テーブル(mtb_constants)にデータを追加する。
[php]
INSERT INTO mtb_constants (id, name, rank, remarks) VALUES (‘TOP_IMAGETYPE_TWOCOLM’, ‘1’, 1419, ‘2カラム:トップページ画像表示選択 1 または 2’);
INSERT INTO mtb_constants (id, name, rank, remarks) VALUES (‘TOP_IMAGETYPE_THREECOLM’, ‘1’, 1420, ‘3カラム:トップページ画像表示選択 1 または 2’)
[/php]
③ 管理画面のパラメータ設定で、「この内容で登録する」をクリックする。
(2)トップページ画像保存用のフォルダを作成する。
■html/upload/top_image/
(3)管理画面からスライド用の画像を登録できるようにする。
① ■html/admin/contents/upload.php
[php]
init();
$objPage->process();
?>
[/php]
② ■data/class_extends/page_extends/admin/contents/LC_Page_Admin_Contents_Upload_Ex.php
[php]
[/php]
③ ■data/class/pages/admin/contents/LC_Page_Admin_Contents_Upload.php
[php]
tpl_mainpage = ‘contents/upload.tpl’;
$this->tpl_mainno = ‘contents’;
$this->tpl_subno = ‘upload’;
$this->tpl_maintitle = ‘コンテンツ管理’;
$this->tpl_subtitle = ‘トップ画像管理’;
}
/**
* Page のプロセス.
*
* @return void
*/
function process() {
$this->action();
$this->sendResponse();
}
/**
* Page のアクション.
*
* @return void
*/
function action() {
$objDb = new SC_Helper_DB_Ex();
$mode = $this->getMode();
if (!empty($_POST)) {
$objFormParam = new SC_FormParam_Ex();
$objFormParam->addParam(‘画像ID’, ‘id’, INT_LEN, ‘n’, array(‘NUM_CHECK’, ‘MAX_LENGTH_CHECK’));
$objFormParam->setParam($_POST);
$objFormParam->convParam();
$arrErr = $objFormParam->checkError();
if (!empty($this->arrErr[‘id’])) {
SC_Utils_Ex::sfDispException();
return;
}
$post = $objFormParam->getHashArray();
}
switch($this->getMode()) {
case ‘delete’:
// ランク付きレコードの削除
$objDb->sfDeleteRankRecord(“dtb_upload_photo”, “id”, $post[‘id’]);
// 再表示
$this->objDisplay->reload();
break;
case ‘up’:
$objDb->sfRankUp(“dtb_upload_photo”, “id”, $post[‘id’]);
// 再表示
$this->objDisplay->reload();
break;
case ‘down’:
$objDb->sfRankDown(“dtb_upload_photo”, “id”, $post[‘id’]);
// 再表示
$this->objDisplay->reload();
break;
}
$this->arrPaymentListFree = $this->lfGetPaymentList();
}
/**
* デストラクタ.
*
* @return void
*/
function destroy() {
parent::destroy();
}
/**
* 一覧の取得.
*/
function lfGetPaymentList() {
$objQuery =& SC_Query_Ex::getSingletonInstance();
$col = “id, top_image, memo01, memo02”;
$where = “del_flg = 0”;
$table = “dtb_upload_photo”;
$objQuery->setOrder(“rank DESC”);
$arrRet = $objQuery->select($col, $table, $where);
return $arrRet;
}
}
?>
[/php]
④ ■data/Smarty/templates/admin/contents/upload.tpl
[php]