Image Pagination

Bootstrap ve Processwire ile Image Pagination (Fotoğrafları farklı sayfalara bölme)

1. Install related modul from this link

2. Add following code to the place which you want to show them:

<?
$items_per_page = 4;
$start = ($input->pageNum - 1) * $items_per_page;
$total = count($page->images);
$images = $page->images->slice($start, $items_per_page);

// make this to give MarkupPagerNav what it needs
$a = new PageArray();

// add in some generic placeholder pages
foreach($images as $unused) $a->add(new Page());

// tell the PageArray some details it needs for pagination
// (something that PW usually does internally, for pages it loads)
$a->setTotal($total);
$a->setLimit($items_per_page);
$a->setStart($start);
// output your images
foreach ($images as $image) {

$thumb=$image->size(200,150);

<div class='col-sm-3 col-xs-6' style='margin-bottom:20px'>
<img src='<?=$thumb->url?>' class='img-responsive img-rounded' alt='<?=$page->title?>'>
</div>
<?} ?>

3. Pagination bar will appear with following code. Please add it where you want:

<? // pagination
echo $a->renderPager(array(
    'nextItemLabel' => "<i class='glyphicon glyphicon-chevron-right'></i>",
    'previousItemLabel' => "<i class='glyphicon glyphicon-chevron-left'></i>",
    'listMarkup' => "<ul class='pagination pagination-lg'>{out}</ul>",
     'currentItemClass' => "active", 
    'itemMarkup' => "<li class='{class}'>{out}</li>",
    'linkMarkup' => "<a href='{url}'><span>{out}</span></a>"
));  
?>


Sitede yayınlanmasını istediğiniz Word veya PDF formatındaki özgün yazılarınızı denizemesaj@gmail.com adresine gönderebilirsiniz. Arzu ederseniz kendi isminizle yayılanır. Yine bu adresten görüş ve fikirlerinizi iletmeniz de mümkün.
You can send your original articles in Word or PDF formats that you want to be published on this site to denizemesaj@gmail.com. If you wish, it will publish by your own name. It is also possible to send your opinions and ideas at this address.