Previous
Next
Use cases
Use any CMS field to order your Collection List and create custom Previous and Next buttons based on your order.
For example, sorting by "Date".
How to use it
Paste before </body> tag of the page you're working with.
<script src="https://cdn.jsdelivr.net/npm/@finsweet/cms-library@1/cms-library.js"></script>
<script>
// immediately/self invoked function. This function executes right away
(function() {
// create a new Library instance and store it in a variable called "fsPreviousNext"
var fsPreviousNext= new FsLibrary('.post-list-hidden') // Class of your CMS collection list to search for previous/next
// run prevNext on our instance
fsPreviousNext.prevnext({
nextTarget: ".post-next-target", // the div that the Next item should go
previousTarget: ".post-prev-target", // the div that the Previous item should go
contentId: ".post-id", // the unique id that identifies which item in your CMS Collection is the current item
loadImages: ".post-load-img" // optional: sets background images to display:block; for only the two Prev Next items
})
})();
</script>
Code explanation
The variable we created to store our Library instance. The name of the variable can be set to whatever you want.
The class of the hidden Collection List that holds our dynamic CMS List.
We will search inside of this list for our previous item and our next item.
Class of a div that we will 'paste' our next item into.
Class of a div that we will 'paste' our previous item into.
Class of a piece of CMS field text that identifies which post is the current post on the page. We will look for the contentId class on the template page AND look for the contentId class inside the hidden Collection List. We will match the template page value with the correct Collection Item in our List. This establishes a 'base' that we can then use to decide which Collection Items should be set as previous and next.
The CMS field text used as your contentId must be a unique value for that item.
Optional. Used to improve page loading if your Collection List has many items.
Explanation:
If your hidden Collection List has many items, and those items have images, browsers may load these images on the page even though the content is hidden. If you have many hidden items with images, we recommend you set those images as background images that are set to display none. Apply a unique class to those hidden background images. That class should be used as the value of loadImages. The Library will set this class to 'display: block' for only the two items selected as previous and next. Instead of potentially loading all 100 background images, the browser will only load 2 - the previous post and the next post.
Makes no sense? Watch the How To video walkthrough!
HTML and class setup
IMPORTANT: This is easy to set up. You must understand how to structure your page for this to work.
This is your instance of Library on the page. The instance is on the Collection List of your CMS Collection List. In this example, this is ~.post-list-hidden~.
This is where we 'paste' the child of our CMS Collection Item. In this example, we will 'paste' ~.post-prevnext-item~ to the ~.post-next-target~.
This is where we 'paste' the child of our CMS Collection Item. In this example, we will 'paste' ~.post-prevnext-item~ to the ~.post-prev-target~.
contentId must be added twice to the page - once on the template post. Once inside the ~post-list-hidden~. The two contentId items will be matched to create a base. From the base, we can identify which item is previous and which item is next. In this example, out contentId is ~.post-load-image~.
Optional for setting background images to 'display: block'. This class is placed on a background image and this class should be set to 'display: none' in designer or pPage Settings. In this example, our loadImages class is ~.post-load-image~.