×
Please select the right Template below! And please insert a live URL where we can see what do you mean. A screenshot is helpful too.
[SOLVED] Ken Burns animation not working in slideshow
- hpag-leader
-
Topic Author
- Posts: 7
Ken Burns animation not working in slideshow was created by hpag-leader
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:
Thanks in advance!
Christian
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:
<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
1 year 1 month ago
#1
Please Log in or Create an account to join the conversation.
Replied by joomlaplates on topic Ken Burns animation not working in slideshow
Hallo,
öffnen sie die Datei
...\jp-school\layouts\theme.config.php
und fügen die slideshow-fx.js hinzu, siehe Bild
ö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
Dokumentation:
www.joomlaplates.de/dokumentation.html
www.joomlaplates.de/dokumentation.html
1 year 1 month ago
#2
Attachments:
Please Log in or Create an account to join the conversation.
- hpag-leader
-
Topic Author
- Posts: 7
Replied by hpag-leader on topic Ken Burns animation not working in slideshow
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?

Ich möchte gerne etwas wie hier haben: getuikit.com/v2/docs/slideshow.html#ken-burns-effect
Was mache ich falsch?
<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>
Please Log in or Create an account to join the conversation.
Replied by joomlaplates on topic Ken Burns animation not working in slideshow
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
<ul class="uk-slideshow" data-uk-slideshow="{kenburns:'30s'}">...</ul>
Danach können sie ihn erweitern mit autoplay ect pp
Dokumentation:
www.joomlaplates.de/dokumentation.html
www.joomlaplates.de/dokumentation.html
Please Log in or Create an account to join the conversation.
- hpag-leader
-
Topic Author
- Posts: 7
Replied by hpag-leader on topic [SOLVED] Ken Burns animation not working in slideshow
Problem solved.
1 year 1 month ago
#5
Please Log in or Create an account to join the conversation.
- hpag-leader
-
Topic Author
- Posts: 7
Replied by hpag-leader on topic [SOLVED] Ken Burns animation not working in slideshow
Wunderbar! Beim dritten Versuch mit einfachem Code hat es nun funktioniert und war auch erweiterbar.
1 year 1 month ago
#6
Please Log in or Create an account to join the conversation.
Moderators: joomlaplates