Hallo und herzlich willkommen zu diesem Tutorial, welches erklärt, wie ihr in Joomla 2.5 an einer beliebigen Modul-Position den Flexslider für eine Slideshow einsetzt! Ich zeige euch hier zunächst die unbearbeitete Darstellung der Startseite ohne Flexslider!
Zunächst müsst ihr das Modul FlexSlider im Joomla-Administrator-Bereich bekanntermaßen über „Erweiterungen – Erweiterungen“ installieren. Den FlexSlider findet ihr auf der Webseite von „Joomla! Extensions Directory“. In der Video-Beschreibung findet ihr den Link zum Anklicken:
http://extensions.joomla.org/extensions/photos-a-images/slideshow/image-jquery-slideshow/19331
Jetzt öffnet ihr unter „Erweiterungen – Module“ das Modul „JS FlexSlider“. Hier wählt ihr „Titel anzeigen: Verbergen“, „Status: Freigegeben“ und setzt bei „Position“ die gewünschte Position ein! Bei jedem neu installierten oder erstellten Modul steht das Dropdownmenü unter „Modulzuweisung“ auf: „Keine Seiten“. D. h. Dieses Modul erscheint zunächst auf keiner Seite. Zum Testen wählen wir hier „Nur auf der gewählten Seite“ und klicken die Checkbox zu „Home“ an! Anschließend speichert ihr das Modul ab!
Als nächsten Schritt wählt ihr die Bilder aus. Hierbei solltet ihr darauf achten, dass alle Bilde möglichst die gleichen Abmessungen und auch das gleiche Format aufweisen (also entweder alle Bilder im 16:9-Format oder alle Bilder im 4:3-Format und alle Bilder entweder im Quer- oder im Portrait-Format). Ansonsten entstehen zumindest unschöne Springeffekte wie ich euch gleich bewusst zeigen werde!
Sobald ihr natürlich ein Layout oder eine Position einsetzt, bei welcher unterhalb des Sliders kein weiterer Content erscheint tritt dieser Springeffekt mitunter nicht auf.
Der FlexSlider arbeitet im Gegensatz zu vielen anderen Slidern vollständig responsiv. Ich zeige euch hier die verschiedenen automatischen Anpassungen bis herunter zu einer Smartphone-Browserbreite
Ich ziehe das Browserfenster jetzt auf eine Breite von ca.730 Pixel, was ihr auch an der Anzeige unten rechts in der Statusleiste erkennen könnt! Bei dieser Browserbreite seht ihr die größtmögliche Darstellung des FlexSlider-Fensters. Spätestens jetzt sollte euch auffallen, dass zumindest die ersten beiden Bilder recht unscharf dargestellt werden. Das liegt daran, dass die Bildbreite kleiner ist als die Breite des FlexSlider-Fensters. Das könnt ihr anhand der Grafik-Info sehen. Die zu kleinen Bilder werden auf die benötigte Größe aufgezogen, was kontraproduktiv ist, die größeren Bilder werden jedoch auf die passende Größe gestaucht, was zumindest vielen grafisch weniger bewanderten Anwendern eine nützliche Hilfe sein kann. Somit ist es nicht erforderlich, dass alle Bilder exakt die selbe Breite aufweisen müssen.
Als wichtigster Leitsatz gilt somit: Die Mindestbreite des kleinsten Bildes muss mindestens die größtmögliche Breite des FlexSlider-Fensters betragen. Allerdings leidet die Ladezeit natürlich enorm, falls man hier unnötig große Bilder einsetzt. Da heutige Allzweck-Digital-Cameras bereits 16 Mbit und mehr Bild-Auflösung leisten ist ein Einsatz in Originalgröße im Internet zu 99% unzweckmäßig. Lediglich Photographen, Grafiker, Architekten oder ähnliche Berufsgruppen nutzen stellenweiße die Möglichkeit, dem Betrachter das Bild in Originalgröße zu präsentieren. Auch aus SEO-Sicht ist man mit der größtmöglichen Auflösung nicht besser platziert, da auch die Google-Bildersuche nach „Suchoptionen – Bildgröße – Groß“ bereits ein Bild mit einer Auflösung von 1Mbit als „groß“ einstuft und darstellt.
Soviel erst einmal zu den Mindest-Anforderungen dieses Moduls. Für das Finetuning werden in Kürze einige weitere Tutorials erscheinen!
Ich hoffe, dass dieses Tutorial verständlich war und freue mich darauf euch beim nächsten Tutorial wieder begrüßen zu können.
Neueste Kommentare