gallery

pagination

HTML

<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="https://st3ph.github.io/jquery.easyPaginate/js/jquery.easyPaginate.js"></script>
<div id="easyPaginate" class="easyPaginateList">
  <img src="https://picsum.photos/500/500?random&img=" />
  <img src="https://picsum.photos/500/500?random&img=" />
  <img src="https://picsum.photos/500/500?random&img=" />
  <img src="https://picsum.photos/500/500?random&img=" />
  <img src="https://picsum.photos/500/500?random&img=" />
  <img src="https://picsum.photos/500/500?random&img=" />
  <img src="https://picsum.photos/500/500?random&img=" />
  <img src="https://picsum.photos/500/500?random&img=" />
  <img src="https://picsum.photos/500/500?random&img=" />
  <img src="https://picsum.photos/500/500?random&img=" />
  <img src="https://picsum.photos/500/500?random&img=" />
  <img src="https://picsum.photos/500/500?random&img=" />
</div>

CSS

body {
  font-family: Arial, sans-serif;
  text-align: center;
  max-width: 1170px;
  margin: 3rem auto;
  background-color: #101010;
  color: #fff;
}

/* Cosmetic only */
#easyPaginate {display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;max-width: 1000px;
height: auto
margin: 0 auto;}
#easyPaginate img {width: 100%;
height: 150px;
padding: 5px;
border: none;
background: transparent;
object-fit: cover;
position: relative;
}
@media only screen and (max-width: 600px) {
.easyPaginate {
  grid-template-columns: repeat(3, 1fr);
}
}
.easyPaginate img:hover {
z-index: 9;
transform: scale(1.3);
transition: transform ease 0.5s;
}
.easyPaginateNav a {padding:5px;}
.easyPaginateNav a.current {font-weight:bold;text-decoration:underline;}

JavaScript

$('#easyPaginate').easyPaginate({
  paginateElement: 'img',
  elementsPerPage: 3,
  effect: 'climb'
});