How to create jump to last/first buttons

Ask the community
,
1

Hi all,

I was hoping someone could help me out as I’ve been unable to locate an answer to this question.

I have a dataset and have been able to link buttons to the “next” and “previous” items, no problem. However, I cannot for the life of me figure out a way of adding the functionality to jump to the last item or the first item (using two different buttons of course).

Any help would be greatly appreciated.

Thanks in advance!

2

Hello,

Here’s a full tutorial on how to make previous/next buttons - Creating previous and next buttons to a dynamic page .
Now for the jumping buttons, you can use same code, and you only have to change the index, to be the last/first instead of next, simply you can use :

let length = dynamicPagesURLs.length - 1;
$w("#last").link = dynamicPagesURLs[length];

So, your code should look something like this :

import {local} from 'wix-storage';
import wixLocation from 'wix-location';


$w.onReady(function () {
 
  $w("#previous").disable();
  $w("#next").disable();
 
 if (local.getItem('dynamicPageURLs')) {
 const dynamicPageURLs = local.getItem('dynamicPageURLs').split(',');
    console.log(dynamicPageURLs.length)

 const currentPage = '/' + wixLocation.prefix + '/' + wixLocation.path.join('/');
 const currentPageIndex = dynamicPageURLs.indexOf(currentPage);
    console.log(currentPage, currentPageIndex)

 if (currentPageIndex > 0) {
      $w("#previous").link = dynamicPageURLs[currentPageIndex - 1];
      $w("#previous").enable();
    }

 if (currentPageIndex < dynamicPageURLs.length - 1) {
      $w("#next").link = dynamicPageURLs[currentPageIndex + 1];
      $w("#next").enable();
    }
  }
} );

export function last_click(event) {
 let dynamicPagesURLs = local.getItem('dynamicPageURLs').split(',');
 const currentPage = '/' + wixLocation.prefix + '/' + wixLocation.path.join('/');
 let length = dynamicPagesURLs.length-1;
  $w("#last").link = dynamicPagesURLs[length];
}

Ps: for the jump to first, you only have to make it [0] :

$w("#first").link = dynamicPagesURLs[0];

Hope this helps!
Best,

Mustafa

3

Hi Mustafa,
I managed to get the next/previous working but am stumbling a bit with the first/last. Do I just copy exactly what you put in?
Again, all help greatly appreciated!

4

Hi Mustafa,

One other question (sorry!) Is there as way to do this without using dynamic pages? I can get the buttons working next and previous no problem (using datasets) but the page where I want to cycle through the images doesn’t link from another page, it links from a menu header and, currently, you can’t seem to link to a dynamic page from a menu header.

Again, thanks in advance!