JARVIS
Ich habe für eine Joomla (3.4.1) Webseite einen Block für Kundenmeinungen integriert. Nachfolgend beschreibe ich den „schnellen“ / „hardcoded“ Weg direkt in der index.php des Templates. Das Basistemplate bildete das bei der Installation von Joomla enthaltene protostar mit Bootstrap und jQuery.
templates/meinTemplate/index.php
<div class="row-fluid"> <div class="span12 myCarouselBlock"> <h2>das sagen unsere Gäste</h2> <hr> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indikatoren Kreise--> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> </ol> <!-- die Slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <h4>Titel 1</h2> <blockquote><p><i> "Hier steht der Text für das ersten Carousel." </i> <br><small>von Max Mustermann (Juni 2015)</small> </p></blockquote> </div> <div class="item"> <h4>Titel 2</h2> <blockquote><p><i> "Hier steht der Text für das zweite Carousel." </i> <br><small>Maxi Musterfrau(Juli 2015)</small> </p></blockquote> </div> ....... </div> </div> </div> </div>
Da es in Joomla 3.x und Bootstrap mit jQuery ein Problem mit Mootools gibt, und das zweite Caroussel einfach verschwindet, wegen zustäzlichen Div’s in Joomla…, kann man es wie folgt über eine feste Höhe lösen. Es gibt aber auch Plugins die Mootools Core-seitig deaktivieren und das Problem somit umgehen. Für mich ist dieser Weg ok.
/templates/meinTemplate/css/template.css
#myCarousel {
margin: 0px !important;
}
.myCarouselBlock >div{
height: 180px !important;
}
Das nächste Problem das ich hatte, war dass das Carousel nicht von alleine startete. Einmal auf eine zweite Seite geklickt, lief es dann, es sollte jedoch von alleine laufen. Normalerweise passiert dies über den obigen Code:
data-ride=“carousel“
Der machte es aber nicht. Daher habe ich es wie auf GetBootstrap beschrieben mittels JavaScript angeschoben. In die /templates/meinTemplate/index.php kommt dann folgende Zeile:
$doc->addScript($this->baseurl . ‚/templates/‘ . $this->template . ‚/js/carousel.js‘);
in die Datei carousel.js habe ich folgendes geschrieben:
jQuery(function() {
jQuery('.carousel').carousel({
interval: 4000});
}
);
Damit wird beim laden der Webseite das Carousel gestartet und durchläuft im 4000ms Takt die einzelnen Kommentare der Gäste im Carousel 😉
Bootstrap 2.3.2 Carousel Doc: http://getbootstrap.com/2.3.2/javascript.html#carousel
Interessiert in verschiedenste IT Themen, schreibe ich in diesem Blog über Software, Hardware, Smart Home, Games und vieles mehr. Ich berichte z.B. über die Installation und Konfiguration von Software als auch von Problemen mit dieser. News sind ebenso spannend, sodass ich auch über Updates, Releases und Neuigkeiten aus der IT berichte. Letztendlich nutze ich Taste-of-IT als eigene Dokumentation und Anlaufstelle bei wiederkehrenden Themen. Ich hoffe ich kann dich ebenso informieren und bei Problemen eine schnelle Lösung anbieten. Wer meinen Aufwand unterstützen möchte, kann gerne eine Tasse oder Pod Kaffe per PayPal spenden – vielen Dank.