Please login or register.

Login with username, password and session length
Advanced search  

News:

Latest sNews - sNews 1.7 - with its own forums - for discussion and user mods.

Pages: [1] 2

Author Topic: [MOD] Flickr's Pagination  (Read 7885 times)

aRyo S

  • Newbie
  • *
  • Karma: 4
  • Posts: 20
    • YoRapid
[MOD] Flickr's Pagination
« on: August 10, 2007, 03:40:58 pm »

This mod will pimp your paginator so it will looks like Flickr's pagination

Features:
- large clickable areas
- easy to identify current page
- superfluous hover state

Live Demo: MoDelight - a little about a lot of things

Screenshot:


Now lets begin the mod:

1. Replace function paginator()

FIND, line 418
Code: [Select]
// PAGINATOR
function paginator($category, $pageNum, $maxPage, $article, $pagePrefix) {
$link = ' <a href="'.db('website').$category.'/';
if (!empty($article)) {$link .= $article.'/';}
$prefix = !empty($pagePrefix) ? $pagePrefix : '';
if ($pageNum > 1) {
$goTo = (!empty($article) || (!empty($category) && $category != l('home_sef'))) ? $link : '<a href="'.db('website');
$prev = (($pageNum-1)==1 ? $goTo : $link.$prefix.($pageNum - 1).'/').'" title="'.l('page').' '.($pageNum - 1).'">< '.l('previous_page').'</a> ';
$first = $goTo.'" title="'.l('first_page').' '.l('page').'"><< '.l('first_page').'</a>';
    }
else {$prev = '< '.l('previous_page'); $first = '<< '.l('first_page');}
if ($pageNum < $maxPage) {
$next = $link.$prefix.($pageNum + 1).'/" title="'.l('page').' '.($pageNum + 1).'">'.l('next_page').' ></a> ';
$last = $link.$prefix.$maxPage.'/" title="'.l('last_page').' '.l('page').'">'.l('last_page').' >></a> ';
}
else {$next = l('next_page').' > '; $last = l('last_page').' >>';}
echo '<div class="paginator">'.$first.' '.$prev.' <strong>  ['.$pageNum.'</strong> / <strong>'.$maxPage.']  </strong> '.$next.' '.$last.'</div>';
}
REPLACE with
Code: [Select]
// PAGINATOR
function paginator($category, $pageNum, $maxPage, $article, $pagePrefix) {
$link = ' <a href="'.db('website').$category.'/';
if (!empty($article)) {$link .= $article.'/';}
$prefix = !empty($pagePrefix) ? $pagePrefix : '';
if ($pageNum > 1) {
$goTo = (!empty($article) || (!empty($category) && $category != l('home_sef'))) ? $link : '<a href="'.db('website');
$prev = (($pageNum-1)==1 ? $goTo : $link.$prefix.($pageNum - 1).'/').'" title="'.l('page').' '.($pageNum - 1).'" class="prev">< '.l('previous_page').'</a> ';
$first = $goTo.'" title="'.l('first_page').' '.l('page').'" class="first"><< '.l('first_page').'</a>';
    }
else {$prev = '<span class="atprev">< '.l('previous_page').'</span>'; $first = '<span class="atfirst"><< '.l('first_page').'</span>';}
if ($pageNum < $maxPage) {
$next = $link.$prefix.($pageNum + 1).'/" title="'.l('page').' '.($pageNum + 1).'" class="next">'.l('next_page').' ></a> ';
$last = $link.$prefix.$maxPage.'/" title="'.l('last_page').' '.l('page').'" class="last">'.l('last_page').' >></a> ';
}
else {$next = '<span class="atnext">'.l('next_page').' ></span>'; $last = '<span class="atlast">'.l('last_page').' >></span>';}

//the total links visible
$max_links=5;        
        
//$max links_marker is the top of the loop
//$h is the start        
$max_links_marker = $max_links+1;
$h=1;

//$link_block is the block of links on the page
//When this is an integer we need a new block of links
$link_block=(($pageNum-1)/$max_links);

//if the page is greater than the top of th loop and link block
//is an integer
if(($pageNum>=$max_links_marker)&&(is_int($link_block))){
//reset the top of the loop to a new link block
$max_links_marker=$pageNum+$max_links;

//and set the bottom of the loop
$h=$max_links_marker-$max_links;
}
//if not an integer we are still within a link block
elseif(($pageNum>=$max_links_marker)&&(!is_int($link_block))){
//round up the link block
$round_up=ceil($link_block);
$new_top_link = $round_up*$max_links;

//and set the top of the loop to the top link
$max_links_marker=$new_top_link+1;

//and the bottom of the loop to the top - max links
$h=$max_links_marker-$max_links;
}

//if greater than total pages then set the top of the loop to total_pages
if($max_links_marker>$maxPage){
$max_links_marker=$maxPage+1;
}

$pagination = '<div class="paginator">'.$first.' '.$prev.' ';
for($i=$h; $i<$max_links_marker; $i++) {
$pagination .= $i==$pageNum ? '<span class="this-page">'.$i.'</span>' : $link.$prefix.$i.'/" title="'.l('page').' '.$i.'">'.$i.'</a> ';
}
$pagination .= $max_links_marker<=$maxPage ? '<span class="break">...</span>' : '';
$pagination .= ' '.$next.' '.$last.'</div>';
echo $pagination;
}
2. Add style to your .css file

Quote
/* Paginator */
.paginator { font-size: 12px; padding-top: 10px; margin-left: auto; margin-right: auto; }
.paginator a, .this-page { color: #0063DC; padding: 2px 6px; border: solid 1px #ddd; background: #fff; text-decoration: none; }
.paginator a:visited { padding: 2px 6px; border: solid 1px #ddd; background: #fff; text-decoration: none; }
.paginator a:hover { color: #fff; background: #0063DC; border-color: #036; text-decoration: none; }

.paginator .atfirst { padding: 2px 6px; border: solid 1px #ddd; background: #fff; color: #aaa; }
.paginator .atprev { margin-right: 5px; padding: 2px 6px; border: solid 1px #ddd; background: #fff; color: #aaa; }
.paginator .atlast { padding: 2px 6px; border: solid 1px #ddd; background: #fff; color: #aaa; }
.paginator .atnext { margin-left: 5px; padding: 2px 6px; border: solid 1px #ddd; background: #fff; color: #aaa; }

.paginator .first { padding: 2px 6px; border: solid 2px #ddd; background: #fff; }
.paginator .prev { margin-right: 5px; padding: 2px 6px; border: solid 2px #ddd; background: #fff; }
.paginator .last { padding: 2px 6px; border: solid 2px #ddd; background: #fff; }
.paginator .next { margin-left: 5px; padding: 2px 6px; border: solid 2px #ddd; background: #fff; }

.paginator .break { padding: 2px 6px; border: none; background: #fff; text-decoration: none; }
.paginator .this-page { padding: 2px 6px; border-color: #999; font-weight: bold; font-size: 13px; vertical-align: top; background: #fff; color: #FF0084; }
any comments? :)
« Last Edit: August 21, 2007, 10:51:07 am by Phil Martin »
Logged

iatbm

  • Sr. Member
  • ****
  • Karma: 0
  • Posts: 251
    • Public domain photos
[MOD] Flickr's Pagination
« Reply #1 on: August 10, 2007, 03:47:14 pm »

Super cool !!! Thanks  :D

Joost

  • Guest
[MOD] Flickr's Pagination
« Reply #2 on: August 10, 2007, 03:59:08 pm »

Quote from: whiteh0rs3
any comments? :)
Very nice mod. I also like your site. Good idea to place site map and archive at the bottom.
Logged

iatbm

  • Sr. Member
  • ****
  • Karma: 0
  • Posts: 251
    • Public domain photos
[MOD] Flickr's Pagination
« Reply #3 on: August 10, 2007, 04:08:53 pm »

Just installed this ! Works like a charm ;)

Thanks again

Ken Dahlin

  • Full Member
  • ***
  • Karma: 30
  • Posts: 139
    • http://www.kendahlin.com/
[MOD] Flickr's Pagination
« Reply #4 on: August 10, 2007, 05:23:38 pm »

Interesting effects can be accomplished by playing around with the CSS. I may use this too. Thanks.
Logged

Tarasishe

  • Newbie
  • *
  • Karma: 1
  • Posts: 12
[MOD] Flickr's Pagination
« Reply #5 on: August 10, 2007, 10:22:39 pm »

Many thanks  :P
Logged

piXelatedEmpire

  • MIA
  • ULTIMATE member
  • ******
  • Karma: 37
  • Posts: 1401
  • currently MIA
[MOD] Flickr's Pagination
« Reply #6 on: August 11, 2007, 08:18:16 am »

This is AWESOME!  Excellent MOD whiteh0rs3 thank you!
Logged
my apologies to the sNews crew, but I will be MIA for the forseeable future

ozwebfx

  • Newbie
  • *
  • Karma: 2
  • Posts: 18
  • G'day!
    • ozwebfx
[MOD] Flickr's Pagination
« Reply #7 on: August 11, 2007, 08:23:27 am »

Very cool .. well done.

aRyo S

  • Newbie
  • *
  • Karma: 4
  • Posts: 20
    • YoRapid
[MOD] Flickr's Pagination
« Reply #8 on: August 11, 2007, 07:13:39 pm »

i'm glad that you all like it :)
Logged

TheTick

  • Full Member
  • ***
  • Karma: 6
  • Posts: 105
[MOD] Flickr's Pagination
« Reply #9 on: August 11, 2007, 09:37:37 pm »

Very cool. Will play with it a little later this weekend, but i did notice on your own page that unlike the flickr style pagination it doesn't advance which was a little confusing to me as a user...e.g. if it lists;

1 2 3 4 5.. NEXT LAST

If I get to "5" it doesn't shift. In other words on Flickr it would look like this:

3 4 5 6 7.. NEXT LAST

Where with your MOD you'd have to click "next" for it to reset to this:

6 7 8 9 10 NEXT LAST

Understand?

From a user perspective when I reached "5" I didn't know if there were more pages after it with your MOD. I think that should be addressed to make this killer MOD into like a top-notch super-killer MOD

:)
Logged

aRyo S

  • Newbie
  • *
  • Karma: 4
  • Posts: 20
    • YoRapid
[MOD] Flickr's Pagination
« Reply #10 on: August 12, 2007, 08:05:37 pm »

Quote
Understand?
crystal clear :)

Quote
From a user perspective when I reached "5" I didn't know if there were more pages after it with your MOD.
Yes, you can. Please take a look at the css class above called break. That "break" won't show if reach last of page (it means no more pages after it).

Is that answer delight you? :) tell me if not
Logged

aRyo S

  • Newbie
  • *
  • Karma: 4
  • Posts: 20
    • YoRapid
[MOD] Flickr's Pagination
« Reply #11 on: August 13, 2007, 10:38:48 am »

Here is 4 types of pagination functions for sNews, so I suggest you to try each and every one of them for a best result.

Credits to Jon from thepixelboxhomepage

Quote
// PAGINATOR
function paginator($category, $pageNum, $maxPage, $article, $pagePrefix) {
   $link = ' <a href="'.db('website').$category.'/';
   if (!empty($article)) {$link .= $article.'/';}
   $prefix = !empty($pagePrefix) ? $pagePrefix : '';
   if ($pageNum > 1) {
      $goTo = (!empty($article) || (!empty($category) && $category != l('home_sef'))) ? $link : '<a href="'.db('website');
      $prev = (($pageNum-1)==1 ? $goTo : $link.$prefix.($pageNum - 1).'/').'" title="'.l('page').' '.($pageNum - 1).'" class="prev">< '.l('previous_page').'</a> ';
      $first = $goTo.'" title="'.l('first_page').' '.l('page').'" class="first"><< '.l('first_page').'</a>';
    }
   else {$prev = '<span class="atprev">< '.l('previous_page').'</span>'; $first = '<span class="atfirst"><< '.l('first_page').'</span>';}
   if ($pageNum < $maxPage) {
      $next = $link.$prefix.($pageNum + 1).'/" title="'.l('page').' '.($pageNum + 1).'" class="next">'.l('next_page').' ></a> ';
      $last = $link.$prefix.$maxPage.'/" title="'.l('last_page').' '.l('page').'" class="last">'.l('last_page').' >></a> ';
   }
   else {$next = '<span class="atnext">'.l('next_page').' ></span>'; $last = '<span class="atlast">'.l('last_page').' >></span>';}

/*
   // TYPE 1
   //$max_links is the starting maximum links on the page
   $max_links = 5;
   $h=1;
   
   //if less pages than maximum links are to be needed   
   if($maxPage<=$max_links){
      //set maximum links to the total pages
      // plus 1 for the loop   
      $max_links = $maxPage+1;
   }
   //if more are needed
   else{
      //$max_links +1 for the loop
      $max_links=$max_links+1;

      //if the page is greater than maximum links then extend the loop by one
      if($pageNum>=$max_links){
         $max_links=$pageNum+1;
      }
   }
   // END TYPE 1
*/

   // TYPE 2
   // change these for links per page
   //
   // $max is the visible links
   // $shift is the page the links start to shift on
   //
   // e.g. $max-$shift+1 = shifting page

   $max = 5;
   $shift = 3;

   //used in the loop
   $max_links = $max+1;
   $h=1;

   //if more pages than max links
   if($maxPage>=$max_links){
      //if page is greater than shifing page and the last page is not there
      if(($pageNum>=$max_links-$shift)&&($pageNum<=$maxPage-$shift)){
         //set the loop values based on the current page
         $max_links = $pageNum+$shift;
         $h=$max_links-$max;
      }
      //if the last link is visible then set the top of the loop to
      //the maxPage
      //otherwise we get links to pages with no results
      if($pageNum>=$maxPage-$shift+1){
         $max_links = $maxPage+1;
         $h=$max_links-$max;
      }
   }
   //if less pages than max links then set the top of the loop to total pages
   else{
      $h=1;
      $max_links = $maxPage+1;
   }
   // END TYPE 2

/*
   // TYPE 3
   //configure for the starting links per page
   $max = 5;
   $halfmax = ceil($max/2)+1;

   //used in the loop
   $max_links = $max+1;
   $h=1;

   //if page is above $halfmax link
   if($pageNum>$max_links){
      //start of loop
      $h=(($h+$pageNum)-$max_links);
   }

   //if page is not page one
   if($pageNum>=1){
      //top of the loop extends
      $max_links = $max_links+($pageNum-1);
   }

   //if the top page is visible then reset the top of the loop to the $maxPage
   if($max_links>$maxPage){
      $max_links=$maxPage+1;
   }
   // END TYPE 3
*/

/*
   // TYPE 4
   //the total links visible
   $max=5;        
        
   //$max links_marker is the top of the loop
   //$h is the start        
   $max_links = $max+1;
   $h=1;

   //$link_block is the block of links on the page
   //When this is an integer we need a new block of links
   $link_block=(($pageNum-1)/$max);
   
   //if the page is greater than the top of th loop and link block
   //is an integer   
   if(($pageNum>=$max_links)&&(is_int($link_block))){
      //reset the top of the loop to a new link block
      $max_links=$pageNum+$max;
      
      //and set the bottom of the loop
      $h=$max_links-$max;      
   }   
   //if not an integer we are still within a link block   
   elseif(($pageNum>=$max_links)&&(!is_int($link_block))){
      //round up the link block      
      $round_up=ceil($link_block);            
      $new_top_link = $round_up*$max;
      
      //and set the top of the loop to the top link      
      $max_links=$new_top_link+1;
      
      //and the bottom of the loop to the top - max links      
      $h=$max_links-$max;
   }

   //if greater than total pages then set the top of the loop to total_pages
   if($max_links>$maxPage){
      $max_links=$maxPage+1;      
   }
   // END TYPE 4
*/

   $pagination = '<div class="paginator">'.$first.' '.$prev.' ';
   for($i=$h; $i<$max_links; $i++) {
      $pagination .= $i==$pageNum ? '<span class="this-page">'.$i.'</span>' : $link.$prefix.$i.'/" title="'.l('page').' '.$i.'">'.$i.'</a> ';
   }
   $pagination .= $max_links<=$maxPage ? '<span class="break">...</span>' : '';
   $pagination .= ' '.$next.' '.$last.'</div>';
   echo $pagination;
}
« Last Edit: August 21, 2007, 08:04:02 pm by Phil Martin »
Logged

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6020
  • Semantically Challenged
    • snews.ca
[MOD] Flickr's Pagination
« Reply #12 on: August 13, 2007, 05:37:39 pm »

@ Whitey... the link you have posted above for the PixelBox Home Page goes to Google. Do you have a direct link to the site?
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

Joost

  • Guest
[MOD] Flickr's Pagination
« Reply #13 on: August 13, 2007, 06:59:55 pm »

It is a 302 redirect. :rolleyes: Apparently they don't want us there.
Logged

aRyo S

  • Newbie
  • *
  • Karma: 4
  • Posts: 20
    • YoRapid
[MOD] Flickr's Pagination
« Reply #14 on: August 14, 2007, 05:19:30 am »

i'm not sure how that link can go there. I have that link a long time ago when i was searched the web to find the best, easyest, and simplest examples of pagination. I already check the link above and there was no mistake on what i have written, perhaps they already moved.
Logged
Pages: [1] 2