Statistiken

Benutzer
2
Beiträge
18
Anzahl Beitragshäufigkeit
36349

Wer ist online

Aktuell sind 20 Gäste und keine Mitglieder online

Eigene Inhalte Logo

Eigene Inhalte Info

Diese Web-Präsentation ist zu Testzwecken mit Joomla! 3.x, Bootstrap 2 und eigenem JavaScript installiert. Sie soll aufzeigen was mit Joomla! 3.x und Bootstrap 2 möglich ist, evtl. Fehler aufzeigen, und helfen dafür Lösungen zu finden. Es ist eine reine Demoseite und dient ausschließlich zur Veranschaulichung.

Das Carousel von Bootstrap in einen Beitrag oder Modul einbinden.

Im Beitrag kann folgendes eingetragen werden, um das Caousel in einem Beitrag, oder in einem Modul wie "Eigene Inhalte" einzufügen.

HTML

Im Beitrag kann folgendes eingetragen werden an HTML.

<div id="eyecatcherCarousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#eyecatcherCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#eyecatcherCarousel" data-slide-to="1" class=""></li>
        <li data-target="#eyecatcherCarousel" data-slide-to="2" class=""></li>
        <li data-target="#eyecatcherCarousel" data-slide-to="3" class=""></li>
        <li data-target="#eyecatcherCarousel" data-slide-to="4" class=""></li>
    </ol>
<div class="carousel-inner">
<div class="item active">
     <img src="/joom3bootstrap/images/carousel/carousel1.jpg" alt="">
   <div class="carousel-caption">
          <h4>Carusel 1 label</h4>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
     </div>
</div>
<div class="item">
     <img src="/joom3bootstrap/images/carousel/carousel2.jpg" alt="">
    <div class="carousel-caption">
         <h4>Carusel 2 label</h4>
         <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    </div>
</div>
<div class="item">
     <img src="/joom3bootstrap/images/carousel/carousel3.jpg" alt="">
     <div class="carousel-caption">
         <h4>Carusel 3 label</h4>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
     </div>
</div>
<div class="item">
     <img src="/joom3bootstrap/images/carousel/carousel4.jpg" alt="">
    <div class="carousel-caption">
         <h4>Carusel 4 label</h4>
         <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
     </div>
</div>
<div class="item">
     <img src="/joom3bootstrap/images/carousel/carousel5.jpg" alt="">
     <div class="carousel-caption">
          <h4>Carusel 5 label</h4>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    </div>
</div>
</div>
<a class="left carousel-control" href="#eyecatcherCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#eyecatcherCarousel" data-slide="next">›</a>
</div>

CSS

In die template.css kommt dann jener Style.

     .carousel .carousel-inner {
        border: 1px solid #e3e3e3;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        -webkit-box-shadow: 0 1px 2px 0 #bbb;
        -moz-box-shadow: 0 1px 2px 0 #bbb;
        box-shadow: 0 1px 2px 0 #bbb;
    }
        
    .carousel img {
        height: auto;
        width: 100%;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }
    
    .carousel-indicators {
        cursor: pointer;
    }

Javascript

Das Javascript darf natürlich nicht fehlen. Entweder in die index.php, oder besser in eine JS Erweiterungs-Datei die ausgelagert ist, und nach jQuery und Bootstrap geladen wird.

(function($){
$(document).ready(function(){
        $('.carousel').carousel({
            interval: 10000,
            pause:'hover'
        });
    });
})(jQuery);
Um evtl. einem jQuery-Bootstrap / Mootools Konflikt aus dem Wege zu gehen (falls welche auftauchen im Zusammenhang mit anderen Erweiterungen) kann ein kleines weiteres JS Abhilfe schaffen. Dafür verfolge einmal diesen Blog von GitHub .

Kommentare   

+2 #2 RSD 2013-09-02 08:52
Hey,
Ralle632 sei dank, der es nach längerer suche gefunden hat.
Dem Administrator melden
+1 #1 Mark 2013-09-02 08:41
Danke für den GitHub Link zu dem Blog mit der Konfliktlösung. Suchte schon seit Tagen nach einer Lösung, da mit jDownload und Kunena-Forum und mootools.more.j s das ganze nicht wirklich lief. Jetzt funktioniert es mit dem JS aus dem Blog von GitHub.
Dem Administrator melden

Kommentar schreiben

Bitte habt dafür Verständnis, dass erst nach Sichtung der Einträge eure Einträge freigestellt werden, und auch erst dann sichtbar für alle sind.


Sicherheitscode
Aktualisieren