Tutorial Lite Accordion Master Skript mit automatischer Slideshow

Hier geht es zur Demo und zum Download der Skripte: http://nicolahibbert.com/demo/liteAccordion/

Diese Multi-Layout-Region basiert auf jQuery Skripten und ist nur für fortgeschrittene User geeignet.

Bitte fügt zunächst die Verlinkungen auf diese Skripte in die HTML Eures Layouts ein. Ich habe die CSS Datei in ein Verzeichnis css und die beiden
JS Dateien des Skriptes hier in ein Verzeichnis js kopiert, die ich dann in den Ordner “html”, ebenso wie ein Verzeichnis img-demo für meine Bilder, in meiner lokalen Publizierung und auf den Server kopiert habe, da ich die Verlinkungen so wie unten zu erkennen gesetzt habe - also ins gleiche Verzeichnis.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags” einfügen

<!-- liteAccordion css -->
<link href="css/liteaccordion.css" rel="stylesheet" />

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<!-- easing -->
<script src="js/jquery.easing.1.3.js"></script>

<!-- liteAccordion js -->
<script src="js/liteaccordion.jquery.js"></script>


<!--[if lt IE 9]>
    <script>
         document.createElement('figure');
         document.createElement('figcaption');
    </script>
<![endif]-->

Der Aufruf des Skipts muss am Ende des Body stehen.

Ich habe die ID hier myaccordion genannt und folgende Optionen verwendet:

• autoPlay : true  = Die Animation beginnt automatisch
• pauseOnHover : true  = Bei Mausüber stoppt die Animation
• rounded : true  = Die Außenkanten werden abgerundet, im IE erst ab Version 9
• theme : ‘stitch’  = Verwendung vom farbigen Thema “stitch” - man kann z.B. auch ein “helles”, “dunkles” oder “einfaches” Thema wählen
• enumerateSlides : true  = Beschriftet die Slides zusätzlich mit Nummern

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Ende des Haupttextes” einfügen

<script>
   $('#myaccordion').liteAccordion({
      autoPlay : true,
      pauseOnHover : true,
      rounded : true,
      theme : 'stitch',
      enumerateSlides : true
   });
</script>

Für den Inhalt der Regionen zieht Ihr Euch ein Textfeld auf (Cursor blinkt) und fügt den Inhalt in den HTML-Code Editor des Textfeldes ein, der bei mir ungefähr so wie unten dargestellt aussieht.

Der Inhalt steht in einem DIV-Container, der sich auf die ID myaccordion, die ich oben im Skript gegründet habe, bezieht.

        <div id="myaccordion">
            <ol>
                <li>
                    <h2><span>Region 1</span></h2>
                    <div>
                        <figure>
                            <img src="img-demo/1.jpg" width="768" alt="image" title="Meer" />
                            <figcaption class="ap-caption">am Meer</figcaption>
                        </figure>
                    </div>
                </li>
                <li>
                    <h2><span>Region 2</span></h2>
                    <div>
                        <figure>
                            <img src="img-demo/2.jpg" width="768" alt="image" title="Wasserfall" />
                            <figcaption class="ap-caption">Wasserfall</figcaption>
                        </figure>
                    </div>
                </li>
                <li>
                    <h2><span>Region 3</span></h2>
                    <div>
                        <p><br><span style="color: #C0C0C0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            consequat.</span><br><br><span style="color: #FFFFFF;"><b>Hier kann man auch Verlinkungen einbauen, wie z.B.:</b></span> <a href="http://www.nof-schule.de/forum/"
                           target="_blank"><b>zu unserem Forum</b></a>
                      </p>
                       <figcaption class="ap-caption">Text</figcaption>                      
                    </div>
                </li>
                <li>
                    <h2><span>Region 4</span></h2>
                    <div>
                        <figure>
                            <img src="img-demo/4.jpg" width="768" alt="image" title="Palmen" />
                            <figcaption class="ap-caption">Palmen</figcaption>
                        </figure>
                    </div>
                </li>
                <li>
                    <h2><span>Region 5</span></h2>
                    <div>
                        <figure>
                            <img src="img-demo/5.jpg" width="768" alt="image" title="Sonnenuntergang" />
                            <figcaption class="ap-caption">Sonnenuntergang</figcaption>
                        </figure>
                    </div>
                </li>
            </ol>
            <noscript>
                <p>Javascript muss aktiviert sein.</p>
            </noscript>
       </div>

• Die einzelnen Regionen werden durch das <h2> Tag getrennt.
• Das Tag <figure> wird das angegeben Bild anzeigen
• Das Tag <figcaption> verweist mit seiner Class auf eine Beschriftung, die Ihr über die Region legen könnt

Es gibt noch sehr viel mehr Möglichkeiten diese Multilayout-Region zu gestalten, wie z.B. die Höhe und Breite vom Akkordion oder auch die Geschwindigkeit der Animation oder ob sich bei Mausüber die Regionen öffen sollen und vieles mehr.

Bitte lest dafür die Demo-Seiten von:

http://nicolahibbert.com/demo/liteAccordion/

Auf dieser Demo-Seite könnt Ihr die möglichen Einstellungen und Themen direkt testen, indem Ihr die Werte einfach ändert:

http://nicolahibbert.com/demo/liteAccordion/demo-suite.html

nach oben

Viel Erfolg!