Hi, I am hoping to code a simple photo gallery similar to the one on the third section of the following website:
https://ciprianiresidencesmiami.com/cipriani-legacy
Basically have a gallery with a large image in the center with other images smaller and next to it that blows up when it is the selected photo without the others disappearing, just shrinking next to it when not selected.
Any help would be appreciated!
There are probably better ways to do this. But this is one way.
Working example
https://dipole-speller-0m.wixsite.com/my-site-7
1, Add a Pro Gallery to the page.
Set the Gallery Settings to a Slider Gallery
And thumbnail to Fit.
Nothing Happens when clicked.
Add an image to the page, just above the Slider Gallery.
Set the image:
Nothing Happens when clicked.
Also set the image to one of the images that will be in the Gallery.
In my example. I used a CMS to populate the Gallery. But you can do that however you want.
To control how the gallery and image behave, we use some Velo code.
Make sure the id’d are correct for yours.
import { timeline } from "wix-animations-frontend";
const zoomTimeline = timeline()
.add($w("#image1"), {
duration: 2000,
opacity: 1,
scale: 1,
easing: "easeIn",
})
const zoomTimelineOp = timeline()
.add($w("#image1"), {
duration: 1000,
opacity: 0,
scale: 0.1,
easing: "easeOut",
})
$w.onReady(() => {
$w('#gallery1').onItemClicked((event) => {
$w("#image1").expand()
zoomTimelineOp.replay()
zoomTimelineOp.onComplete(() => {
$w("#image1").src = event.item.link
zoomTimeline.replay();
})
})
})