End of Support for Joomla 3 - Forum closed

[SOLVED] Ken Burns animation not working in slideshow

Ken Burns animation not working in slideshow was created by hpag-leader

Posted 2 years 11 months ago #29014
Hello,
kenburns seemingly is working only while slides are in transition on my website ( comeniusrealschule.de/crw/beta/ ). I'd like to have it animated like here: getuikit.com/v2/docs/slideshow.html .
What did i do wrong? Here's the code:
Code:
<div class="uk-slidenav-position" data-uk-slideshow> <ul class="uk-slideshow uk-overlay uk-overlay-active" data-uk-slideshow="{autoplay:true,autoplayInterval:'5000',duration:'800',animation:fade,kenburns:true,kenburgsanimations:'uk-animation-middle-left'}"> <li><img class="uk-overlay-scale" src="images/slideshow/slide0.jpg" /> <div class="uk-overlay-panel uk-overlay-background uk-flex uk-overlay-bottom uk-overlay-fade"> <div style="border: 2px solid #fff; padding: 20px; display: inline; margin: 0 auto;"> <h1>Comenius Realschule Wertheim</h1> <p>Unsere Schule - modern und gut ausgestattet (Foto: © M. Giese)</p> </div> </div> </li> <li><img class="uk-overlay-scale" src="images/slideshow/slide1.jpg" /> <div class="uk-overlay-panel uk-overlay-background uk-flex uk-overlay-bottom uk-overlay-fade"> <div style="border: 2px solid #fff; padding: 20px; display: inline; margin: 0 auto;"> <h1>Lernräume</h1> <p>Gruppenarbeit im Klassenzimmer (Foto: © M. Giese)</p> </div> </div> </li> <li><img class="uk-overlay-scale" src="images/slideshow/slide2.jpg" /> <div class="uk-overlay-panel uk-overlay-background uk-flex uk-overlay-bottom uk-overlay-fade"> <div style="border: 2px solid #fff; padding: 20px; display: inline; margin: 0 auto;"> <h1>Willkommen</h1> <p>Eingangsbereich als "Fischaugen"-Panorama (Foto: © M. Giese)</p> </div> </div> </li> <li><img class="uk-overlay-scale" src="images/slideshow/slide3.jpg" /> <div class="uk-overlay-panel uk-overlay-background uk-flex uk-overlay-bottom uk-overlay-fade"> <div style="border: 2px solid #fff; padding: 20px; display: inline; margin: 0 auto;"> <h1>Unsere Schule lebt!</h1> <p>Verabschiedung des ehemaligen Rektors Hans-Peter Otterbach (Foto: © M. Giese)</p> </div> </div> </li> <li><img class="uk-overlay-scale" src="images/slideshow/slide4.jpg" /> <div class="uk-overlay-panel uk-overlay-background uk-flex uk-overlay-bottom uk-overlay-fade"> <div style="border: 2px solid #fff; padding: 20px; display: inline; margin: 0 auto;"> <h1>Feste und Aktionen</h1> <p>Adventscafé 2019 (Foto: © M. Giese)</p> </div> </div> </li> <li><img class="uk-overlay-scale" src="images/slideshow/slide5.jpg" /> <div class="uk-overlay-panel uk-overlay-background uk-flex uk-overlay-bottom uk-overlay-fade"> <div style="border: 2px solid #fff; padding: 20px; display: inline; margin: 0 auto;"> <h1>Abendstimmung</h1> <p>...an Fun-Court und Sporthalle (Foto: © M. Giese)</p> </div> </div> </li> <li><img class="uk-overlay-scale" src="images/slideshow/slide6.jpg" /> <div class="uk-overlay-panel uk-overlay-background uk-flex uk-overlay-bottom uk-overlay-fade"> <div style="border: 2px solid #fff; padding: 20px; display: inline; margin: 0 auto;"> <h1>Unsere Schule</h1> <p>... von oben (Foto: © M. Giese)</p> </div> </div> </li> </ul> <a class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" style="padding-left:25px;" data-uk-slideshow-item="previous"></a> <a class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" style="padding-right:25px;" data-uk-slideshow-item="next"></a> <ul class="uk-dotnav uk-dotnav-contrast uk-position-top uk-flex-center" style="padding:10px;"> <li data-uk-slideshow-item="0"><a></a></li> <li data-uk-slideshow-item="1"><a></a></li> <li data-uk-slideshow-item="2"><a></a></li> <li data-uk-slideshow-item="3"><a></a></li> <li data-uk-slideshow-item="4"><a></a></li> <li data-uk-slideshow-item="5"><a></a></li> <li data-uk-slideshow-item="6"><a></a></li> </ul> </div>

Thanks in advance!
Christian

Please Log in or Create an account to join the conversation.

Replied by joomlaplates on topic Ken Burns animation not working in slideshow

Posted 2 years 11 months ago #29017
Hallo,
öffnen sie die Datei
...\jp-school\layouts\theme.config.php
und fügen die slideshow-fx.js hinzu, siehe Bild

Attachment slideshow-fx.jpg not found

Attachments:

Please Log in or Create an account to join the conversation.

Replied by hpag-leader on topic Ken Burns animation not working in slideshow

Posted 2 years 11 months ago #29022
Danke für die Hilfe - leider funktioniert es damit alleine wohl nicht :(
Ich möchte gerne etwas wie hier haben: getuikit.com/v2/docs/slideshow.html#ken-burns-effect

Was mache ich falsch?
Code:
<div class="uk-slidenav-position" data-uk-slideshow> <ul class="uk-slideshow uk-overlay uk-overlay-active" data-uk-slideshow="{autoplay:true,autoplayInterval:'5000',duration:'800',animation:'fade',kenburns:true,kenburgsanimations:'uk-animation-middle-left'}"> <li><img class="uk-overlay-scale" src="images/slideshow/slide0.jpg" /> <div class="uk-overlay-panel uk-overlay-background uk-flex uk-overlay-bottom uk-overlay-fade"> <div style="border: 2px solid #fff; padding: 20px; display: inline; margin: 0 auto;"> <h1>Comenius Realschule Wertheim</h1> <p>Unsere Schule - modern und gut ausgestattet (Foto: © M. Giese)</p> </div> </div> </li> <li><img class="uk-overlay-scale" src="images/slideshow/slide1.jpg" /> <div class="uk-overlay-panel uk-overlay-background uk-flex uk-overlay-bottom uk-overlay-fade"> <div style="border: 2px solid #fff; padding: 20px; display: inline; margin: 0 auto;"> <h1>Lernräume</h1> <p>Gruppenarbeit im Klassenzimmer (Foto: © M. Giese)</p> </div> </div> </li> <li><img class="uk-overlay-scale" src="images/slideshow/slide2.jpg" /> <div class="uk-overlay-panel uk-overlay-background uk-flex uk-overlay-bottom uk-overlay-fade"> <div style="border: 2px solid #fff; padding: 20px; display: inline; margin: 0 auto;"> <h1>Willkommen</h1> <p>Eingangsbereich als "Fischaugen"-Panorama (Foto: © M. Giese)</p> </div> </div> </li> <li><img class="uk-overlay-scale" src="images/slideshow/slide3.jpg" /> <div class="uk-overlay-panel uk-overlay-background uk-flex uk-overlay-bottom uk-overlay-fade"> <div style="border: 2px solid #fff; padding: 20px; display: inline; margin: 0 auto;"> <h1>Unsere Schule lebt!</h1> <p>Verabschiedung des ehemaligen Rektors Hans-Peter Otterbach (Foto: © M. Giese)</p> </div> </div> </li> <li><img class="uk-overlay-scale" src="images/slideshow/slide4.jpg" /> <div class="uk-overlay-panel uk-overlay-background uk-flex uk-overlay-bottom uk-overlay-fade"> <div style="border: 2px solid #fff; padding: 20px; display: inline; margin: 0 auto;"> <h1>Feste und Aktionen</h1> <p>Adventscafé 2019 (Foto: © M. Giese)</p> </div> </div> </li> <li><img class="uk-overlay-scale" src="images/slideshow/slide5.jpg" /> <div class="uk-overlay-panel uk-overlay-background uk-flex uk-overlay-bottom uk-overlay-fade"> <div style="border: 2px solid #fff; padding: 20px; display: inline; margin: 0 auto;"> <h1>Abendstimmung</h1> <p>...an Fun-Court und Sporthalle (Foto: © M. Giese)</p> </div> </div> </li> <li><img class="uk-overlay-scale" src="images/slideshow/slide6.jpg" /> <div class="uk-overlay-panel uk-overlay-background uk-flex uk-overlay-bottom uk-overlay-fade"> <div style="border: 2px solid #fff; padding: 20px; display: inline; margin: 0 auto;"> <h1>Unsere Schule</h1> <p>... von oben (Foto: © M. Giese)</p> </div> </div> </li> </ul> <a class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" style="padding-left:25px;" data-uk-slideshow-item="previous"></a> <a class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" style="padding-right:25px;" data-uk-slideshow-item="next"></a> <ul class="uk-dotnav uk-dotnav-contrast uk-position-top uk-flex-center" style="padding:10px;"> <li data-uk-slideshow-item="0"><a></a></li> <li data-uk-slideshow-item="1"><a></a></li> <li data-uk-slideshow-item="2"><a></a></li> <li data-uk-slideshow-item="3"><a></a></li> <li data-uk-slideshow-item="4"><a></a></li> <li data-uk-slideshow-item="5"><a></a></li> <li data-uk-slideshow-item="6"><a></a></li> </ul> </div>
Last Edit:2 years 11 months ago by hpag-leader
Last edit: 2 years 11 months ago by hpag-leader.

Please Log in or Create an account to join the conversation.

Replied by joomlaplates on topic Ken Burns animation not working in slideshow

Posted 2 years 11 months ago #29026
Hallo, benutzen sie mal bitte den ganz einfachen Code:
<ul class="uk-slideshow" data-uk-slideshow="{kenburns:'30s'}">...</ul>
Danach können sie ihn erweitern mit autoplay ect pp
Last Edit:2 years 11 months ago by joomlaplates
Last edit: 2 years 11 months ago by joomlaplates.

Please Log in or Create an account to join the conversation.

Replied by hpag-leader on topic [SOLVED] Ken Burns animation not working in slideshow

Posted 2 years 11 months ago #29027
Problem solved.

Please Log in or Create an account to join the conversation.

Replied by hpag-leader on topic [SOLVED] Ken Burns animation not working in slideshow

Posted 2 years 11 months ago #29028
Wunderbar! Beim dritten Versuch mit einfachem Code hat es nun funktioniert und war auch erweiterbar.

Please Log in or Create an account to join the conversation.

Moderators: joomlaplates

Installations-Service

Don´t waste your time, we install your purchased Template
with the "Demo Content" within the next 24 hours.

Buy Now - 59€

Joomlaplates/Theme-Point is not affiliated with or endorsed by Open Source Matters or the Joomla! Project

Copyright © 2022 JoomlaPlates | Professional Joomla Templates with Uikit 3

Disclaimer & Privacy | License