End of Support for Joomla 3 - Forum closed

[SOLVED] Ken Burns animation not working in slideshow

hpag-leader
Offline Topic Author
Fresh Boarder
Posts: 7
Thank you received: 0

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

Posted 4 years 2 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

by hpag-leader

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

joomlaplates
Offline
Moderator
Posts: 8848
Thank you received: 1738

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

Posted 4 years 2 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

Dokumentation:
www.joomlaplates.de/dokumentation.html

by joomlaplates

Attachments:

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

hpag-leader
Offline Topic Author
Fresh Boarder
Posts: 7
Thank you received: 0

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

Posted 4 years 2 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:4 years 2 months ago by hpag-leader

Last edit: 4 years 2 months ago by hpag-leader.

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

joomlaplates
Offline
Moderator
Posts: 8848
Thank you received: 1738

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

Posted 4 years 2 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

Dokumentation:
www.joomlaplates.de/dokumentation.html

Last Edit:4 years 2 months ago by joomlaplates

Last edit: 4 years 2 months ago by joomlaplates.

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