Log in
Log into community
Join the Webstudio community
View all posts
Related posts
Was this helpful?
π
π
π
Powered by
Hall
Active
Updated 4 weeks ago
0
Follow
Edit fiddle - JSFiddle - Code Playground
Edit fiddle - JSFiddle - Code Playground
Active
0
Follow
S
Steve
7 months ago
Β·
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
Share
Open in Discord
O
Oleg Isonen
7 months ago
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
S
Steve
7 months ago
I do that, and it appears, but it just doesn't run...
S
Steve
7 months ago
FancyBox3 page here shows that in action:
https://apps.webstudio.is/builder/ccb69068-fb0a-4781-bfd8-8a46ec655d2c?authToken=e58f77b0-cc43-451e-a4f7-8afa39d03642&mode=preview
S
Steve
7 months ago
That hasn't worked. Can you make a quick demo using this code?
https://jsfiddle.net/5utk13x6/
O
Oleg Isonen
7 months ago
your scripts are rendered before the html
O
Oleg Isonen
7 months ago
like you literally have your gallery elements AFTER your scripts, scripts need to go AFTER
S
Steve
7 months ago
They are now after... hasn't resolved the issue... any ideas?
https://apps.webstudio.is/builder/ccb69068-fb0a-4781-bfd8-8a46ec655d2c?authToken=e58f77b0-cc43-451e-a4f7-8afa39d03642&mode=preview
Attachment
O
Oleg Isonen
7 months ago
which page?
O
Oleg Isonen
7 months ago
found it 3
S
Steve
7 months ago
fancybox3
O
Oleg Isonen
7 months ago
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
S
Steve
7 months ago
Thank you for trying
O
Oleg Isonen
7 months ago
btw can you try creating the html with webstudio and only using embed for the script and styles?
O
Oleg Isonen
7 months ago
because normally you wouldn't want to embed that gallery html like that
O
Oleg Isonen
7 months ago
ohhhh
S
Steve
7 months ago
The images are wrapped in a tags... I don't know how to achieve this using webstudio....
O
Oleg Isonen
7 months ago
its a basic thing in webstudio
S
Steve
7 months ago
...ahhhh drag it under the link
S
Steve
7 months ago
<a data-fancybox="gallery" data-src="
https://lipsum.app/id/1/1024x768">
How do you create those bits within it, though?
O
Oleg Isonen
7 months ago
which bits?
S
Steve
7 months ago
data-fancybox="gallery" data-src="
O
Oleg Isonen
7 months ago
these are attributes or properties
O
Oleg Isonen
7 months ago
you really need to watch a few videos on youtube we made
O
Oleg Isonen
7 months ago
https://www.youtube.com/playlist?list=PL4vVqpngzeT4sDlanyPe99dYl8BgUYCac
S
Steve
7 months ago
This worked π
S
Steve
7 months ago
But, as you mentioned, it only 'actually' works once published
O
Oleg Isonen
7 months ago
Is it on the same link?
S
Steve
7 months ago
Yes, home page
S
Steve
7 months ago
(all the images are the same at the moment... working towards feeding through a gallery from wordpress)
S
Steve
7 months ago
https://dynamic-test-w0v5q.wstd.io/
Add a reply
Sign up and join the conversation on Discord
Join on Discord