How to Build an Image Swap

I’m trying to learn Sparkle by recreating pages from existing sites. Looking at a page for Apple’s iMac, there is section that allows the user to preview color options (iMac - Technical Specifications - Apple). The user clicks a color swatch button, and the on-click event causes the image of the iMac above to swap with a matching image of another color. (See below.)

Is it possible within Sparkle to recreate this image swap UI?

I don’t see an “Image Swap” action from the “On Click” option for buttons. Would an “Open Popup” or “Layout Block Visibility” be useable?

yes, with the open popup method you can achieve this


As @primo mentioned Pop-ups is your way to go.
I’ve done it here (scroll to “Einzelfotos”):

There are six toggle-buttons you can switch on or off.
If one is switched on the image above shows another possible overlay.

Of cours in that way, you can change the wohle image to show an computer with different colors.

1 Like

Thank you to @primo and @saber1 .

@saber1 Very cool example. Thanks.

By the way, how did you get your toggle buttons to switch with the photo? Are the toggle buttons part of the same Pop-up overlay with each photo? Also, do you set one of the Pop-up overlays to show first as the default?

1 Like

How i’ve done it:
The toggels are build as follows:
Not the whole toggle itself is a button. Just the white circles are buttons.
The dark or green backgrounds are boxes. Both the buttons and boxes are rounded. Both are grouped together.

If all toggels are switched off: no Pop-up is shown.
If one toggle is switched on the corresponded Pop-up opens.
The Pop-Up-frame goes from top of the image to bottom of the last toggles.
Within the Pop-ups i have placed the overlay for the picture and also the group of the toggle which is switched on. But with green background and the switch on the right side.
Also the five other switch circles are part of each Pop-up. So you can switch between each Pop-up.

If the same toggle is klicked, which means to switch the toggle off, the Pop-up will just close.

Hope you can follow. :wink:


Demo and sample project file can be seen HERE.


@francbrowne Perfect. Thank you.

1 Like