ふわっとしつつ、ぐるぐる行きましょう!
今回のお題
cakePHP2でページネート検索をし、結果を表示します
ただし、ページネートバーは使わず、「もっと見る」ボタンを用意し
「もっと見る」ボタンをクリックしてスクロールするように仕上げます
結果はmasonryを使ってタイル状に画像を表示させています
とまあ、いろんなものを盛り込んでいてなんのこっちゃ、ですが、
pinterestをイメージしてもらうとわかりやすいでしょうか
それでは、Worksというテーブルからwork情報を取得し表示する、という体でいきましょう
ぐるぐる
controller
いたって普通にpaginateを行いsetします
$this->paginate = array('limit' => 10, 'order' => array(...));
$works = $this->Paginator->paginate('Works', array(...);
$this->set(compact('works'));
view
viewはこんな感じです
前回書いたjQueryでNow Loadingからふわっと表示させたいを踏襲します
<script src="/js/imagesloaded.pkgd.min.js"></script>
<script src="/js/masonry.pkgd.min.js"></script>
<script src="/js/jquery.infinitescroll.min.js"></script>
<!-- now loading -->
<span class="loading">
<img src="/img/loading.gif" alt="Now Loading..." />
</span>
<div class="works">
<?php foreach ($works as $work) : ?>
<div class="works_item">
<a href="...">
<img src="...">
</a>
</div>
<?php endforeach; ?>
<?php echo $this->Paginator->next('もっと見る', array('tag' => 'p', 'class' => 'read_more'), null, array('style' => 'display:none;')) ?>
</div>
javascript
$(function () {
// 総ページ数
var pageCount = <?php echo $this->Paginator->params()["pageCount"] ?>;
var nowPage = 1;
$('.works').imagesLoaded(function(){
$('.works').masonry({
itemSelector: '.works_item',
isFitWidth: true,
isAnimated: true,
isResizable: true
});
});
$('.works').infinitescroll({
navSelector : ".read_more",
nextSelector : ".read_more a",
itemSelector : ".works_item",
loading : {
img : '...',
msgText : '...',
finishedMsg : '',
},
},
function( newElements ) {
var $newElems = $(newElements);
$newElems.css({opacity: '0'});
$newElems.imagesLoaded(function() {
$('.works').masonry('appended', $newElems, true);
if (nowPage < pageCount) {
$(".read_more").appendTo(".works").delay(300).fadeIn(600);
}
$newElems.css({opacity: '0'}).animate({opacity: '1'}, 1500);
$('.loading').hide();
});
nowPage++;
});
// クリックでスクロールさせるためinfinitescrollをunbind
$('.works').infinitescroll('unbind');
// クリック時の動作
$('.read_more a').click(function(){
$('.loading').show();
$('.works').infinitescroll('retrieve');
return false;
});
});
どうでしょう、ぐるぐるできましたでしょうか?
ふわっと表示も引き続きできているかと思います
$('.works').infinitescroll('unbind');
これ以下を削除するとクリックではなくページ下部にスクロールした時点で
次の内容が読み込まれるようになるかと思います
今回はここまでで
ぐるぐる