Change image depending on scroll position?

Ask the community
,
1

Hello!

I have this problem of not being able to change an image to another one depending on scroll position. Here is a link with how I would need it to look like: https://onfido.com/product/

Could someone please help me out?

1 Like
2

There’s more than one way to do it. For example:

  1. You can add to your a slider gallery.

  2. Pin it to the page (right click > Pin to page)

  3. Go to the settings and cancel the auto-play.

  4. Put all the images you want in the gallery (order them by the order you want them to appear).

  5. Add anchors to your page and put them at the spots where you want the image switch to take place. (keep the anchor order).

  6. Then add code like that:

$w.onReady(function () {
    let items = $w("#gallery1").items;
    let imageToPresent = []
    $w("#anchor1, #anchor2, #anchor3, #anchor4").onViewportEnter((event) => {
        let anchor = event.target.id;
        let anchorInx = anchor[anchor.length - 1] -1;
        imageToPresent[0] = items[anchorInx];
        $w("#gallery1").items = imageToPresent;
    })
});
3

Hello J.D.
Thank you so much for your answer! I followed your steps but I have some trouble to make it look right.

Pin to screen: I need the gallery that I created to not always be on the screen but it should be scrolled in with the first anchor and be able to scroll out with the last anchor. Is that possible?

Anchors: I added 4 anchors to site and it kind of works when I scroll down the first time. However, when I scroll back up the order isn’t reversed. How would I connect each anchor to a specific image in the gallery?

Thank you again!

4

@annapinger re your first question, you can collapse the gallery when elements above anchor1 and below anchor4 get into the screen view, using $w(“#elementX”).onViewportEneter() and the collapse() function.
re your 2nd question, it worked for me when I tried it, so I don’t know why it doesn’t work for you.

5

@jonatandor35 hi, thank you for helping me, I came across the same problem and I found this post
thanks a lot.
I also have another question I want to ask:
do you know how to add animations when the images are switching?

6

@dache5290 It depends on the kind of animation you wish to apply.

7

Please, when I enter the code above I get the following console error:

Wrong format for gallery items [...] TypeError: Cannot read property 'src' of undefined

2110Ă—616 82.2 KB

8

Hi. I get the same error, did you manage to solve?

9

same error! any solution