▼ここでのカスタマイズファイルをすべてダウンロードできます。
必要な箇所だけコピーしてご利用ください。
他のカスタマイズも含まれている場合がありますので、ファイルの上書きは絶対におやめください。
こちらから(facebookユーザーのみ)
指定した横幅内にスライドするアイテムの数が収まる場合は、スライドしない。ボタンも表示されない。
1 下記より、jQueryプラグイン「carouFredSel」をダウンロードし、■html/js/jquery.caroufredselフォルダに置く。
http://caroufredsel.frebsite.nl/
2 ■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>
3 ブロックを新規作成する
① ■html/frontparts/bloc/category_slide.php
<?php // {{{ requires require_once realpath(dirname(__FILE__)) . '/../../require.php'; require_once CLASS_EX_REALDIR . 'page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Category_slide_Ex.php'; // }}} // {{{ generate page $objPage = new LC_Page_FrontParts_BLoc_Category_slide_Ex(); $objPage->blocItems = $params['items']; register_shutdown_function(array($objPage, "destroy")); $objPage->init(); $objPage->process(); ?>
② ■data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Category_slide_Ex.php
<?php // {{{ requires require_once CLASS_REALDIR . 'pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Category_slide.php'; class LC_Page_FrontParts_Bloc_Category_slide_Ex extends LC_Page_FrontParts_Bloc_Category_slide { // }}} // {{{ functions /** * Page を初期化する. * * @return void */ function init() { parent::init(); } /** * Page のプロセス. * * @return void */ function process() { parent::process(); } /** * デストラクタ. * * @return void */ function destroy() { parent::destroy(); } } ?>
③ ■data/class/page/frontparts/bloc/LC_Page_FrontParts_Bloc_Category_slide.php
<?php // {{{ requires require_once CLASS_REALDIR . 'pages/frontparts/bloc/LC_Page_FrontParts_Bloc.php'; class LC_Page_FrontParts_Bloc_Category_slide extends LC_Page_FrontParts_Bloc { // }}} // {{{ functions /** * Page を初期化する. * * @return void */ function init() { parent::init(); // include_phpで、読み込ませるために必要な記述 $this->setTplMainpage('category_slide.tpl'); } /** * Page のプロセス. * * @return void */ function process() { $this->action(); $this->sendResponse(); } /** * Page のアクション. * * @return void */ function action() { // データベースから取得 $objQuery =& SC_Query_Ex::getSingletonInstance(); $this->arrRet = array(); //カテゴリー名を取得 $arrRet = $objQuery->select('*','dtb_category','del_flg = 0 order by rank DESC'); //データベースから取得できたか if(isset($arrRet)){ $this->arrRet = $arrRet; } } /** * デストラクタ. * * @return void */ function destroy() { parent::destroy(); } } ?>
④ ■data/Smarty/templates/default/frontparts/bloc/Category_slide.tpl
<script type="text/javascript"> $(function() { $('#carousel_category').carouFredSel({ width: '100%', prev: '#prev_category', next: '#next_category', scroll: { items: 1, duration: 500 }, auto: { pauseDuration: 5000, // ストップしている時間 pauseOnHover: true } }); }); </script> <div class="block_outer clearfix"> <div id="category_slide"> <div id="wrapper"> <div id="carousel_category"> <!--{section name=cnt loop=$arrRet}--> <a class="item rank_<!--{$arrRet[cnt].rank|h}-->" href="<!--{$smarty.const.ROOT_URLPATH}-->products/list.php?category_id=<!--{$arrRet[cnt].category_id}-->"> <!--{$arrRet[cnt].category_name|h}--> </a> <!--{/section}--> </div> <a id="prev_category" href="#"></a> <a id="next_category" href="#"></a> </div> </div> </div> <div class="clear"></div>
⑤ データベースdtb_blocテーブルに追加する
INSERT INTO dtb_bloc (device_type_id, bloc_id, bloc_name, tpl_path, filename, create_date, update_date, php_path, deletable_flg) VALUES (10, 16, 'カテゴリスライドメニュー', 'category_slide.tpl', 'category_slide', CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, 'frontparts/bloc/category_slide.php', 0);
4 cssファイルを編集する
■html/user_data/packages/default/css/bloc.css 追加
/* =============================================== ▼カテゴリースライドメニュー =============================================== */ #category_slide { position: relative; height:30px; background-color: #EEE; overflow:hidden; } #category_slide #wrapper { width:100%; margin:0 12px; height:30px; overflow: hidden; } #category_slide #carousel_category a { display: block; float: left; padding:8px 15px 0 15px; height:22px; font-size:120%; background:url(../img/background/bg_category_slide_item.png) repeat-y right; } #category_slide #carousel_category a.rank_1 { background:url(../img/background/bg_category_slide_item.png) repeat-y right #ddd; } #category_slide #prev_category, #category_slide #next_category { background: url(../img/button/btn_prev_next_01.png) no-repeat transparent; width: 12px; height: 30px; display: block; position: absolute; top:0; } #category_slide #prev_category { left: 0px; background-position: 0 0; } #category_slide #prev_category:hover { background-position: 0 -30px; } #category_slide #next_category { right: 0px; background-position: -12px 0; } #category_slide #next_category:hover { background-position: -12px -30px; } /*ヘッダーに配置*/ #header #category_slide { width:360px; float:right; margin-top:3px; }
5 画像を追加
■img/background/bg_category_slide_item.png (2px×1pxの小さい画像なので、ここでは表示できません。下記アドレスダウンロード)
http://www.itoben.com/blog/wp-content/uploads/2012/10/bg_category_slide_item.png
■img/button/btn_prev_next_01.png
6 ヘッダーに配置することもできる。
ナビを削除して、カテゴリーメニューを置く。
■data/Smarty/templates/default/header.tpl
<div id="header_navi"> <ul> <li class="mypage"> <a href="<!--{$smarty.const.HTTPS_URL}-->mypage/login.php" onmouseover="chgImg('<!--{$TPL_URLPATH}-->img/common/btn_header_mypage_on.jpg','mypage');" onmouseout="chgImg('<!--{$TPL_URLPATH}-->img/common/btn_header_mypage.jpg','mypage');"><img src="<!--{$TPL_URLPATH}-->img/common/btn_header_mypage.jpg" alt="MYページ" name="mypage" id="mypage" /></a> </li> <li class="entry"> <a href="<!--{$smarty.const.ROOT_URLPATH}-->entry/kiyaku.php" onmouseover="chgImg('<!--{$TPL_URLPATH}-->img/common/btn_header_entry_on.jpg','entry');" onmouseout="chgImg('<!--{$TPL_URLPATH}-->img/common/btn_header_entry.jpg','entry');"><img src="<!--{$TPL_URLPATH}-->img/common/btn_header_entry.jpg" alt="会員登録" name="entry" id="entry" /></a> </li> <li> <a href="<!--{$smarty.const.CART_URLPATH}-->" onmouseover="chgImg('<!--{$TPL_URLPATH}-->img/common/btn_header_cart_on.jpg','cartin');" onmouseout="chgImg('<!--{$TPL_URLPATH}-->img/common/btn_header_cart.jpg','cartin');"><img src="<!--{$TPL_URLPATH}-->img/common/btn_header_cart.jpg" alt="カゴの中を見る" name="cartin" id="cartin" /></a> </li> </ul> </div> ↓(変更) <div id="header_navi"> <!--{include_php file=`$smarty.const.HTML_REALDIR`frontparts/bloc/category_slide.php}--> </div>