JQuery easy Paginate Gallery Not functional-CodePudding

I'm trying to use this jquery easy paginate on my Blogspot separate page. https://st3ph.github.io/jquery.easyPaginate/

The images show up but no pagination appears and no css too! I need to adapt my css in this jQuery pagination too and make it work! Please can someone help me make this work? Updated code*

https:// jsfiddle.net/Anon13/4syqnavw/

CodePudding user response：

If the jsfiddle you linked to based on your implementation, then the issue is how you reference the JS file. You can't directly link to script files on github, as they don't serve script files with the appropriate content type (see here for more info). Basically the gist is they don't want you to treat github as a cdn.

After updating the fiddle, I can see that the plugin works.

Here's a snippet with the same code from the fiddle:

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

    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;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://st3ph.github.io/jquery.easyPaginate/js/jquery.easyPaginate.js"></script>

<div id="easyPaginate" >
  <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>