Pagination for categories (tabs)

[allvip]

Album list and the thumbnail pages have pagination but not the categories.

If you have many categories then the page will get really long.
I found a way to add pagination to categories with the jquery plugin jPages : http://luis-almeida.github.io/jPages/

It only works if I replace tables with divs for the category list.

1.download jPages,extract the zip.You will only need jPages.min.js and jPages.css.Upload them in your theme folder.

2.Open themes/your_theme/template.html and

a) add after {JAVASCRIPT}

Code Select Expand


<script src="themes/your_theme_name/jPages.min.js"></script>
<script>
$(document).ready( function() {
  $("div.holder").jPages({
    containerID : "catWrapp"
  });

});
</script>


b) add in the head after {META} or your_style.css link:

Code Select Expand

<link rel="stylesheet" href="themes/your_theme_name/jPages.css" type="text/css" />.

I prefer to add the content of jPages.css to my_theme_style.css (open jPages.css with notepad and copy the content.paste it in your_style.css).This way you won't have 2 css files that can affect the page load.

3. copy the function <<<$template_cat_list>>>  from themes/sample/theme.php to your theme's theme.php file, if it doesn't exist and replace tables with divs.

this is the function after I replaced the tables with divs:

Code Select Expand


/******************************************************************************
** Section <<<$template_cat_list>>> - START
******************************************************************************/
// HTML template for the category list
$template_cat_list = <<<EOT
<!-- BEGIN header -->
                <div class="tableh1" width="80%" style="float:left;width:70%;">{CATEGORY}</div>
                <div class="tableh1" width="10%" style="float:right;width:11%;">{ALBUMS}</div>
                <div class="tableh1" width="10%" style="float:right;width:12%;">{PICTURES}</div>
                <div class="clearer"></div>
<!-- END header -->
<!-- BEGIN catrow_noalb -->
                <div id="catPag" class="catrow_noalb"><div><div class="cThumb">{CAT_THUMB}</div><div class="cTitleDesc"><span class="catlink">{CAT_TITLE}</span>{CAT_DESC}</div></div></div>
<!-- END catrow_noalb -->
<!-- BEGIN catrow -->
             <div id="catPag">
                <div class="catrow" style="float:left;width:72%;"><div><div class="cThumb">{CAT_THUMB}</div><div class="cTitleDesc"><span class="catlink">{CAT_TITLE}</span>{CAT_DESC}</div></div></div>
                <div class="catrow" style="float:left;width:10%;">{ALB_COUNT}</div>
                <div class="catrow" style="float:left;width:10%;">{PIC_COUNT}</div>
                <div class="tableb tableb_alternate" style="clear:both;">{CAT_ALBUMS}</div>
             </div>
<!-- END catrow -->
<!-- BEGIN footer -->
                <div class="tableh1" align="center"><span class="statlink">{STATISTICS}</span></div>
<!-- END footer -->
<!-- BEGIN spacer -->
        <img src="images/spacer.gif" width="1" height="7" border="" alt="" /><br />
<!-- END spacer -->
EOT;
/******************************************************************************
** Section <<<$template_cat_list>>> - END
******************************************************************************/



4.copy the function <<<theme_display_cat_list>>>  from themes/sample/theme.php to your theme's theme.php file, if it doesn't exist and:

a. replace starttable('100%'); with  echo '<div class="catListWrapp">';
b.replace endtable(); with echo '</div>'; 
c.add

Code Select Expand


        echo '<div class="holder">';
        echo '</div>';
        echo '<div id="catWrapp">';


before:

Code Select Expand


    $template_noalb = template_extract_block($template_cat_list, 'catrow_noalb');


d.add

Code Select Expand


          echo '</div>';
          echo '<div class="holder" style="clear:both;">';
          echo '</div>';


before:

Code Select Expand


if ($statistics && count($cat_data) > 0) {


5. I added  class="cThumb" and class="cTitleDesc" to step 3 so you can add them to your style.css and style the way you want the category thumbnails and title and description.

Open themes/your_theme_name/your_style.css and add:

a)

Code Select Expand


.cThumb{
    float:left;
}


if you show the category thumbnails.

b)

Code Select Expand


.cTitleDesc {
YOUR STYLES FOR A CUSTOM CATEGORY DESCRIPTION
}


[allvip]

Jpages will display 10 items per page.Pages load in place.
If you want to change 10 with your own value like 15 then replace the code from step 2a with:

Code Select Expand


<script src="themes/your_theme_name/jPages.min.js"></script>
<script>
$(document).ready( function() {
  $("div.holder").jPages({
    containerID : "catWrapp",
    perPage: 15
  });

});
</script>


Here how to customize it: http://luis-almeida.github.io/jPages/documentation.html

You can remove one div holder and leave only the top or the bottom one.To remove the top pagination just remove from the code the first:

Code Select Expand


          echo '<div class="holder">';
          echo '</div>';


You can replace class="catListWrapp" with your own class name or use id not class.
Same for id="catWrapp" but it must be an id not a class and remember to change containerID : "catWrapp" from template.html to containerID : "your_custom_id" .

[allvip]

DEMO:

view attachments

catList2 is with subcategories and albums ON

[allvip]

IMPORTANT

Is not working with jquery-1.3.2.js that is in the coppermine js folder.
It works with jquery-1.7.1 or more.

Install  jQuery update plugin for cpg1.5.x:

http://forum.coppermine-gallery.net/index.php/topic,77595.0.html

If you want to use a diffrent theme for admin pages:

http://forum.coppermine-gallery.net/index.php/topic,77166.0.html

[allvip]

I attached jPages.zip in case the download link from the first post will no longer be available.