forum.coppermine-gallery.net
Support => cpg1.5.x Support => cpg1.5 themes (visuals) => Topic started by: allvip 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/ (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}
<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:
<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:
/******************************************************************************
** 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
echo '<div class="holder">';
echo '</div>';
echo '<div id="catWrapp">';
before:
$template_noalb = template_extract_block($template_cat_list, 'catrow_noalb');
d.add
echo '</div>';
echo '<div class="holder" style="clear:both;">';
echo '</div>';
before:
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)
.cThumb{
float:left;
}
if you show the category thumbnails.
b)
.cTitleDesc {
YOUR STYLES FOR A CUSTOM CATEGORY DESCRIPTION
}
-
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:
<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 (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:
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" .
-
DEMO:
view attachments
catList2 is with subcategories and albums ON
-
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 (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 (http://forum.coppermine-gallery.net/index.php/topic,77166.0.html)
-
I attached jPages.zip in case the download link from the first post will no longer be available.