Advanced search  

News:

CPG Release 1.6.26
Correct PHP8.2 issues with user and language managers.
Additional fixes for PHP 8.2
Correct PHP8 error with SMF 2.0 bridge.
Correct IPTC supplimental category parsing.
Download and info HERE

Pages: [1]   Go Down

Author Topic: Pagination for categories (tabs)  (Read 4906 times)

0 Members and 1 Guest are viewing this topic.

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Pagination for categories (tabs)
« on: April 28, 2014, 09:21:55 pm »

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]
<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]
<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]
/******************************************************************************
** 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]
        echo '<div class="holder">';
        echo '</div>';
        echo '<div id="catWrapp">';

before:

Code: [Select]
    $template_noalb = template_extract_block($template_cat_list, 'catrow_noalb');

d.add

Code: [Select]
          echo '</div>';
          echo '<div class="holder" style="clear:both;">';
          echo '</div>';

before:

Code: [Select]
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]
.cThumb{
    float:left;
}


if you show the category thumbnails.

b)

Code: [Select]
.cTitleDesc {
YOUR STYLES FOR A CUSTOM CATEGORY DESCRIPTION
}
« Last Edit: July 09, 2015, 02:55:46 am by allvip »
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Pagination for categories (tabs)
« Reply #1 on: April 28, 2014, 09:34:09 pm »

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]
<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]
          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" .
« Last Edit: April 28, 2014, 09:39:32 pm by allvip »
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Pagination for categories (tabs)
« Reply #2 on: April 28, 2014, 09:40:40 pm »

DEMO:

view attachments

catList2 is with subcategories and albums ON
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Pagination for categories (tabs)
« Reply #3 on: April 28, 2014, 09:47:56 pm »

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
« Last Edit: July 09, 2015, 02:57:30 am by allvip »
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Pagination for categories (tabs)
« Reply #4 on: April 28, 2014, 11:00:17 pm »

I attached jPages.zip in case the download link from the first post will no longer be available.
« Last Edit: July 09, 2015, 02:57:11 am by allvip »
Logged
Pages: [1]   Go Up
 

Page created in 0.02 seconds with 20 queries.