Join the Webstudio community

Updated 4 weeks ago

Edit fiddle - JSFiddle - Code Playground

How do I get FancyBox to run in webstudio?

I'm trying to create this, but am having no luck getting it to run: https://jsfiddle.net/5utk13x6/

Any ideas how to split it out so that it runs within webstudios requirements?
O
S
30 comments
all you need is to put the scripts inside the html embed, also check out marketplace examples and https://docs.webstudio.is/university/core-components/html-embed
I do that, and it appears, but it just doesn't run...
That hasn't worked. Can you make a quick demo using this code? https://jsfiddle.net/5utk13x6/
your scripts are rendered before the html
like you literally have your gallery elements AFTER your scripts, scripts need to go AFTER
https://apps.webstudio.is/builder/0afe7d58-f90d-4c65-8f37-9fd7485e2394?authToken=8f1ecdca-30ba-4d34-9895-e5eb73f439ca&mode=preview

ok I tried on my clone https://dynamic-test-xuonu.wstd.io/fancybox3
this works on a published site, but doesn't work on canvas plus when closing the lightbox, it stops working entirely

seems like there is some issue, we need to look into this
Thank you for trying
btw can you try creating the html with webstudio and only using embed for the script and styles?
because normally you wouldn't want to embed that gallery html like that
The images are wrapped in a tags... I don't know how to achieve this using webstudio....
its a basic thing in webstudio
...ahhhh drag it under the link
<a data-fancybox="gallery" data-src="https://lipsum.app/id/1/1024x768">
How do you create those bits within it, though?
data-fancybox="gallery" data-src="
these are attributes or properties
you really need to watch a few videos on youtube we made
This worked πŸ™‚
But, as you mentioned, it only 'actually' works once published
Is it on the same link?
Yes, home page
(all the images are the same at the moment... working towards feeding through a gallery from wordpress)
Add a reply
Sign up and join the conversation on Discord