Impress.js – Kontrolle und Zusammenfassung

RonnyDee impress 1 Comment

So, die ersten Artikel waren ja schon sehr umfangreich. Bevor wir allerdings weitermachen, prüfen wir mal ganz kurz was wir bis jetzt gemacht haben:

In Summe habe ich die komplette Dateisammlung mit dem derzeitigen Stand [hier] zum downloaden bereitgestellt.

Die neuen Dateien

Natürlich haben wir nun auch einige neuen Dateien bzw. Ordner erstellt:

  • index.php
    Diese Datei steuert unsere neue Präsentation, die Folien sind zurzeit (!) manuell eingebunden
  • /folie01
    Unser erster Folienordner

    • slide.php
      Die neue Foliendati mit dem Inhalt derselbigen
    • functions.php
      Die Steuerungsdatei für das Verhalten der Folie, wo wir bereits einige Parameter setzen können
    • slide.css
      Die CSS Datei für diese Folie, die wir aber noch nicht eingebunden oder verwendet haben
    • 65103.png
      Ein Beispielbild, das wir hinterlegt haben

Die weiteren Folien

Möchten wir nun weitere Folien erstellen, so kopieren wir einfach den Ordner „folie01“ samt Inhalt und fügen in als „folie02“ ein:

impress_step08

Damit auch ein wenig Unterschied zu erkennen ist, empfehle ich, den Inhalt und die Steuerungsparameter etwas zu verändern:

z.B. die slide.php mit einem neuen Bild

<?php 
include 'functions.php';
echo $impressslideargument; ?>
        <q>Das ist nun <b>die 2te</b> Folie die wir ansprechen. Cool, oder?</q>
	<img src="<?php echo $letzterordner; ?>/55080.png">
		
</div>

und die dazugehörige functions.php
$impressid = ""; // Optionaler eindeutiger Name für die Url-Ansteuerung
$cssclass = "";  // CSS Klasse damit die Formatierung funktioniert
$datax = "1000"; // Wo auf der X-Achse soll das Element liegen
$datay = "500"; // Wo auf der Y-Achse soll das Element liegen
$dataz = ""; // Soll es auch weiter vorne (+ Wert) oder weiter hinten (- Wert) liegen
$scalefactor = ""; // Hier gehts um die Skalierung
$rotatefactor = "90"; // Und hier geht um die Drehung. Gegen den Uhrzeigersinn (- Wert), im Uhrzeigersinn (+ Wert)

Soweit so gut.
Damit diese „Folien“ nun auch in der Präsentation angesteuert werden können, müssen wir in der index.php noch folgende Zeile ändern:
<div id="impress">
<?php include 'folie01/slide.php';?>
</div>

auf
<div id="impress">
<?php include 'folie01/slide.php';?>
<?php include 'folie02/slide.php';?>
</div>


Und nach einem Test…. funktioniert nichts.
Tja, das meinte ich auch am Anfang, dass wir uns langsam rantasten müssen. Doch der Fehler ist schnell gefunden: Es wird keine CSS-Klasse angesprochen. Sprich wir müssen in den jeweiligen functions.php Dateien jeder Folie den Eintrag

$cssclass = "step";

hinterlegen.
Dann klappts auch mit dem Nachbar… äh, mit der Präsentation. Siehe [hier]

Hol es dir doch selbst

Was nun noch fehlt ist die Tatsache, dass Impress.js selbstständig erkennen soll, wie viele „foliexx“-Ordner es gibt und die Präsentation demzufolge selbst aufbauen soll. Also kümmern wir uns diesmal um die index.php Datei, genauer genommen um diesen Abschnitt:

<div id="impress">
<?php include 'folie01/slide.php';?>
<?php include 'folie02/slide.php';?>
</div>

Aus diesem Grund benötigen wir zuerst einmal ein PHP-Skript, dass uns die aktuelle Anzahl der „Folien“-Ordner im Verzeichnis mitteilt:
$anzahl_folienordner = count(glob('*',GLOB_ONLYDIR))-2; // Abzüglich 2 Ordner, da Impress.js bereits 2 mitgebracht hat (css und js)

Die Funktion „count(glob(‚*‘,GLOB_ONLYDIR))“ zählt alle Ordner in dem Verzeichnis, wo die index.php Datei liegt. Da dort bereits 2 Ordner sind, die keine FolienOrdner sind, müssen wir auch noch -2 rechnen. Hast du z.B. noch weitere Ordner in dem Verzeichnis, so ziehe diese ebenfalls von der Endsumme ab.

So, und nun bauen wir noch eine kleine Schleife in PHP die solange durchläuft, so lang die relevante Anzahl der ermittelten FolienOrdner noch nicht erreicht ist. Darüber hinaus, bauen wir auch gleich eine If-Abfrage ab, da wir nämlich mit zweistelligen Zahlen im Ordnernamen arbeiten. Also auch dann wenn sie eigentlich einstellig sind.. z.B. 1 = 01, 2 = 02, usw.

<div id="impress">
<?php
 	
$anzahl_folienordner = count(glob('*',GLOB_ONLYDIR))-2; // Abzüglich 2 Ordner, da Impress.js bereits 2 mitgebracht hat (css und js)

for($count = 1; $count < 3; $count++)
{
  If ($count < 10) 	{ include 'folie0'. $count .'/slide.php'; }
  else { include 'folie'. $count .'/slide.php';	}
}
?>
</div>

Und wenn wir nun die Präsentation aufmachen, dann sollte man auch mittels den Cursortasten zwischen zwei Folien hin und her wechseln können. Der Quelltext sieht übrigens so aus und bestätigt auch unseren Code in der functions.php, der ja nur aktiv wird, wenn Daten vorhanden sind (siehe data-x, data-y und rotate-Werte in der Folie2):
<div id="impress">
 <div class="step" >        <q>Aren't you just <b>bored</b> with all those slides-based presentations?</q>
		<img src="folie01/65103.png">
		
</div> <div class="step"  data-x="1000"  data-y="5000"  data-rotate="90" >        <q>Das ist nun <b>die 2te</b> Folie die wir ansprechen. Cool, oder?</q>
		<img src="folie02/55080.png">
		
</div></div>


Notiz am Rande: Wenn ein Artikel gefällt, dann empfehle ihn doch bitte weiter. Nichts macht mehr Spaß, wenn man sieht, dass die Arbeit auch durch Liken & Sharen ein wenig Anerkennung findet. Liken & Sharen – eine bessere kostenlose Anerkennung gibt es nicht 😉


Liken & Sharen

Weitere Beiträge

Comments 1

  1. Pingback: Impress.js – slide-functions | Headlong Emotions

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.