xara slideshow, google fonts & fontawesome

[FLySOLO]

Dear Xara,

when i use your slideshow widget and check at https://webbkoll.dataskydd.net/de/

for external ressources, google-fonts etc. i get this:

css //maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css
css https://widgets.xara-online.com/slid...=1669972361476
css https://fonts.googleapis.com/css?fam...400,600,900|Ro...
script https://widgets.xara-online.com/slider/js/jquery.js
script https://widgets.xara-online.com/slider/js/mxslider.js?2

All of this gets added just by inserting your slideshow. I usually work around this by manually building a separate xara-file with a little code added and export and embedd as an iframe.

This is a bit tedious and for casual users hard to implement.

Does your slideshow really need google-fonts and all the other stuff?

It would be greatly apreciated if you could alter the widget or add a new one that is gdpr (dsgvo) compliant.

Thank you in advance,

fly

[RKissane]

Take a look at what Acorn had done with CSS on this post:

https://www.talkgraphics.com/showthr...ing-CSS-Slider

Ray

[Acorn]

Take a look at what Acorn had done with CSS on this post:
https://www.talkgraphics.com/showthr...ing-CSS-Slider Ray

Ray, thank you for the plug.

If you do not want the jQuery dependency then replace the jQuery code with pur JavaScript in the Website Body: document.querySelectorAll('.picture')[0].parentElement.className += " picture-container";

As Xara uses jQuery heavily in its widgets, I originally took the lazy approach. JavaScript is cleaner and quicker and, unfortunately, necessary.

@Xara - It is a shame still that Xara does not properly Name any ClassName of a Group where its objects have their own ClassNames.
Even if you change the wrapper to an ID, you have to chase after siblings as it appear after the Group in the DOM.

Acorn

[Acorn]

I decided to revamp the slider by removing the JavaScript code as well.

I also played around a little with the keyframes, how the pictures animate.

CSS - Carousel.xar

Acorn

[Acorn]

If you want to get fancy then include a simple Xara animation on a page element. This ensure ani.css is included in your rendering.

In my CSS, you can now ignore the @keyframes detail if you replace 'display' with one of ani.css's animation names, e.g., rotateOutDownRight as in #slides ~ .picture { opacity: 0; animation: rotateOutDownRight var(--time) infinite;
To see what is available, look into the design file in https://www.talkgraphics.com/showthr...030#post638030. The best reults will be those @keyframes that are labelled page...

Acorn