FancyBox in Google Sites? ~ Страницы Интернета

воскресенье, 4 сентября 2016 г.

FancyBox in Google Sites?

06:34 By Guest Rooms "Varnaflats.eu" Google Site, Picture, script, site No comments

Janet ten Boom:

In addition to my previous solution:

You can write a gadget for this. Not too difficult really!

Go to http://fancyapps.com/fancybox/
Download the fancyboxfiles and unzip them into a folder
Create a folder in Drive: make it a public folder
Upload your entire unzipped folder fancyboxfiles to this folder
Now the files are hosted here
Discover the 'hostlink' of the files: go to a file and rightclick on it; than click on details. At the right you will see the details including (in blue) the host link
Now copy the script of the page of fancyapps to something like Word or another wordprocessor and replace all the 8 files of FancyBox with the links of your hosted FancyBox 'Drive'files
Replace http with https in this line

Now add some lines to create the XMLgadget (sreenshot)
Your code looks like this now:
This is your basic code for FancyBox

Now create a regular page in your google site (I think it would be best to create a 'one column' page)
Click HTML
add class="fancybox" to your images (after <a )
Example <a class="fancybox" href="https://....googleusercontent.com/........png"><src="https://....googleusercontent.com/.......png"></a>
Copy all of the HTML code of your page now
Paste this HTMLcode in your XML code in Word (screenshot)
Maybe you'll have to add <style type="text/css"> below <!DOCTYPE html> and add a closing tag </style>somewhere, I'm not sure.
Now save your file as an XML file example.xml
Upload it to drive (to a public folder!)
Rightclick on it - details - copy the host-link of this XMLfile
Now go to your google site
Remove the HTML of your page
Now click Insert - more gadgets - gadgets by URL
Paste the URL of your XML file
Make it as big as your page
I tested it and FancyBox works within this page now!

See you!

Well... I found some sort of a solution:

I created a website and uploaded it to Drive
In this way my site is hosted on Google Drive: https://googledrive.com/host/0B9xKQGZDGAMQYnU1OTRZVmhLRUU/test-11.html
I downloaded the Fancyboxfiles and uploaded them to Drive.
So in this way the Fancybox-files are also hosted on Drive; these are now HTTPSfiles
At first my code didn't work, but after reading a discussion about loading an unknown font into Google sites I got it to work: simply replace the http of this line with https

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

After this:

I can go to my GoogleSite
Go to a page and edit it and insert a gadget - (common - iframewrapper by mori)
Insert my 'Drive'Site in this gadget

And voila! Working Fancybox!

Downside: you'll have to create a full page in your google Drive, because the FancyBox image loads within the I-frame.

So the RHEFimage will be as big as the I-frame.

But still... for now I'm happy with this solution.

I tried to use this code within the HTMLbox, but it said this (screenshot) So I guess that's not an option.

Well.. thanx and see you! (for now)

Страницы Интернета

воскресенье, 4 сентября 2016 г.