Question:
How can I display a Pro Gallery slideshow with bottom thumbnails on a single viewport while ensuring the main image covers the entire screen? Specifically, is there an option to overlap the thumbnails on the main slideshow?
Product:
Wix studio
What are you trying to achieve:
I am trying to have thumbnails in slideshow itself
What have you already tried:
i am not sure if i need to do this with adding code, which i have not tried yet.
No You cannot overlap elements in the gallery.
The only gallery that has built in overlapping feature is 3d Carousel, which still is probably not what you’re looking for.
What You CAN DO is overlap an image element with the gallery, the thumbnails should have added in transparency (png files) so the part that is seethrough shows the image underneath the gallery.
the example element has transparency, the background(here black) can be any image you want to (in case it does not change)
But If there is more choose able stuff You Need to make use of an Iframe (Embed Code) and manually layer all the layers (In javascript) you want in there, you can change the layers with wix messaging service (postMessage in velo and onmessage in javascript) and link everything with galleries.
First off what are ya making?
Hey,
I am building an architecture portfolio website
wanted those thumbnail images on top of the main image so that the main image takes full screen. but the method you mentioned seems very complicated to me 
i will try and understand it and see if its a possiblity for me to do
Thank you so much 
Holler!
Can’t you just leave a standalone gallery on top
That only has these or just a way to choose them and then
change the “MAIN” Image (That is on the bottom layer (background)) url source
$w('#gallery-id').onCurrentItemChanged((event) => {
console.log(event.item.src);
// Action to change the main image
$w("#background-image").src = event.item.src;
})
https://dev.wix.com/docs/velo/api-reference/$w/image/introduction
Also don’t forget to put this code inside wix’s dedicated on ready function,
otherwise stuff breaks. This IS WIX FRONTEND meaning
PS: You gotta turn the dev mode on
To achieve a slideshow where the main image covers the entire screen and thumbnails appear at the bottom, overlapping the main image, you can adjust the layout with a bit of CSS.
First, set the main image to cover the full viewport (100vh) and ensure the thumbnails are positioned at the bottom. You can position the thumbnails container absolutely and adjust its z-index so that it overlaps the main image without pushing it out of view. The thumbnails can be centered horizontally beneath the image.
If you want the thumbnails to change the main image when clicked, you can use a small JavaScript script to update the main image based on the thumbnail clicked.
This approach gives you a dynamic, visually appealing effect while keeping the layout clean and responsive. If you need help with the actual code implementation or more details on how to tweak the design, feel free to reach out!
Heyllo tech_Voyager,
First of all, thank a ton for offering your help, not a coder so still learning all this tweaks.
is it possible to help me with actual code implementation?
How do i update z-index?
I will try this
Thank you so much piotr
yes we can help you with that if you are interested we can connect on fiza@astrosia.in
