メニュー

Home >freoTIPS>プラグイン系TIPS> freoでちょっとかっこいいページネーション~メディア表示プラグイン

【freoTIPS】【プラグイン系TIPS】freoでちょっとかっこいいページネーション~メディア表示プラグイン

2014/03/29 13:28|タグ:メディア表示プラグインページネーショングッジョブ表示 30

メディア表示プラグインでのページネーションを変更します。

サンプル

pagenation.jpg

(画像サンプルです)

こんな感じのデザインに変更してみます。

導入方法

  1. [freo/templates/plugins/media_list/default.html]の43~45行目を以下のように変更します。
    <div id="page">
        <h2>ページ移動</h2>
        <ul class="order">
            <li><!--{if $freo.query.page > 1}-->&lt;&lt;<a href="{$freo.core.http_file}/media_list?{if $smarty.get.directory}directory={$smarty.get.directory}&amp;{/if}{if $smarty.get.target}target={$smarty.get.target}&amp;{/if}page={$freo.query.page-1}">前のページ</a><!--{else}-->&lt;&lt;前のページ<!--{/if}--></li>
            <!--{section name='media_list_pages' loop=$media_list_page}-->
    
                <!--{if $smarty.section.media_list_pages.first and $media_list_page > 1}-->
                <li {if $smarty.section.media_list_pages.iteration == $freo.query.page}class="current"{else}class="no"{/if}><!--{if $smarty.section.media_list_pages.iteration != $freo.query.page}--><a href="{$freo.core.http_file}/media_list?{if $smarty.get.directory}directory={$smarty.get.directory}&amp;{/if}{if $smarty.get.target}target={$smarty.get.target}&amp;{/if}page={$smarty.section.media_list_pages.iteration}">{$smarty.section.media_list_pages.iteration}</a><!--{else}-->{$smarty.section.media_list_pages.iteration}<!--{/if}--></li>
                <li class="blank">…</li>
                <!--{/if}-->
                <!--{if $smarty.section.media_list_pages.iteration < $media_list_page and $smarty.section.media_list_pages.iteration > 1 and ($smarty.section.media_list_pages.iteration == $freo.query.page-1 or $smarty.section.media_list_pages.iteration == $freo.query.page or $smarty.section.media_list_pages.iteration == $freo.query.page+1 or $smarty.section.media_list_pages.iteration == $freo.query.page+2 or $smarty.section.media_list_pages.iteration == $freo.query.page-2)}-->
            <li {if $smarty.section.media_list_pages.iteration == $freo.query.page}class="current"{else}class="no"{/if}><!--{if $smarty.section.media_list_pages.iteration != $freo.query.page}--><a href="{$freo.core.http_file}/media_list?{if $smarty.get.directory}directory={$smarty.get.directory}&amp;{/if}{if $smarty.get.target}target={$smarty.get.target}&amp;{/if}page={$smarty.section.media_list_pages.iteration}">{$smarty.section.media_list_pages.iteration}</a><!--{else}-->{$smarty.section.media_list_pages.iteration}<!--{/if}--></li>
            <!--{/if}-->
                <!--{if $smarty.section.media_list_pages.last and $media_list_page > 1}-->
                <li class="blank">…</li>
                <li {if $smarty.section.media_list_pages.iteration == $freo.query.page}class="current"{else}class="no"{/if} id="last"><!--{if $smarty.section.media_list_pages.iteration != $freo.query.page}--><a href="{$freo.core.http_file}/media_list?{if $smarty.get.directory}directory={$smarty.get.directory}&amp;{/if}{if $smarty.get.target}target={$smarty.get.target}&amp;{/if}page={$smarty.section.media_list_pages.iteration}">{$smarty.section.media_list_pages.iteration}</a><!--{else}-->{$smarty.section.media_list_pages.iteration}<!--{/if}--></li>
                <!--{/if}-->
            <!--{/section}-->
            <li><!--{if $media_list_page > $freo.query.page}--><a href="{$freo.core.http_file}/media_list?{if $smarty.get.directory}directory={$smarty.get.directory}&amp;{/if}{if $smarty.get.target}target={$smarty.get.target}&amp;{/if}page={$freo.query.page+1}">次のページ</a>&gt;&gt;<!--{else}-->次のページ&gt;&gt;<!--{/if}--></li>
        </ul>
    </div>
    
  2. [freo/templates/plugins/event/default.html]をアップデートします。

おまけのCSS

[freo/css/default.css]のページ移動部分を変更してみます。

/* ################################################################################ */
/*      0:ページ移動
*/
/* ################################################################################ */
/* ================================================================================ */
/*      0-1:ページ移動ブロック
*/
/* ================================================================================ */
div#page{clear:both;padding:50px 0 0;margin:0}
div#page h2 {display: none;}
/* ================================================================================ */
/*      0-1:ページ移動リスト
*/
/* ================================================================================ */
ul.order {margin: 20px 0;text-align:center;}
ul.order li {display: inline;list-style: none;margin-right: 10px;}
/* ================================================================================ */
/*      0-1:表示中ページクラス
*/
/* ================================================================================ */
ul.order li.current {border:1px solid #000000;color:#000000;padding:0 5px;}
/* ================================================================================ */
/*      0-1:ページリンククラス
*/
/* ================================================================================ */
ul.order li.no a{border:1px solid #000000;background-color:#000000;color:#000000;padding:0 5px;}
ul.order li.no a:link,ul.order li.no a:visited{color:#ffffff;}
ul.order li.no a:hover,ul.order li.no a:active{text-decoration:none;background-color:#666666}

上記のように変更すると、サンプルのようなデザインになります。

ページ移動

関連エントリー

コメント

ジェネ

いつもお世話になってます┏○ペコ

http://moe.pupu.jp/freo/media_list?directory=diary
ページ移動使わせてもらっていますが、箇所書きのマークが消えないのですが(;´・ω・)

cssの list-style: none で消してもらってるのはわかるのですが、後は何がいけないのでしょうか?

前のページ、次のページの部分の <li>部分は消してます・・・。

他はいじるとエラーのようでσ(^_^;)アセアセ...

よろしければお時間ある時にお願いしますぅ!

  • URL
  • 2015/06/06 11:33:54

ミツ@32877

こんにちは。
ソースを拝見したところ、k.cssの170行目に記載されている

ul li, li ul li, li li ul li {
margin-left: 0;
padding-left: 18px;
list-style: none;
background: url("../images/K/list.gif") no-repeat 0 6px;
}

の、「background」で指定されている画像が表示されているようです。
私の公開しているソースに、

ul.order li{
background: none;
}

のように加筆すればよいのではないでしょうか。

あと、<li></li>は削除しないほうが良いと思います。

  • 2015/06/06 13:50:26

ジェネ

できました!
ありがとうございますぅ。゚(●'ω'o)゚。うるうる

  • URL
  • 2015/06/06 21:12:05

なし

はじめまして、お世話になります。

… で省略するまでのページ数を10まで表示したいのですが、どのようにすればよいのでしょうか?
このサイトでも紹介されてた、ページ移動表示調整プラグインのような感じにしたいです。
よろしくお願いします。

  • 2016/06/18 18:11:00

ミツ@32877

こんにちは。

本記事は、別記事で紹介しているページネーションのデザインに合わせて表示するためのテンプレートサンプルなので、本記事を利用してテンプレートを書き換えたとしても、ページ移動表示調整プラグインを利用することはできません。
龍の棲む場所さんで配布されている「ページ移動表示調整プラグイン」には、メディア表示プラグインのページを省略して表示する機能はないので、メディア表示プラグインのページを省略して表示するプラグインを別途作成する必要があると思います。
そういったプラグインを開発できたら別途告知します。

  • 2016/06/18 18:41:46

なし

>ミツさん
そうなのですか、わかりました。このままでも不便はないので有難く使用させて頂きます。
お返事ありがとうございました。

  • 2016/06/18 23:00:48

ミツ@32877

ご返答後に追加で申し訳ありません。
ご要望のプラグイン化は未定ですが、テンプレートのみの対応でよろしければ、

<!--{if $smarty.section.media_list_pages.iteration < $media_list_page and $smarty.section.media_list_pages.iteration > 1 and ($smarty.section.media_list_pages.iteration == $freo.query.page-1 or $smarty.section.media_list_pages.iteration == $freo.query.page or $smarty.section.media_list_pages.iteration == $freo.query.page+1 or $smarty.section.media_list_pages.iteration == $freo.query.page+2 or $smarty.section.media_list_pages.iteration == $freo.query.page-2)}-->

部分を

<!--{if $smarty.section.media_list_pages.iteration < $media_list_page and $smarty.section.media_list_pages.iteration > 1 and ($smarty.section.media_list_pages.iteration == $freo.query.page-1 or $smarty.section.media_list_pages.iteration == $freo.query.page or $smarty.section.media_list_pages.iteration == $freo.query.page+1 or $smarty.section.media_list_pages.iteration == $freo.query.page+2 or $smarty.section.media_list_pages.iteration == $freo.query.page-2 or $smarty.section.media_list_pages.iteration == $freo.query.page+3 or $smarty.section.media_list_pages.iteration == $freo.query.page-3 or $smarty.section.media_list_pages.iteration == $freo.query.page+4 or $smarty.section.media_list_pages.iteration == $freo.query.page-4)}-->

のようにすることで、表示するページ数を増やすことができると思います。
都度テンプレート側で表示するページ数を調整しなければならないのと、多分(9件または11件になってしまって)偶数(10件など)に設定することはできないと思います。
ご参考までに。

  • 2016/06/18 23:15:33

なし

>ミツさん
追加お返事ありがとうございます。
早速上記の方法を試したところ、設定より+1増えて表示されるようで、9まで追加したら表示は希望通り10までになりました。
ご教示ありがとうございました。

  • 2016/06/19 01:23:38

コメント登録

登録フォーム
名前
メールアドレス
URL
コメント
投稿キー(スパム対策に、投稿キー を半角で入力してください。)

ユーティリティ

新着コメント

Twitter

サイト内検索

ページ上部へ