Join the Webstudio community

Updated 2 months ago

Edit fiddle - JSFiddle - Code Playground

At a glance

The community member is trying to get FancyBox to run in WebStudio, but is having trouble getting it to work. The community members suggest putting the scripts inside the HTML embed, checking the marketplace examples, and using the HTML embed documentation. However, the community member says this doesn't resolve the issue. They provide a demo link and ask for help, and the other community members try to troubleshoot the problem. The main issues seem to be with the order of the scripts and HTML, and getting the gallery elements to work properly in WebStudio. Eventually, one community member says they were able to get it working on a published site, but it still has issues on the canvas. They suggest trying to create the HTML with WebStudio and only using the embed for the scripts and styles.

Useful resources
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