I am new to both, js and modx, and when I implemented the Cliche gallery into my website, I had quite some headaches with that. Once I finally got the album set up the way I planned it, I could not get the pagination to work, and I could not find any helpful tutorials on this either. I looked up a jQuery paginate tutorial, and eventually I got it to work. Now I want to help other newbies who struggle with the same problem
What I did was quite easy, looking at it afterwards:
- Include jquery.min.js and jquery.paginate.min.js in your document (get it here:
https://github.com/fedecarg/jquery-paginate
- Include this javascript in your page template:
<script type="text/javascript">
$(function(){
$(".cliche").paginate({ limit: 9, content: '.item' });
});
</script><!-- javascript -->
--> in my case, I already had the jquery.min.js included, because I used lightbox with Cliche, and Cliche already adds the jquery. Because of that I had to add the paginate js and the javascript function at the end of my template, before the
tag. Adding it to the top, and before the content of the page, somehow conflicted with the jquery that Cliche added, and for some reason I could not get the Cliche added jquery to work with the paginate. Strange, but this is how I solved it, and I hope it helps you.
To style the pagination, just add these link classes to your stylesheet (the class names need to stay like this):
.link-container {
top: 504px;
width: 200px;
}
a.ui-state-default, a.ui-state-default:visited{
font-family: 'Droid Sans', Tahoma, sans-serif;
font-weight: 400;
color: #FFF;
font-size: 18px;
padding-right: 10px;
text-decoration:none;
}
a.ui-state-default:hover {
color: #00BFFF;
}
a.ui-state-active {
color: #00BFFF;
font-weight:700;
}
This is my [[$itemtpl]], by the way:
<div class="item">
<div class="album-icon">
<a class="zoom" rel="lightbox" title="[[+name]]" href="[[+image]]">
<img width="[[+width]]" height="[[+height]]" title="[[+name]]" alt="[[+description]]" class="attachment-thumbnail" src="[[+thumbnail]]"/>
</a>
</div>
</div>
