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?
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?
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.
