JQuery easy Paginate Gallery Not functional

Question

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/

You should be posting your code here as well instead of only linking to it in a JSFiddle. — Andrew Shearer, Dec 04 '22 at 07:10
I follow the steps and didn't let me post the code, apologize — Anon Nonan, Dec 04 '22 at 17:35

score 0 · Accepted Answer · answered Dec 04 '22 at 07:52

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" 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>

Thank you it's actually working but the images don't pop up when i click on them! — Anon Nonan, Dec 04 '22 at 17:48
@AnonNonan, I didn't see mention of the plugin (easyPaginate) providing gallery-like function when clicking the images. Were you expecting the images to pop up when you click them? You would probably need to build this feature or add another plugin to do something similar. — Jack, Dec 05 '22 at 17:44

JQuery easy Paginate Gallery Not functional

1 Answers1