Is it possible to link a specific slide in one slideshow to a specific slide in a different slideshow, on a different page?

leahgerstenlauer · March 13, 2021, 3:13am

Hello, all —

I’m trying to link two specific slides located in two different slideshows on two different pages, using vector images. Is this possible?

I’ve already managed to link the slides within each individual slideshow by attaching this code to the desired vector images (changing the numbers according to the image IDs and the intended destinations):

export function vectorImage6_click(event) {$w(“#slideshow2”).changeSlide(1)

Can this code be modified to do what I need it to do? Or will I need a different code entirely?

Note that my coding skills are elementary. Detailed instructions would be appreciated.

Thanks!

J.D · March 13, 2021, 8:14pm

You can add a query parameter to the link (for example: ?slide=4 ) and then on the second page read the second page read the query.slide and switch to the slide using .changeSlide().

leahgerstenlauer · March 19, 2021, 5:36pm

Thank you for the suggestion, J.D.

I did a bit of research on query parameters to see if I could wrap my mind around how to use them, but I’m still unsure how to apply them to the pages I’m working with. Again, my coding experience is limited. I’ll try to better explain the setup in hopes of additional guidance.

I’m dealing with four pages — titled Cocktail Mixology D, E, F, and G — each of which features a slideshow. I’m trying to link the first slides on pages E, F, and G to the last slides on pages D, E, and F, respectively, using vector arrows. For reference, here are the page links and slideshow IDs (spaces added because I am not currently able to publish links):

D/slideshow1: https://www.balletswithatwist. com/btwist-insta-mixology
E/slideshow2: https://www.balletswithatwist. com/btwist-insta-bright-lights
F/slideshow3: https://www.balletswithatwist. com/b-twist-insta-big-sounds
G/slideshow4: https://www.balletswithatwist. com/b-twist-insta-portfolio

The object ID is the same for each of the vector arrows (i.e., vectorImage4) because they appear in the same position on the first slide of the slideshows to which they are attached. For reference, here are screenshots of the first slides, with the arrows in question circled:

E/Slideshow2:

F/Slideshow3:

G/Slideshow4:

Given the information above, are you able to provide the exact codes that I would need to apply to each page?

More thanks!

J.D · March 20, 2021, 8:30pm

@leahgerstenlauer
Basically it should be something like:
First page

import wixLocation from "wix-location";
$w.onReady(() => {
$w("#arrowButton").onClick(() => {
wixLocation.to("/last-page-path?last-slide=true";
})
})

Last page

import wixLocation from "wix-location";
let query = wixLocation.query;
let target= query["last-slide"];
$w.onReady(() => {
if(target){
if(target === "true"){
$w("#slideshow").changeSlide(5);//use the index of the last slide, starting from zero.
}
}
})

leahgerstenlauer · April 17, 2021, 4:31pm

@jonatandor35 , thanks again for your reply, and my apologies for the delay.

I’m still having several issues:

Issue 1

I tried using your suggested code to link the first slide on Page E (https://www.balletswithatwist. com/btwist-insta-bright-lights) to the last slide on the Page D (https://www.balletswithatwist. com/btwist-insta-mixology), but it isn’t working. Here are the exact snippets I added to each page:

Page D

import wixLocation from "wix-location";
let query = wixLocation.query;
let target= query["last-slide"];
$w.onReady(() => {
if(target){
if(target === "true"){
$w("#slideshow1").changeSlide(12);
}
}
})

Page E

import wixLocation from "wix-location";
$w.onReady(() => {
$w("#vectorImage4").onClick(() => {
wixLocation.to("/btwist-insta-the-mixology?last-slide=true");
})
})

Can you tell me where I went wrong?

Issue 2

Once we get past the previous problem, I know that I will run into a parsing error in trying to link the first slide on Page F (https://www.balletswithatwist. com/b-twist-insta-big-sounds) back to the last slide on Page E (https://www.balletswithatwist. com/btwist-insta-bright-lights) because the “wixlocation” identifier will have already been declared on both pages. In other words, linking Page E back to Page D and Page G back to Page F should be doable — assuming that I’m able to fix whatever mistake(s) I made in the codes above. But linking those middle two pages presents another potential snag.

Is there a way around this?

J.D · April 17, 2021, 8:28pm

@leahgerstenlauer
First , I don’t see any problem with the code you posted. Maybe the problem is somewhere else. Are you sure you used the correct slide index? (Don’t forget that the index starts from zero. Meaning index 12 stands for slide number 13).

Second , There’s no reason for parsing issue. You need to declare wixLocation on every page you wish to use it.

leahgerstenlauer · April 18, 2021, 2:51am

@jonatandor35 , yes, I just resolved my first issue. I had forgotten to remove the simple page-to-page link I had attached to vectorImage4. So, now the backward facing arrow on the first slide of Page E (https://www.balletswithatwist. com/btwist-insta-bright-lights) links back to the last slide on Page D (https://www.balletswithatwist. com/btwist-insta-mixology). Phew.

I am, however, still receiving a “parsing error” message when I try to add two separate wixLocation snippets to a single page. On Page E , for instance, this is the code progression I attempted to use:

import wixLocation from"wix-location";
$w.onReady(()=>{
$w("#vectorImage4").onClick(()=>{
wixLocation.to("/btwist-insta-the-mixology?last-slide=true"); 
})
})

import wixLocation from"wix-location";
let query = wixLocation.query;
let target= query["last-slide"];
$w.onReady(()=>{
if(target){
if(target ==="true"){
$w("#slideshow2").changeSlide(9);
}
}
})

The second snippet was supposed to facilitate the transition from the backward facing arrow on Page F (https://www.balletswithatwist. com/b-twist-insta-big-sounds) to the last slide on Page E. This is the code progression I used on Page F:

import wixLocation from"wix-location";
$w.onReady(()=>{
$w("#vectorImage4").onClick(()=>{
wixLocation.to("/btwist-insta-bright-lights?last-slide=true"); 
})
})

import wixLocation from"wix-location";
let query = wixLocation.query;
let target= query["last-slide"];
$w.onReady(()=>{
if(target){
if(target ==="true"){
$w("#slideshow3").changeSlide(4);
}
}
})

I ran into the same problem when I tried to link Page G (https://www.balletswithatwist. com/b-twist-insta-portfolio) back to Page F. The code on Page G was as follows:

import wixLocation from"wix-location";
$w.onReady(()=>{
$w("#vectorImage4").onClick(()=>{
wixLocation.to("/btwist-insta-big-sounds?last-slide=true"); 
})
})

And just to confirm, my slide numbers were correct. Page D has 13 slides, Page E has 10, and Page F has 5, so I used the numbers 12, 9, and 4, respectively.

Note that I have since deleted the codes from Page F and Page G (along with the second snippet from Page E) because they were not functioning.

I apologize for needing to be walked through this. I am definitely out of my comfort zone, here.

leahgerstenlauer · April 25, 2021, 1:56am

@info51522 (or anyone else who may be available), just checking in regarding my last reply above. To further illustrate the issue I’m experiencing, I’m including a screenshot of the parsing error I received when trying to accomplish the inter-page, multi-slideshow linking scenario described above:

Any further insight you can offer would be so appreciated.

J.D · April 25, 2021, 12:23pm

@leahgerstenlauer The import line must be at the top of the page code. You should not have it on line 91 (after non-import code).

leahgerstenlauer · April 26, 2021, 4:56pm

@jonatandor35 , thank you. I tried moving the codes to the top of the page, as you suggested, but I’m receiving the same error messages:

Is there, perhaps, some more specific identifier that would allow multiple wixLocation import commands to be used on the same page?

J.D · April 26, 2021, 7:20pm

@leahgerstenlauer delete line 8

leahgerstenlauer · April 28, 2021, 6:28pm

@jonatandor35 , that worked swimmingly. Each of the four pages now links back to the desired slide on the previous page. Thank you very much.

One final issue: The page-to-page transitions are rather sloppy throughout this subsection of our site — not only in the instances where I applied the code we’ve been discussing, but when moving between pages in general.

In the screen recording below the following notes, you’ll see several different undesirable effects:

When navigating from the main photo gallery grid to an individual page, there is a brief flicker of the image that appears on that page. This also occurs when the Table of Contents, located at the bottom of each page, is used to navigate. As I applied no code — only simple page links, via the Wix Editor — to the gallery grid and to each line of text in the Table of Contents, I know that this is not the result of a syntax of logic error on my part.

Note that this only occurs when I have scrolled downward on the page from which I am starting, and an automatic upward scroll is, thus, required to bring me to the top of the destination page. As illustrated at the beginning of the video, it does not occur when starting from the top of the gallery grid page and moving to any of the pages linked to the first three photos in the gallery.

Is there a way for me to resolve this glitch on my own, or do I need to bring the matter to Wix Support?

When navigating backward from one of the slideshows to the slideshow on the previous page — from https://www.balletswithatwist. com//btwist-insta-bright-lights?last-slide=true to https://www.balletswithatwist. com//btwist-insta-the-mixology , for example — the first slide on the destination page ( https://www.balletswithatwist. com//btwist-insta-the-mixology ) appears for a full second before flipping to the final slide. As these particular transitions were set up using code, is there a way that I can eliminate this effect?

More thanks!

J.D · April 28, 2021, 8:48pm

@leahgerstenlauer

Check the page transition. Cancel it or change it if needed. In addition, if the image is not static but get bound via a dataset, you’re better use a transparent png image as a placeholder.
It might be a matter of promise timing, please post the code (paste the code, not a screenshot).

leahgerstenlauer · April 30, 2021, 2:57am

@jonatandor35 :

Beyond the three tricky transitions you helped me to set up — from the first slide of a slideshow on one page to the last slide of a slideshow on the previous page, in three separate instances — I did not add or adjust any page-to-page transitions using Velo. Rather, the “crossfade” transition seen throughout our main site (https://www.balletswithatwist. com) was automatically applied to this hidden set of pages (which begins at https://www.balletswithatwist. com/b-twist-insta-home) when I created it using the Wix Editor.

The only other code I applied to the pages in question facilitates slide-to-slide transitions (within four slideshows that appear on four separate pages) using vector image arrows as replacements for the now hidden arrows attached to the Wix slideshow template. I am experiencing no issues with the slide-to-slide transitions. The problems described above only happen when moving from page to page, regardless of whether or not I added code to those pages.

I hope all that makes sense… In a nutshell, I only added code to the four pages with slideshows on them — and the page-to-page transition glitchiness occurs on all ten pages of this hidden collection, not just the four slideshow pages. For what it’s worth, I’ve included the full code that I entered on these four pages below. (Sorry that these snippets are so long. There are a lot of arrows.)

https://www.balletswithatwist. com/btwist-insta-the-mixology

import wixLocation from "wix-location";
let query = wixLocation.query;
let target= query["last-slide"];
$w.onReady(() => {
if(target){
if(target === "true"){
$w("#slideshow1").changeSlide(12);
}
}
})

export function vectorImage6_click(event) {$w("#slideshow1").changeSlide(1)
}

export function vectorImage7_click(event) {$w("#slideshow1").changeSlide(2)
}

export function vectorImage8_click(event) {$w("#slideshow1").changeSlide(0)
}

export function vectorImage9_click(event) {$w("#slideshow1").changeSlide(3)
}

export function vectorImage10_click(event) {$w("#slideshow1").changeSlide(1)
}

export function vectorImage11_click(event) {$w("#slideshow1").changeSlide(4)
}

export function vectorImage12_click(event) {$w("#slideshow1").changeSlide(2)
}

export function vectorImage13_click(event) {$w("#slideshow1").changeSlide(5)
}

export function vectorImage14_click(event) {$w("#slideshow1").changeSlide(3)
}

export function vectorImage15_click(event) {$w("#slideshow1").changeSlide(6)
}

export function vectorImage16_click(event) {$w("#slideshow1").changeSlide(4)
}

export function vectorImage17_click(event) {$w("#slideshow1").changeSlide(7)
}

export function vectorImage18_click(event) {$w("#slideshow1").changeSlide(5)
}

export function vectorImage19_click(event) {$w("#slideshow1").changeSlide(8)
}

export function vectorImage20_click(event) {$w("#slideshow1").changeSlide(6)
}

export function vectorImage21_click(event) {$w("#slideshow1").changeSlide(9)
}

export function vectorImage22_click(event) {$w("#slideshow1").changeSlide(7)
}

export function vectorImage23_click(event) {$w("#slideshow1").changeSlide(10)
}

export function vectorImage24_click(event) {$w("#slideshow1").changeSlide(8)
}

export function vectorImage25_click(event) {$w("#slideshow1").changeSlide(11)
}

export function vectorImage26_click(event) {$w("#slideshow1").changeSlide(9)
}

export function vectorImage27_click(event) {$w("#slideshow1").changeSlide(12)
}

export function vectorImage28_click(event) {$w("#slideshow1").changeSlide(10)
}

export function vectorImage30_click(event) {$w("#slideshow1").changeSlide(11)
}

https://www.balletswithatwist. com/btwist-insta-bright-lights

import wixLocation from "wix-location";
$w.onReady(() => {
$w("#vectorImage4").onClick(() => {
wixLocation.to("/btwist-insta-the-mixology?last-slide=true");
})
})

let query = wixLocation.query;
let target= query["last-slide"];
$w.onReady(() => {
if(target){
if(target === "true"){
$w("#slideshow2").changeSlide(9);
}
}
})

export function vectorImage6_click(event) {$w("#slideshow2").changeSlide(1)
}

export function vectorImage7_click(event) {$w("#slideshow2").changeSlide(2)
}

export function vectorImage8_click(event) {$w("#slideshow2").changeSlide(0)
}

export function vectorImage9_click(event) {$w("#slideshow2").changeSlide(3)
}

export function vectorImage10_click(event) {$w("#slideshow2").changeSlide(1)
}

export function vectorImage11_click(event) {$w("#slideshow2").changeSlide(4)
}

export function vectorImage12_click(event) {$w("#slideshow2").changeSlide(2)
}

export function vectorImage13_click(event) {$w("#slideshow2").changeSlide(5)
}

export function vectorImage14_click(event) {$w("#slideshow2").changeSlide(3)
}

export function vectorImage15_click(event) {$w("#slideshow2").changeSlide(6)
}

export function vectorImage16_click(event) {$w("#slideshow2").changeSlide(4)
}

export function vectorImage17_click(event) {$w("#slideshow2").changeSlide(7)
}

export function vectorImage18_click(event) {$w("#slideshow2").changeSlide(5)
}

export function vectorImage19_click(event) {$w("#slideshow2").changeSlide(8)
}

export function vectorImage20_click(event) {$w("#slideshow2").changeSlide(6)
}

export function vectorImage21_click(event) {$w("#slideshow2").changeSlide(9)
}

export function vectorImage22_click(event) {$w("#slideshow2").changeSlide(7)
}

export function vectorImage24_click(event) {$w("#slideshow2").changeSlide(8)
}

https://www.balletswithatwist. com/btwist-insta-big-sounds

import wixLocation from "wix-location";
$w.onReady(() => {
$w("#vectorImage31").onClick(() => {
wixLocation.to("/btwist-insta-bright-lights?last-slide=true");
})
})

let query = wixLocation.query;
let target= query["last-slide"];
$w.onReady(() => {
if(target){
if(target === "true"){
$w("#slideshow3").changeSlide(4);
}
}
})

export function vectorImage6_click(event) {$w("#slideshow3").changeSlide(1)
}

export function vectorImage7_click(event) {$w("#slideshow3").changeSlide(2)
}

export function vectorImage8_click(event) {$w("#slideshow3").changeSlide(0)
}

export function vectorImage9_click(event) {$w("#slideshow3").changeSlide(3)
}

export function vectorImage10_click(event) {$w("#slideshow3").changeSlide(1)
}

export function vectorImage11_click(event) {$w("#slideshow3").changeSlide(4) 
}

export function vectorImage12_click(event) {$w("#slideshow3").changeSlide(2)
}

export function vectorImage14_click(event) {$w("#slideshow3").changeSlide(3)
}

https://www.balletswithatwist. com/b-twist-insta-portfolio

import wixLocation from "wix-location";
$w.onReady(() => {
$w("#vectorImage32").onClick(() => {
wixLocation.to("/btwist-insta-big-sounds?last-slide=true");
})
})

export function vectorImage6_click(event) {$w("#slideshow4").changeSlide(1)
}

export function vectorImage7_click(event) {$w("#slideshow4").changeSlide(2)
}

export function vectorImage8_click(event) {$w("#slideshow4").changeSlide(0)
}

export function vectorImage9_click(event) {$w("#slideshow4").changeSlide(3)
}

export function vectorImage10_click(event) {$w("#slideshow4").changeSlide(1)
}

export function vectorImage12_click(event) {$w("#slideshow4").changeSlide(2)
}

Thank you!

leahgerstenlauer · May 8, 2021, 6:38pm

Hi, @jonatandor35

Just checking to see if the code you asked me to provide is at all revealing/if you see any potential snags with regards to promise timing (or anything else).

Thank you!

J.D · May 14, 2021, 11:45am

@leahgerstenlauer sorry I haven’t been here in the last few days.
I don’t see any problem with you code (except for the fact it’s can be written in a much shorter manner. But that’s not an error ).
I think the problem is that it takes time to switch the slide and in the meantime you see the last slide.
If you wish, you can make the slides hidden and display them only after the slide has changes.
Go to the property panel and make the slideshow hidden on load,
then add to your code something like

 $w("#slideshow4").changeSlide(/*the slide index*/).then(() => $w("#slideshow4").show());

Topic		Replies	Views
Jump to a specific slide Ask the community code , question	6	1299	November 11, 2019
Is it possible to navigate to a specific slide on a page? Ask the community code , question	4	125	June 14, 2020
Button click to specific slide on another page Ask the community code , question	17	1383	November 24, 2021
Link to a specific slide in a slideshow on another page Ask the community code , question	5	2461	January 13, 2020
Click changes slide on a different page instead the current one Ask the community code , question	0	57	October 2, 2023

Is it possible to link a specific slide in one slideshow to a specific slide in a different slideshow, on a different page?

Related topics