How to install Fancybox 5?

Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here...
(no questions or problems please, this section is not monitored by support).
Forum rules
This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.

PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
Post Reply
wb_user
 
 
Posts: 1062
Joined: Sun Jul 05, 2015 7:03 am

How to install Fancybox 5?

Post by wb_user »

WYSIWYG Web Builder includes fancybox 1.3.4 as one of the default lightbox options which can be used in SlideShows, Photo Gallery, Images, YouTube, Vimeo, HTML5 video, link popups etc.
This can be configured in the Page Properties->Miscellaneous.

Due to license restrictions it is not allowed to distribute FancyBox v5.
However, if you copy the files from
https://github.com/fancyapps/ui
to
Documents\WYSIWYG Web Builder\system\lightbox\fancybox
then the application will use these files instead of the included ones (FancyBox v1).

please note you cannot use the script (update) without having to purchase a license due to it is 'commercial' and cannot be used 'freely'. for that reason you should buy fancybox 5 if you use that on your projects. fancybox purchase website is https://www.fancyapps.com/pricing/

Note:
1. download last version of fancybox from https://github.com/fancyapps/ui
Image

2. copy fancybox.css and fancybox.umd.js to \system\lightbox\fancybox folder.
Image

3. rename that files to jquery.fancybox.min. you should see jquery.fancybox.min.js and jquery.fancybox.min.css in system folder.
Image

4. create a new file with named lightbox.css. Copy this code in the file and save it to system folder:

Code: Select all

[attribute]
rel=$ID$

[copyrights]
company=Janis Skarnelis
url=http://fancybox.net/

[init]
script=$("a[rel^='$ID$']").fancybox({$SETTINGS$});
Image

5. open jquery.fancybox.min.js with notepad. add this code:

Code: Select all

$(document).ready(function(){Fancybox.bind();});
Image
Last edited by wb_user on Fri Apr 28, 2023 2:04 pm, edited 3 times in total.
User avatar
Pablo
 
Posts: 22472
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: How to install Fancybox 5?

Post by Pablo »

Thanks for sharing!
User avatar
crispy68
 
 
Posts: 2912
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: How to install Fancybox 5?

Post by crispy68 »

This is a great tutorial.

The only thing I would caution here is just make sure to buy a license if you plan on using Fancybox5 in your website.

This is a commercial script now and you need to purchase a license to use Fancybox 5 on your website. It specifically states " You are welcome to try them out on your project in a development and staging environment to see if it meets your needs."
https://www.fancyapps.com/pricing/
User avatar
BaconFries
 
 
Posts: 5640
Joined: Thu Aug 16, 2007 7:32 pm

Re: How to install Fancybox 5?

Post by BaconFries »

As crispy68 reply I would air of caution when using due to the requirement of a license (purchase) to use. What is there to stop anyone using and not paying the license fee. Could or would this have any ramifications (legally) to the forum or Pablo from the creator of Fancybox? I am only pointing this out due to remembering that on one of my extensions I made (a longtime ago) the original author of the script wasn't to happy and asked for the link back to his site (now defunct) be removed from the forum posting as he getting questions about the extension he didn't want to be getting asked. Anyway it down to Pablo if he feels it OK.
wb_user
 
 
Posts: 1062
Joined: Sun Jul 05, 2015 7:03 am

Re: How to install Fancybox 5?

Post by wb_user »

the topic for fancybox 3 It used to exist friends. i only update that to v5
User avatar
BaconFries
 
 
Posts: 5640
Joined: Thu Aug 16, 2007 7:32 pm

Re: How to install Fancybox 5?

Post by BaconFries »

the topic for fancybox 3 It used to exist friends. i only update that to v5
Yes there was...but it is not about distribution it is about its use. Perhaps you should also write (state) that you cannot use the script (update) without having to purchase a license due to it is 'commercial' and cannot be used 'freely'..
wb_user
 
 
Posts: 1062
Joined: Sun Jul 05, 2015 7:03 am

Re: How to install Fancybox 5?

Post by wb_user »

BaconFries wrote: Thu Apr 27, 2023 5:22 pm
the topic for fancybox 3 It used to exist friends. i only update that to v5
Yes there was...but it is not about distribution it is about its use. Perhaps you should also write (state) that you cannot use the script (update) without having to purchase a license due to it is 'commercial' and cannot be used 'freely'..
are you mean i add this text in first post?
"please note you cannot use the script (update) without having to purchase a license due to it is 'commercial' and cannot be used 'freely'. for that reason you should buy fancybox 5 if you use that on your projects."
User avatar
BaconFries
 
 
Posts: 5640
Joined: Thu Aug 16, 2007 7:32 pm

Re: How to install Fancybox 5?

Post by BaconFries »

are you mean i add this text in first post?
"please note you cannot use the script (update) without having to purchase a license due to it is 'commercial' and cannot be used 'freely'. for that reason you should buy fancybox 5 if you use that on your projects."
Yes
Post Reply