Integrating fancyBox3

[reza-f (Reza)]

Hi I want to integrate fancyBox3 into my document. Here is their quick start suggestions:

<!-- 1. Add latest jQuery and fancyBox files -->

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>


<!-- 2. Create links -->

<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>
<a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a>

How can I get this integrated into Hype

[DBear]

You will only be able to use HTML inside a Hype element as fancyBox relies on “data” attributes which Hype does not use in it’s setup. Open the innerHTML of any element and you can paste the demo code in there.

fancyBox3+Hype.zip (21.4 KB)

[MarkHunte]

Although you can add the attributes using JS.

Basic idea

 var fancyImage1 = hypeDocument.getElementById('fancyImage1')
	 hypeDocument.setElementProperty(fancyImage1, 'background-image', 'https://source.unsplash.com/0JYgd2QuMfw/240x160' )
  	fancyImage1.setAttribute("data-caption", fancyImage1.title);
	fancyImage1.setAttribute("data-fancybox","");
	fancyImage1.setAttribute("href" , "https://source.unsplash.com/0JYgd2QuMfw/1500x1000");

fancyBox4 HypeJS.hype.zip (247.6 KB)

[DBear]

True but I didn’t want to add more complexity to a situation that, i may have wrongly assumed was a user who wouldn’t be able to grasp this. Plus in my mind it would detract away from the ease of using this third party library. There may also be some additional things that the library does and that’s to organise the pics into a gallery of sorts and also you wouldn’t be able to grab the example code in this way but this is a valid point. You can manipulate and add the attributes using JS.

P.S @MarkHunte fancyBox3 is the actual title of the library. I don’t believe they have a 4 version … i may be wrong

[MarkHunte]

Agree, In most cases using the innerHTML is more convenient, although a quick look I see there are extensive/complex API for fancy box.

@DBear

You can manipulate and add the attributes using JS

Yer, That was my main point really.

hah 4, I was just pushing the example version along doh..

[reza-f (Reza)]

Thanks for helping out.
I have been exploring DBear’s suggestion and infect I want to open a Vimeo video with this library.
I added the scripts in the header and added a button with the link to the vimeo video and it all works well.
However if I go back to edit the button, as soon as I tap on it to access the editor for the button. the script runs and the video is displayed in the app. I can not find a way to go back or close the overlay. Also now the file would not even open.

I also want to add a local image and get that to open the video. I know in DBear’s example he has the tag on a linked image, but if it is local, the source of the image is not available to add a link to it. How would I get around this, or would I need to post my image somewhere else and use it in the source which could be possible.

Also now something has gone wrong with the file that I cant even post it for you to see.
If there are alternative libraries that play better with Hype please let me know.

[reza-f (Reza)]

I ended up adopting Mark Hunte suggestion. even though it is a little more complicated but I felt it was safer. Here is an example with 2 buttons, one opening a movie and the other opening an iframe.
Thanks
PS I restated my computer and I could open the old file, but some information has been lost.

videoPopup2.hype.zip (259.4 KB)