上記４つのパターンについては、下記URLで実際の動きを確認できます。
http://www.kaiplus.com/download/user_data/design_template2.php
▼ここでのカスタマイズファイルをすべてダウンロードできます。
必要な箇所だけコピーしてご利用ください。
他のカスタマイズも含まれている場合がありますので、ファイルの上書きは絶対におやめください。
こちらから（facebookユーザーのみ）
（1）データベースに追加する。
① テーブル（dtb_upload_photo）を作成する
【MySQL・PostgreSQL】
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) );
② テーブル（mtb_constants）にデータを追加する。
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')
③ 管理画面のパラメータ設定で、「この内容で登録する」をクリックする。
（2）トップページ画像保存用のフォルダを作成する。
■html/upload/top_image/
（3）管理画面からスライド用の画像を登録できるようにする。
① ■html/admin/contents/upload.php
<?php
// {{{ requires
require_once '../require.php';
require_once CLASS_EX_REALDIR . 'page_extends/admin/contents/LC_Page_Admin_Contents_Upload_Ex.php';
// }}}
// {{{ generate page
$objPage = new LC_Page_Admin_Contents_Upload_Ex();
register_shutdown_function(array($objPage, 'destroy'));
$objPage->init();
$objPage->process();
?>
② ■data/class_extends/page_extends/admin/contents/LC_Page_Admin_Contents_Upload_Ex.php
<?php
// {{{ requires
require_once CLASS_REALDIR . 'pages/admin/contents/LC_Page_Admin_Contents_Upload.php';
class LC_Page_Admin_Contents_Upload_Ex extends LC_Page_Admin_Contents_Upload {
// }}}
// {{{ functions
/**
* Page を初期化する.
*
* @return void
*/
function init() {
parent::init();
}
/**
* Page のプロセス.
*
* @return void
*/
function process() {
parent::process();
}
/**
* デストラクタ.
*
* @return void
*/
function destroy() {
parent::destroy();
}
}
?>
③ ■data/class/pages/admin/contents/LC_Page_Admin_Contents_Upload.php
<?php
// {{{ requires
require_once CLASS_EX_REALDIR . 'page_extends/admin/LC_Page_Admin_Ex.php';
class LC_Page_Admin_Contents_Upload extends LC_Page_Admin_Ex {
// }}}
// {{{ functions
/**
* Page を初期化する.
*
* @return void
*/
function init() {
parent::init();
$this->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;
}
}
?>
④ ■data/Smarty/templates/admin/contents/upload.tpl
<form name="form1" id="form1" method="post" action="?">
<input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" />
<input type="hidden" name="mode" value="edit" />
<input type="hidden" name="id" value="<!--{$tpl_id}-->" />
<div id="contents" class="contents-main">
<div style="margin:-20px 0 20px 0;">
<ul style="line-height:1.5em; margin-bottom:20px;">
<li><strong>▼登録方法</strong></li>
<li>・ 画像サイズ <span class="attention">横幅：578px 高さ：272px</span>（2カラム、3カラム共通）</li>
<li>・ 2カラム（タイプ1とタイプ2）、3カラム（タイプ1とタイプ2）のどれかを選択。<br />
パラメータの、「<span class="attention">TOP_IMAGETYPE_TWOCOLM</span>」「<span class="attention">TOP_IMAGETYPE_THREECOLM</span>」で設定。</li>
<li>・ <strong>2カラムのタイプ1を使用する場合は、画像を5枚以上登録。</strong></li>
<li>・ 登録しているすべての画像を削除すると、img/banner/<span class="attention">bnr_top_main.jpg</span>が表示される。</li>
</ul>
</div>
<div class="btn">
<ul>
<li><a class="btn-action" href="javascript:;" name="subm2" onclick="fnChangeAction('./upload_photo.php'); fnModeSubmit('','',''); return false;">
<span class="btn-next">画像を新規登録</span></a></li>
</ul>
</div>
<table class="list">
<col width="5%">
<col width="20%">
<col width="30%">
<col width="20%">
<col width="5%">
<col width="5%">
<col width="15%">
<tr>
<th class="center">ID</th>
<th>画像</th>
<th>説明</th>
<th>リンク先</th>
<th>編集</th>
<th>削除</th>
<th>移動</th>
</tr>
<!--{section name=cnt loop=$arrPaymentListFree}-->
<tr>
<td class="center"><!--{$arrPaymentListFree[cnt].id|h}--></td>
<td class="center">
<!--{if $arrPaymentListFree[cnt].top_image == ""}-->
<span class="red bold">★画像が登録されていません。</span><br />編集画面にもどり、画像をアップロードした後、「この内容で登録する」をクリックしてください。
<!--{else}-->
<img src="<!--{$smarty.const.ROOT_URLPATH}-->upload/top_image/<!--{$arrPaymentListFree[cnt].top_image|sfNoImageMainList|h}-->" width="200" />
<!--{/if}-->
</td>
<td class="left"><!--{$arrPaymentListFree[cnt].memo01|h|nl2br}--></td>
<td class="left"><!--{$arrPaymentListFree[cnt].memo02|h}--></td>
<td class="center"><!--{if $arrPaymentListFree[cnt].fix != 1}--><a href="?" onclick="fnChangeAction('./upload_photo.php'); fnModeSubmit('pre_edit', 'id', <!--{$arrPaymentListFree[cnt].id}-->); return false;">編集</a><!--{else}-->-<!--{/if}--></td>
<td class="center"><!--{if $arrPaymentListFree[cnt].fix != 1}--><a href="?" onclick="fnModeSubmit('delete', 'id', <!--{$arrPaymentListFree[cnt].id}-->); return false;">削除</a><!--{else}-->-<!--{/if}--></td>
<td class="center">
<!--{if $smarty.section.cnt.iteration != 1}-->
<a href="?" onclick="fnModeSubmit('up','id', <!--{$arrPaymentListFree[cnt].id}-->); return false;">上へ</a>
<!--{/if}-->
<!--{if $smarty.section.cnt.iteration != $smarty.section.cnt.last}-->
<a href="?" onclick="fnModeSubmit('down','id', <!--{$arrPaymentListFree[cnt].id}-->); return false;">下へ</a>
<!--{/if}-->
</td>
</tr>
<!--{/section}-->
</table>
</div>
</form>
⑤ ■html/admin/contents/upload_photo.php
<?php
// {{{ requires
require_once '../require.php';
require_once CLASS_EX_REALDIR . 'page_extends/admin/contents/LC_Page_Admin_Contents_Upload_Photo_Ex.php';
// }}}
// {{{ generate page
$objPage = new LC_Page_Admin_Contents_Upload_Photo_Ex();
register_shutdown_function(array($objPage, 'destroy'));
$objPage->init();
$objPage->process();
?>
⑥ ■data/class_extends/page_extends/admin/contents/LC_Page_Admin_Contents_Upload_Photo_Ex.php
<?php
// {{{ requires
require_once CLASS_REALDIR . 'pages/admin/contents/LC_Page_Admin_Contents_Upload_Photo.php';
class LC_Page_Admin_Contents_Upload_Photo_Ex extends LC_Page_Admin_Contents_Upload_Photo {
// }}}
// {{{ functions
/**
* Page を初期化する.
*
* @return void
*/
function init() {
parent::init();
}
/**
* Page のプロセス.
*
* @return void
*/
function process() {
parent::process();
}
/**
* デストラクタ.
*
* @return void
*/
function destroy() {
parent::destroy();
}
}
?>
⑦ ■data/class/pages/admin/contents/LC_Page_Admin_Contents_Upload_Photo.php
<?php
// {{{ requires
require_once CLASS_EX_REALDIR . 'page_extends/admin/LC_Page_Admin_Ex.php';
class LC_Page_Admin_Contents_Upload_Photo extends LC_Page_Admin_Ex {
// {{{ properties
/** SC_UploadFile インスタンス */
var $objUpFile;
// }}}
// {{{ functions
/**
* Page を初期化する.
*
* @return void
*/
function init() {
parent::init();
$this->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;
}
}
?>
⑧ ■data/Smarty/templates/admin/contents/upload_photo.tpl
<form name="form1" id="form1" method="post" action="./upload_photo.php" enctype="multipart/form-data">
<input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" />
<input type="hidden" name="mode" value="edit" />
<input type="hidden" name="id" value="<!--{$tpl_id}-->" />
<input type="hidden" name="image_key" value="" />
<!--{foreach key=key item=item from=$arrHidden}-->
<input type="hidden" name="<!--{$key}-->" value="<!--{$item|h}-->" />
<!--{/foreach}-->
<div id="contents" class="contents-main">
<div style="margin:-20px 0 20px 0;">
<ul style="line-height:1.5em; margin-bottom:20px;">
<li><strong>▼登録方法</strong></li>
<li>・ 画像サイズ <span class="attention">横幅：578px 高さ：272px</span>（2カラム、3カラム共通）</li>
<li>・ 2カラム（タイプ1とタイプ2）、3カラム（タイプ1とタイプ2）のどれかを選択。<br />
パラメータの、「<span class="attention">TOP_IMAGETYPE_TWOCOLM</span>」「<span class="attention">TOP_IMAGETYPE_THREECOLM</span>」で設定。</li>
<li>・ <strong>2カラムのタイプ1を使用する場合は、画像を5枚以上登録。</strong></li>
<li>・ 登録しているすべての画像を削除すると、img/banner/<span class="attention">bnr_top_main.jpg</span>が表示される。</li>
</ul>
</div>
<h2>トップページの画像アップロード</h2>
<table class="form">
<col width="20%">
<col width="80%">
<tr>
<th><span class="bold">画像</span><br />（幅528px、高さ272px）</th>
<td>
<!--{assign var=key value="top_image"}-->
<span class="attention"><!--{$arrErr[$key]}--></span>
<!--{if $arrFile[$key].filepath != ""}-->
<img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrForm.name|h}-->"> <br /><a href="" onclick="fnModeSubmit('delete_image', 'image_key', '<!--{$key}-->'); return false;">[画像の取り消し]</a><br />
<!--{/if}-->
<input type="file" name="<!--{$key}-->" size="50" class="box50" style="<!--{$arrErr[$key]|sfGetErrorColor}-->" />
<a class="btn-normal" href="javascript:;" name="btn" onclick="fnModeSubmit('upload_image', 'image_key', '<!--{$key}-->'); return false;">アップロード</a>
</td>
</tr>
<tr>
<th><span class="bold">コメント</span><br />（表示しない場合は空欄）</th>
<td>
<!--{assign var=key value="memo01"}-->
<span class="attention"><!--{$arrErr[$key]}--></span>
<textarea name="<!--{$arrForm[$key].keyname}-->" cols="80" rows="6" maxlength="<!--{$arrForm[$key].length}--> style="<!--{$arrErr[$key]|sfGetErrorColor}-->" /><!--{$arrForm[$key].value|h}--></textarea>
</td>
</tr>
<tr>
<th><span class="bold">リンク先</span><br />（リンクしない場合は空欄）</th>
<td>
<!--{assign var=key value="memo02"}-->
<input type="text" name="<!--{$arrForm[$key].keyname}-->" value="<!--{$arrForm[$key].value|h}-->" size="50" class="box50" maxlength="<!--{$arrForm[$key].length}-->" style="<!--{$arrErr[$key]|sfGetErrorColor}-->" />
</td>
</tr>
</table>
<div class="btn-area">
<ul>
<li><a class="btn-action" href="javascript:;" onclick="location.href='./upload.php';"><span class="btn-prev">前のページに戻る</span></a></li>
<li class="btn-action"><a href="javascript:;" onclick="fnFormModeSubmit('form1', 'edit', '', ''); return false;"><span class="btn-next">この内容で登録する</span></a></li>
</ul>
</div>
</div>
</form>
⑨ ■data/Smarty/templates/admin/contents/subnavi.tplに追加
<!--▼トップ画像管理-->
<li<!--{if $tpl_subno == 'upload'}--> class="on"<!--{/if}--> id="navi-contents-upload"><a href="<!--{$smarty.const.ROOT_URLPATH}--><!--{$smarty.const.ADMIN_DIR}-->contents/upload.php"><span>トップ画像管理</span></a></li>
<!--▲トップ画像管理-->
（4）フロントページで表示する。
① データベースから画像を読み込む。
■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 caroufredselを利用する。
http://caroufredsel.frebsite.nl/
■html/js/jquery.caroufredsel（追加）
■data/Smarty/templates/default/site_frame.tpl
<!--caroufredsel-->
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.caroufredsel/jquery.carouFredSel-5.6.4.js"></script>
③ 画像を追加する。
■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
<!--{if $tpl_column_num == 3}--><!--▼3カラム▼-->
<!--{if $arrRet && $smarty.const.TOP_IMAGETYPE_THREECOLM == 1}-->
<!-- 〓 3カラム・タイプ1 〓 -->
<script type="text/javascript">
$(function() {
$('#top_image_area1 #carousel_top01').carouFredSel({
prev: '#prev_top01',
next: '#next_top01',
auto: {
button: '#play_top01',
pauseDuration: 5000,
pauseOnHover: true
},
scroll: {
fx: 'fade',
onPauseStart: function( percentage, duration ) {
$('#timer_top01').stop().animate({
width: 578
}, {
duration: duration,
easing: 'linear'
});
},
onPauseEnd: function( percentage, duration ) {
$('#timer_top01').stop().width( 0 );
},
onPausePause: function( percentage, duration ) {
$('#timer_top01').stop().width( 0 );
},
onBefore: function( oldI, newI ) {
$('#timer_top01').stop().width( 0 );
}
}
});
$('#top_image_area1').hover(function() {
$('#navi_top01').stop().animate({
bottom: 0
});
}, function() {
$('#navi_top01').stop().animate({
bottom: -40
});
});
});
</script>
<div id="top_image_area1">
<div id="inner">
<div id="carousel_top01">
<!--{section name=cnt loop=$arrRet}-->
<div class="item">
<!--{if $arrRet[cnt].memo02}--><a href="<!--{$arrRet[cnt].memo02|h}-->"><!--{/if}-->
<img src="upload/top_image/<!--{$arrRet[cnt].top_image|h}-->" alt="rally<!--{$arrRet[cnt].rank|h}-->" width="578" height="272" />
<!--{if $arrRet[cnt].memo02}--></a><!--{/if}-->
<!--{if $arrRet[cnt].memo01}-->
<div class="text">
<!--{$arrRet[cnt].memo01|h|nl2br}-->
</div>
<!--{/if}-->
</div>
<!--{/section}-->
</div>
<div id="navi_top01">
<div id="timer_top01"></div>
<a id="prev_top01" href="#"></a>
<a id="play_top01" href="#"></a>
<a id="next_top01" href="#"></a>
</div>
</div>
</div>
<!--{elseif $arrRet && $smarty.const.TOP_IMAGETYPE_THREECOLM == 2}-->
<!-- 〓 3カラム・タイプ2 〓 -->
<script type="text/javascript">
$(function() {
var thumbs = $('#thumbscarousel_top02');
$('#carousel_top02').carouFredSel({
items: 1,
scroll: {
fx: 'crossfade'
},
auto: {
pauseDuration: 5000,
duration: 1000,
pauseOnHover: true
},
pagination: {
container: '#pager_top02',
duration: 300
}
});
thumbs.carouFredSel({
circular: false,
auto: false,
width: 150,
height: 77,
items: {
visible: 1,
width: 150,
height: 77
}
});
$('#pager_top02').hover(function() {
var current = $('#carousel_top02').triggerHandler( 'currentPosition' );
thumbs.trigger( 'slideTo', [ current, 0, true, { fx: 'none' } ] );
$('#thumbs_top02').stop().fadeTo(300, 1);
}, function() {
$('#thumbs_top02').stop().fadeTo(300, 0);
});
$('#pager_top02 a').mouseenter(function() {
var index = $('#pager_top02 a').index( $(this) );
if ( thumbs.triggerHandler( 'isScrolling' ) ) {
thumbs.trigger( 'onAfter', [[function() {
thumbs.trigger( 'slideTo', index );
}]]);
} else {
thumbs.trigger( 'slideTo', index );
}
});
});
</script>
<div id="top_image_area2">
<div id="carousel_top02">
<!--{section name=cnt loop=$arrRet}-->
<div>
<!--{if $arrRet[cnt].memo02}--><a href="<!--{$arrRet[cnt].memo02|h}-->"><!--{else}--><a href="#"><!--{/if}-->
<img src="upload/top_image/<!--{$arrRet[cnt].top_image|h}-->" alt="rally<!--{$arrRet[cnt].rank|h}-->" width="578" height="272" /></a>
<!--{if $arrRet[cnt].memo01}-->
<div class="text">
<!--{$arrRet[cnt].memo01|h|nl2br}-->
</div>
<!--{/if}-->
</div>
<!--{/section}-->
</div>
<div id="thumbs_top02">
<div id="thumbscarousel_top02">
<!--{section name=cnt loop=$arrRet}-->
<img src="upload/top_image/<!--{$arrRet[cnt].top_image|h}-->" width="150" height="77" />
<!--{/section}-->
</div>
</div>
<div id="pager_top02"></div>
</div>
<!--{else}-->
<!-- 〓 3カラムで、画像のスライドを使用しない場合は管理画面からスライド用の画像をすべて削除し、下記を編集する 〓 -->
<!--▼ここから-->
<div id="main_image">
<a href="#" 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}--><!--▼2カラム▼-->
<!--{if $arrRet && $smarty.const.TOP_IMAGETYPE_TWOCOLM == 1}-->
<!-- 〓 2カラム・タイプ1 〓 -->
<script type="text/javascript">
$(function() {
$('#top_image_area3 #carousel_top03').carouFredSel({
width: 776, //box全体の幅（画像の影をプラス、割り切れる値）
height: 272,
align: false,
padding: [0, 531, 0, 0], //左から２つ目の値は、画像の幅から下の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'] );
});
});
</script>
<div id="top_image_area3">
<div id="carousel_top03">
<!--{section name=cnt loop=$arrRet}-->
<div>
<img src="upload/top_image/<!--{$arrRet[cnt].top_image|h}-->" alt="rally<!--{$arrRet[cnt].rank|h}-->" width="578" height="272" />
<!--{if $arrRet[cnt].memo01}-->
<p class="text">
<!--{$arrRet[cnt].memo01|h|nl2br}-->
</p>
<!--{/if}-->
<!--{if $arrRet[cnt].memo02}-->
<a href="<!--{$arrRet[cnt].memo02|h}-->"><img class="link" src="<!--{$TPL_URLPATH}-->img/button/dummy.gif" width="531" height="272" /></a>
<!--width="531"は、上記のpadding: [0, 531, 0, 0]の左から２つ目の値と同じ-->
<!--{/if}-->
</div>
<!--{/section}-->
</div>
</div>
<!--{elseif $arrRet && $smarty.const.TOP_IMAGETYPE_TWOCOLM == 2}-->
<!-- 〓 2カラム・タイプ2 〓 -->
<script type="text/javascript">
$(function() {
$('#carousel_top04').carouFredSel({
width: 764,
height: '272px',
items: 3,
scroll: {
items: 1,
duration: 500,
pauseDuration: 5000
},
prev: '#prev_top04',
next: '#next_top04'
});
});
</script>
<div id="top_image_area4">
<div id="carousel_top04">
<!--{section name=cnt loop=$arrRet}-->
<div>
<!--{if $arrRet[cnt].memo02}--><a href="<!--{$arrRet[cnt].memo02|h}-->"><!--{else}--><a href="#"><!--{/if}-->
<img src="upload/top_image/<!--{$arrRet[cnt].top_image|h}-->" alt="rally<!--{$arrRet[cnt].rank|h}-->" width="578" height="272" /></a>
<!--{if $arrRet[cnt].memo01}-->
<p class="text">
<!--{$arrRet[cnt].memo01|h|nl2br}-->
</p>
<!--{/if}-->
</div>
<!--{/section}-->
</div>
<a id="prev_top04" href="#" title="前へ"><img src="<!--{$TPL_URLPATH}-->img/button/dummy.gif" width="103" height="272" /></a>
<a id="next_top04" href="#" title="次へ"><img src="<!--{$TPL_URLPATH}-->img/button/dummy.gif" width="103" height="272" /></a>
</div>
<!--{else}-->
<!-- 〓 2カラムで、画像のスライドを使用しない場合は管理画面からスライド用の画像をすべて削除し、下記を編集する 〓 -->
<!--▼ここから-->
<div id="main_image">
<a href="#" 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
▼TOPの最後に追加
/* トップ画像スライド表示
----------------------------------------------- */
/* 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;
}
