I've integrated simple pagination into my website, but I've encountered a issue. My navigation consists of CSS tabs, each holding a unique pagination component.
Here is the jQuery pagination code snippet:
$(function(){
var perPage = 8;
var opened = 1;
var onClass = 'on';
var paginationSelector = '.pages';
$('.gallery').simplePagination(perPage, opened, onClass, paginationSelector);
});
.gallery appears to define the gallery style, and it seems that I need to repeat this code for every separate gallery.
$(function(){
var perPage = 8;
var opened = 1;
var onClass = 'on';
var paginationSelector = '.pages2';
$('.gallery2').simplePagination(perPage, opened, onClass, paginationSelector);
});
My main question is, can I streamline this code so I don't have to duplicate each jQuery call?
Another concern arises when attempting to apply the same CSS styles:
.gallery, .gallery2 {
float: left;
overflow: hidden;
padding: 3px 4px 5px 6px;
margin: 3px 4px 5px 6px;
height: 552px;
width:850px;
}
.gallery, .gallery2 li {
float: left;
display: inline;
font-weight: bold;
width: 190px;
padding: 3px 4px 5px 6px;
background: #E6E6FA;
border: 1px solid #999999;
text-align: center;
margin: 3px 4px 5px 6px;
font: 12px Arial, Helvetica, Sans-serif;
color: #4c4c4c;
height: 255px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
This code fails to work unless separated for each individual gallery. This means any edits require multiple adjustments. Why might this be happening?
Is this tied to the specified selection on .gallery? Is there a way to modify the code to enable selection of multiple classes?
$('.gallery').simplePagination(perPage, opened, onClass, paginationSelector);
});