Streaming live at 10am (PST)

How to create a fullscreen image within a sliders mask


#1

Hi everyone,

I build an Slider with CMS images in it. By clicking on an image, a fullscreen preview of the image is shown via interactions.
However, I need the same interaction more often on the page and would therefore like to make the fullscreen images to become a children of the slides (so I can set the interactions to "Class- only children).
BUT if I drag the fullscreen div´s inside the slider mask,- they are only shown inside the slider mask…

What I need is this (but as child from a Slide):

Any Ideas?
Thank you, Nils


The Page is calles “save”… don´t ask why.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Hi @Nilson, on looking at your preview it seems you solved this yourself, so I’ve edited the title to reflect this.

Feel free to pop the answer in a post below in case future users search for the same answer :smiley:

Great… no, beautiful site by the way!


#3

Hi @magicmark, unfortunately I could not solve the problem yet. :confused: Do you have any idea how to solve the problem? Cheers, Nils
And thank you :slight_smile:!


#4

Ah sorry! When I click the image in your slider, it appears full screen…

CloudApp

Could you elaborate more on the issue you’re having? Sorry if I’ve misunderstood something :smiley:


#5

Yes sure, no problem- my fault! :smiley:

My goal is to display the entire section “Printshop Section” several times, each with different collection items.
Because I use an interaction to trigger the “fullscreen slide” divs, it is required that the “fullscreen slide” divs become children of the triggers called “Slide1, Slide2 and Slide 3”. Then it is possible to limit the interaction just for children. But if I do so, the “fullscreen-slide” -divs appear only inside the slider mask.
So what I want to find out is, how to create a fullscreen image within a sliders mask.

This is the hierarchy I need.

But if I do so, this happens:

Thank you @magicmark :blush:

NEW Read only Link


#6

Hey @Nilson

So I’ve had a play with this, you cannot use a full screen div within a slider it seems because of the mask which has settings of overflow: hidden (to hide the other slides).

With a static slider this isn’t an issue as you could create the interaction to an element outside the slider… in this case you want to display connected dynamic info, which is the issue.

In my head I’m thinking of a possible workaround.

If what I’m thinking even works it would mean the image would show up in the native lightbox style, so you wouldn’t be able to style it. (So dark background with image and more images at the bottom).

I have no idea if it will work, but I’m happy to try if it’s an end result you can use, but please let me know if it’s not suitable.


#7

Good morning @magicmark!
Yes I thought about the lightbox, but as you said, it can not be styled :pensive:
Do you think it´s possible to to build a custom slider just with interactions? Or do you know if anyone did this before? Can´t find something like this in the forum.
Cheers, Nils


#8

I don’t know if this works for you or if you’ve tried it… but try this:

Move the fullscreen sliders from each slide so they sit above the mask element.

Is it that simple for the solution? I hope so! I woke up at 3am thinking of that and wrote it down next to my bed :rofl:

CloudApp

CloudApp

Let me know or is this what you did originally?


#9

Ignore that, you’re back to the same issue when you have multiple sliders on the same page, hence you need it to be a child. :man_facepalming:

@Siton_Systems Has a slider with Lightbox on Codepen I noticed, perhaps you would be able to ask him if you could style the lightbox differently.

It’s fairly simple to add the code in to webflow and use dynamic slugs in the code to use with CMS content and would be a great solution for you.


#10

Ouh damn @magicmark! You need to sleep! :smiley: But I´m with you… It´s a simple and at the same time huge problem. I´ll ask @Siton_Systems! Thank you for the contact. I´ll let the community know if I got a solution! Cheers and greetings from East Germany! Nils


#12

Hi @Nilson,

You might have come across my custom slider video tutorials while searching for answers.

I find really enjoyable to take this kind of challenge in a “pure” Webflow fashion, meaning not a single line of custom code. Your problem really made me think and I adapted my method to your problem.

Disclaimer : you won’t have the ability to use swipe gesture or autoplay as it will require some custom coding. If you need such features I would definitely recommend having a look to the awesome codepen of @Siton_Systems which is certainly more flexible and scalable. The man knows what he’s talking about :slight_smile:

But this is I think a nice work around for not coding :crazy_face:

Here how it looks like

http://lightbox-slider.webflow.io/

The idea behind it is to have 2 synced sliders. The first one is the one you already have (but custom made) and the second one is the fullscreen one). This way when you go to the next slide both sliders will stay in sync and therefore when you go full screen have the corresponding image.

And the beauty of it is that you can then set only one interaction for display the full screen slider (you could even add the arrows on the full screen version making you able to slide the full screen slides).

If it does fit your needs, I’m happy to share with you the project so you can take a look on how I implemented it and of course if something is unclear, just ask :blush:

Here you can find my video tutorials for the basics of my custom slider :

I hope it will help you.

Max


#13

Hi @Siton_Systems - thank you really much for the quick and in detail answer!
As I can see, the swiper with photoswipe works very well and does exactly what I need.
But as you can imagine,- the solution is too difficult for me… :smiley:
And of course, I would like to have a pure webflow solution if possible.
So… i keep searching. :slight_smile: Thank you!


#14

@Maximosaurus… awesome! So there seems to be a solution at least :smile:
I took a look at you slider and its exactly what I need! And it doesn´t matter, that there is no ability to swipe on touch devices. This is what I love on webflow… the ability to create such things without code, just with creative ideas like yours.
So yes, I would love to see your live project!
Thank you,- Nils :slight_smile:


#15

I’m glad if it’s what you need. Coding is way more flexible and versatile but I’m still learning it :crazy_face:

Here is a read-only to see the project.
https://preview.webflow.com/preview/lightbox-slider?utm_source=lightbox-slider&preview=7fc38f7077882a70fb4d0fe44a39280e

Don’t hesitate if you need extra help to get it setup. :wink:

PS: I noticed an unexpected shift on the slides which don’t take 100% of the space. I’m still trying to figure out where it come from… But it doesn’t affect the way it works.


#16

Wonderful, thank you! I´ll build it up and share my experience here. :slight_smile:
When I´m done, you may already have found your bug too. :stuck_out_tongue_winking_eye:
So… let´s do it. Nils