xara slideshow, google fonts & fontawesome

[FLySOLO]

Dear xaraians,

i'm a german xara user struggling with googlefont-/font-awesome-usage. In germany you got lots of legal trouble linking online-resources (like google-fonts) to your website.

Xara is exporting websites with local fonts instead of referencing to googlefonts. That's cool.

I just went insane with a clients site, that kept listing googlefonts-links no matter what i did.

After lots of time i found xara slideshow widget to be the reason.

In this part of mxslider.js it lists googlefonts and and some font-awesome.

mxsInitSliders = function(){
fnlogFunc("mxsInitSliders");
mxS.arSlider = new Array();
var arSlider = $(".mxSlider");
if(arSlider.length>0){
var strFonts = "<link href='https://fonts.googleapis.com/css?family=", arFonts = [
"Open+Sans","Source+Sans+Pro","Roboto+Condensed"," Oswald","Source+Serif+Pro","Roboto+Slab","Merriwea ther","Playfair+Display","Cherry+Swash","Lobster", "Dancing+Script","Amatic+SC"
];
for(var f=0 in arFonts){
strFonts += arFonts[f]+":300,400,600,900|";
}
strFonts += "' rel='stylesheet' type='text/css'>";
$("head")
.append(strFonts)
.append('<link rel="stylesheet" href="'+mxS.url+'css/mxslider.css?t='+new Date().getTime()+'" type="text/css">')
.append('<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">');

So i dowloaded some scripts and put this into my website-head-content.

<script src="index_htm_files/jquery.js"></script>
<script src="index_htm_files/mxslider.js"></script>
<link rel="stylesheet" href="index_htm_files/fontawesome.min.css"/>
<link href="fontawesome/all.css" rel="stylesheet">


I'm not a coder so it's very tedious for me to get this to work.

Long story short.

Dear xara, would it be possible to write the slideshow with all references/resources local? That would be great.
Even greater would be if all site resources would be linked locally.

Thx,

Fly

[Acorn]

FLy, thank you for going into all the detail.
I have move your Thread to the Dear Xara forum.

Xara will have built the Xara Slideshow widget ahead of GDPR or it wasn't fully aware.
Xara has a habit of not reviewing its own widgets (one of the worst is the QR Code Generator widget; another is the Embed a Website widget) where technologies (jQuery, CSS, SVG) or regulations (GDPR) impact on them.
Xara should not proclaim a code-free environment but leaves its customers to fight through the problems it creates.

I do not use the Xara Slideshow widget for these reasons, not to mention poor server availability and the third-party hosting aspects.

Acorn

[FLySOLO]

Hey Acorn,

thx for your fast reply. I replaced the two xara-Slide-shows with a xara website in an iframe and this script (which i didn't get to work so copied the xara file from an old website where i did the same):

<script>
sDispTimes=[4];
function sswitch(){
var n=xr_curp+1;
if (n==xr_spapn)n=0;
xr_spapp(n);
setTimeout(sswitch,sDispTimes[n%sDispTimes.length]*1000);
}
setTimeout(sswitch,sDispTimes[0]*1000);
</script>
<style>
.zoomThis{
animation: slideZoom linear 10s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
-ms-animation: slideZoom linear 10s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
}

@keyframes slideZoom{
0% { transform: scale(1.00); }
100% { transform: scale(1.50); }
}

@-ms-keyframes slideZoom {
0% { -ms-transform: scale(1.00); }
100% { -ms-transform: scale(1.50); }
}
</style>


It works and all the cross-referenced google stuff is gone.


bb and thx again,

Fly

FLy, thank you for going into all the detail.
I have move your Thread to the Dear Xara forum.

Xara will have built the Xara Slideshow widget ahead of GDPR or it wasn't fully aware.
Xara has a habit of not reviewing its own widgets (one of the worst is the QR Code Generator widget; another is the Embed a Website widget) where technologies (jQuery, CSS, SVG) or regulations (GDPR) impact on them.
Xara should not proclaim a code-free environment but leaves its customers to fight through the problems it creates.

I do not use the Xara Slideshow widget for these reasons, not to mention poor server availability and the third-party hosting aspects.

Acorn

[Acorn]

Hey Acorn,
thx for your fast reply. I replaced the two xara-Slide-shows with a xara website in an iframe and this script (which i didn't get to work so copied the xara file from an old website where i did the same):

<script>
sDispTimes=[4];
function sswitch(){
var n=xr_curp+1;
if (n==xr_spapn)n=0;
xr_spapp(n);
setTimeout(sswitch,sDispTimes[n%sDispTimes.length]*1000);
}
setTimeout(sswitch,sDispTimes[0]*1000);
</script>
<style>
.zoomThis{
animation: slideZoom linear 10s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
-ms-animation: slideZoom linear 10s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
}

@keyframes slideZoom{
0% { transform: scale(1.00); }
100% { transform: scale(1.50); }
}

@-ms-keyframes slideZoom {
0% { -ms-transform: scale(1.00); }
100% { -ms-transform: scale(1.50); }
}
</style>

It works and all the cross-referenced google stuff is gone.
bb and thx again, Fly

Fly, so you've used siran's code to cycle round a presentation website with a fixed time of 4 seconds per slide.
The style code can be simplified further by removing the vendor prefixes:

<style>
.zoomThis {
animation: slideZoom linear 10s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
}
@keyframes slideZoom {
0% { transform: scale(1); }
100% { transform: scale(1.5); }
}
</style>

I am guessing the zoom in of 10 seconds to 150% is never reached as you are switching every 4 seconds?

Acorn