Jump to content

Customize Index Navigation in York Template

Recommended Posts

Site URL: http://www.chirp-design.com

I am using the York Template for a portfolio site. When you click on an index thumbnail to open up a project page and scroll to the bottom, the index navigation is setup to read "NEXT" (which takes the user to the next project in the index).

I love this feature, but would also like to include a "PREVIOUS" or "BACK" option as well so that users can navigate forward and backward through the index of projects. My site is not live yet, but here is a screenshot of the index navigation as it currently appears (just above the page footer).

Does anyone know how to incorporate custom code to the index navigation so that it can move backward as well?

Screen Shot 2020-06-25 at 4.27.07 PM.png

Link to comment
  • Replies 24
  • Views 1k
  • Created
  • Last Reply

@GregHerman I am grasping at straws here with the prev button.......but......  give this a try:

Here's some CSS that we need to add:

nav.index-next {
    display: inline-flex !important;
    margin-top: auto !important;
}

.index-next .link-next-up {
    padding-right: 25px;
}

And some jQuery

$(document).ready(function() {
  var NextLink = $('a.active-link')
  var PrevLink = $(NextLink).prev('a')
  var PrevSpan = $(PrevLink).children('span').first()
  $(PrevLink).attr('class', 'index-next-link page-collection index-page-transition-link link-next-up');
  $(PrevSpan).attr('data-next-link', 'PREV');
})

 

Link to comment

@rwp Thanks for the effort, but it's not working..

I added the 1st part to the css custom section and the next part to the head of the code injection section under advanced. I assumed that is where jQuery should live.. I saw a lot of text at the top of the pages, if that is any clue?

Wish I could be of more help, but I really appreciate you and your efforts.

Thanks again!!!

Link to comment
1 hour ago, GregHerman said:

@rwp Thanks for the effort, but it's not working..

I added the 1st part to the css custom section and the next part to the head of the code injection section under advanced. I assumed that is where jQuery should live.. I saw a lot of text at the top of the pages, if that is any clue?

Wish I could be of more help, but I really appreciate you and your efforts.

Thanks again!!!

You need to add the jQuery script, check my signature for instructions.

Link to comment

@rwp  THANK yOU AGAIN!!!  you are too kind and I sooo appreciate your efforts..

Unfortunately I'm still struggling with getting this to work.

I added the Jquery code

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

to the code injection .. 

And added <Script></script> tags to your jquery code. 

I've got your css in the custom css section and both the jquery codes in the advanced site wide injection.

Wish I could say it worked....Again, Thank you the effort... you rock.

Link to comment
window.Squarespace.onInitialize(Y, function () {
  var NextLink = $('a.active-link');
  var PrevLink = $(NextLink).prev('a');
  var PrevSpan = $(PrevLink).children('span').first();
  $(PrevLink).attr('class', 'index-next-link page-collection index-page-transition-link link-next-up');
  $(PrevSpan).attr('data-next-link', 'PREV');
});

Try replacing the block of code with this one. The ajax loading is causing the issue.

Link to comment

@AbbyGoodson I just check really quickly, it looks the the code above will work for you too, let me know if it doesn't work right.

See my signature for how to use this code.

 Here's some CSS that we need to add:

nav.index-next {
    display: inline-flex !important;
    margin-top: auto !important;
}

.index-next .link-next-up {
    padding-right: 25px;
}

And some jQuery

window.Squarespace.onInitialize(Y, function () {
  var NextLink = $('a.active-link');
  var PrevLink = $(NextLink).prev('a');
  var PrevSpan = $(PrevLink).children('span').first();
  $(PrevLink).attr('class', 'index-next-link page-collection index-page-transition-link link-next-up');
  $(PrevSpan).attr('data-next-link', 'PREV');
});

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.