en EN de DE
Welcome, Guest
Username: Password: Remember me
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.

TOPIC: [SOLVED] Ken Burns animation not working in slideshow

Ken Burns animation not working in slideshow 1 month 6 days ago #1

  • hpag-leader
  • hpag-leader's Avatar
  • Offline
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:
<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
The administrator has disabled public write access.

Ken Burns animation not working in slideshow 1 month 6 days ago #2

  • joomlaplates
  • joomlaplates's Avatar
  • Offline
Hallo,
öffnen sie die Datei
...\jp-school\layouts\theme.config.php
und fügen die slideshow-fx.js hinzu, siehe Bild

The administrator has disabled public write access.

Ken Burns animation not working in slideshow 1 month 5 days ago #3

  • hpag-leader
  • hpag-leader's Avatar
  • Offline
Danke für die Hilfe - leider funktioniert es damit alleine wohl nicht :(
Ich möchte gerne etwas wie hier haben: https://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>
The administrator has disabled public write access.

Ken Burns animation not working in slideshow 1 month 5 days ago #4

  • joomlaplates
  • joomlaplates's Avatar
  • Offline
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
The administrator has disabled public write access.

[SOLVED] Ken Burns animation not working in slideshow 1 month 4 days ago #5

  • hpag-leader
  • hpag-leader's Avatar
  • Offline
Problem solved.
The administrator has disabled public write access.

[SOLVED] Ken Burns animation not working in slideshow 1 month 4 days ago #6

  • hpag-leader
  • hpag-leader's Avatar
  • Offline
Wunderbar! Beim dritten Versuch mit einfachem Code hat es nun funktioniert und war auch erweiterbar.
The administrator has disabled public write access.
Moderators: joomlaplates

Einzelnes Theme ( Download 1 Template)

Das sog. "Einzelne Theme" ist für alle Kunden geeignet die lediglich ein (1) Template benötigen, egal ob kommerziell oder privat genutzt. Sie dürfen das erworbene Template auf einer Joomla Installation produktiv nutzen.


Mitgliedschaft ( Download alle Templates)

Während ihrer Mitgliedschaft ist es ihnen erlaubt alle Templates herunter zu laden und unseren Bestimmungen entsprechend zu nutzen. Nach Ablauf der Mitgliedschaft dürfen sie natürlich alle bereits in Nutzung befindlichen Templates weiter einsetzen. Sie haben jedoch nach Ende ihrer Mitgliedschaft keinen Zugriff mehr auf den Download Bereich und keinen Zugriff mehr auf Updates.

Die Zahlung ist einmalig und ihr Membership läuft automatisch aus, sofern sie es nicht erneuern.

Unsere Mitgliedschaften bieten wir ausschließlich über JoomlaPlates.com an.

Jetzt kaufen