Jquery Slider 'Slick'

Einer, der sich mal wirklich lohnt

Zu sehen auf der Startseite bei 'Slider Impressions' und 'Wir alle gegen Corona'.
Der oben genannte Slider, welcher nicht nur Bilder sondern auch Text oder andere Elemente responsive aufnimmt, ist gerade deshalb einer der Besten, insbesondere auch weil die Einstellungsmöglichkeiten vielfältig sind und er andere Jquery-Slider, welche viel einseitiger sind, überflüssig macht.

Hier finden Sie Demos bzw. Einstellungen des Anbieters:

Demo 1:

Demo 2:

Die Farbe der Pfeile

Falls man die Pfeile für die manuellen Klicks nach links und rechts einschaltet, so ist die Farbe der Pfeile natürlich sehr wichtig. Je nach Template haben wir diese Farben für die Pfeile deshalb schon angepasst bzw. möchten wir Ihnen nachstehend die Stelle zeigen, an welcher Sie die Farbe selbst bei Bedarf ändern können.

Sie finden diese Position in der CSS-Datei namens 'slick-theme.css', welche sich in diesem Template im Ordner 'js/plug-ins/slick-master/slick' befindet.

CSS
.slick-prev:before,
.slick-next:before {
font-family: 'slick';
font-size: 20px;
line-height: 1;
opacity: .75;
color: #D8D7D9; }

Die Abschnitte im Inhalt auf der Startseite

Mit Pseudo-Element 'nth-child(n)'

Auf der Seite (index.html) sehen Sie im Inhaltsbereich mehrere Abschnitte, die farbig getrennt sind. Wie wir diese angelegt haben und wie Sie auch mehr oder weniger Abschnitte anlegen können, erklären wir Ihnen nachstehend.

Der Pseudo-Selektor :nth-child(n) ist sehr hilfreich, wenn man gleiche Elemente innerhalb eines Elternelement verschieden aussehen lassen möchte. Insbesondere bei Wiederholungen ist dies effektiv.

Alle Möglichkeiten:

SELFHTML-Wiki beschreibt es informativ anhand eines Schachbrettmusters, aber noch viel übersichtlicher und mit sehr vielen Beispielen ausgestattet, erklärt es die Webseite h5c3 .

Die wichtigsten Möglichkeiten:

Wie an den vorstehend genannten Links zu sehen, gibt es mehrere 'nth-child-Selektoren'. Nachfolgend möchten wir aber Ihnen die wichtigsten beschreiben:

1.) Einfache 'nth-child-Selektoren':

1.a) Spricht jeden Abschnitt individuell an:

'nth-child(1)' spricht den ersten Abschnitt an.
'nth-child(2)' spricht den zweiten Abschnitt an.
'nth-child(3)' spricht den dritten Abschnitt an.
'nth-child(4)' spricht den vierten Abschnitt an usw.

1b) Spricht jeden zweiten Abschnitt an:

'nth-child(odd)' spricht jeden ungeraden Abschnitt an (also 1, 3 ,5, 7 usw).
'nth-child(even)' spricht jeden geraden Abschnitt an (also 2, 4, 6, 8 usw).


2.) Erweiterte 'nth-child-Selektoren':
Jetzt wird es noch variabler und effektiver. Hier im Beispiel die Anweisungen für jeden dritten anzusprechenden Abschnitt.

'nth-child(3n+1)' spricht den ersten Abschnitt an und ab diesen jeden dritten Abschnitt.
D.h. Abschnitt 1, Abschnitt 4, Abschnitt 7 usw. sind identisch.

'nth-child(3n+2)' ist für den zweiten Abschnitt zuständig und ab diesen wird jeder dritte Abschnitt angesprochen.
D.h. Abschnitt 2, Abschnitt 5, Abschnitt 8 usw. sind identisch.

'nth-child(3n+3)' spricht den dritten Abschnitt an und ab diesen jeden dritten Abschnitt.
D.h. Abschnitt 3, Abschnitt 6, Abschnitt 9 usw. sind identisch.

'nth-child(3n+4)' spricht den vierten Abschnitt an und ab diesen jeden dritten Abschnitt.
D.h. Abschnitt 4, Abschnitt 7, Abschnitt 10 usw. sind identisch.

Wie funktioniert es in diesem Template ? (CSS)

Wir haben den 'nth-child-Selektor' für die Abschnitte in der Datei format.css angelegt. Und zwar haben wir den 'nth-child-Selektor' auf unsere CSS-Klasse namens 'section-inhalt' gesetzt und hierbei 'nth-child(odd/even)' verwendet.

CSS
<!-- Allgemeines Beispiel-->
.section-inhalt:nth-child(odd) {
background:white;
color:#000;
}
.section-inhalt:nth-child(even) {
background:black;
color:#fff;
}

Da dies schon recht praktisch ist, aber noch nicht spannend genug, so haben wir in diesem Template noch eine Variante eingebaut, wie nachstehend (Ohne Quelltext-Beispiel):

'nth-child(4)' spricht nur den vierten Abschnitt an und überschreibt damit den entsprechenden 'even-Abschnitt'.

Noch ein abschließender allgemeiner Hinweis: In den Abschnitten legen wir mit 'nth-child' nicht alle Strukturen fest, was auch möglich wäre, sondern nur die wesentlichen. Da je nach Template der Inhalt in den Abschnitten also womöglich wesentlich konmplexer ist, z.b. die Gestaltung der Boxen, Icons, Weiter-Buttons o.ä. haben wir uns bezüglich dieser genannten Elemente dazu entschlossen, diese mit weiteren CSS-IDs zu gestalten, hier nur als Beispiel: '#information', #products' und #notiz'.

Der HTML-Code für die 'nth-child-Bereiche':

Der HTML-Bereich: So sieht ein Abschnitt in der HTML-Datei aus:

HTML
<div class="section-inhalt">
<div class="inhaltbox-a">
... Inhalt ...
</div>
</div>

So sehen zwei Abschnitte in der HTML-Datei aus:

HTML
<!-- ABSCHNITT -->
<div class="section-inhalt">
<div class="inhaltbox-a">
... Inhalt Abschnitt-1 ...
</div>
</div>
<!-- E N D E ABSCHNITT -->

<!-- ABSCHNITT -->
<div class="section-inhalt">
<div class="inhaltbox-a">
... Inhalt Abschnitt-2 ...
</div>
</div>
<!-- E N D E ABSCHNITT -->

Sehr praktisch und übersichtlich: Der Code für die Abschnitte ist also in der HTML-Datei immer der gleiche, egal wieviele Abschnitte. Um Abschnitte hinzuzufügen, kopiert man also den Quellcode für einen Abschnitt und füllt den Abschnitt dann mit Inhalt.

Smooth-Scroll-Effekt

Beispiel-Link für Smooth-Scroll (sanftes Scrollen) hier, scrollt animiert nach unten zum Fuss der Seite.

Sie können überall in den einzelnen HTML-Seiten so einen Smooth-Scroll-Link setzen, egal ob dieser nach oben oder nach unten scrollt und egal zu welchem Abschnitt, es kann also jede beliebige Position innerhalb der Seite angesprochen werden. Der entsprechende Link muß nur auf eine beliebige CSS-ID verweisen.

Hier im Beispiel ist es die id="pagebottom", welche wir auf dieser HTML-Seite vergeben haben. Es ist also im Prinzip der gute alte HTML-Anker, welcher hier durch das eingebaute Jquery (Javascript), welches die Animation vollzieht, sehr aufgewertet wird und so zu Recht immens beliebt ist.

Noch ein Beispiel: Klicken Sie diesen Link für Smooth-Scroll. Um hier im Beispiel nach oben an den Seitenanfang zu springen haben wir eine CSS-ID namens id="pagetop" vergeben.

Etwas Beispieltext. Comprehensam his, sit at autem labitur offendit, mutat diceret expetendis eu sed. No enim autem eum, tamquam partiendo inciderint no est. Inciderint intellegebat ut sea, eu usu brute omittam. Pro ut harum possit epicurei? Eu pericula adolescens sea. Democritum definitiones concludaturque in pro, an has verear volutpat.

Augue sententiae eu his. Usu inermis mentitum persecuti an, ius autem falli urbanitas te? Quo nisl contentiones ei, possit fastidii adolescens id sed! Quo eu latine adipiscing, cibo tota quodsi ius cu. Labitur perpetua voluptaria et sea. Legimus suavitate mel ea! Eos ea liber audiam percipitur. Vide molestiae has at. Pro doctus delectus oporteat eu, no vel oporteat apeirian, dolorum recteque facilisis mel at. Ei tamquam dignissim mea, nec sanctus accusam singulis id?

Id graeco animal apeirian pri? Ad duo habeo quidam, duo ex meliore nusquam assueverit, meis antiopam pro cu. Quando albucius eos ex. Elitr copiosae periculis ea mei, his justo iudicabit molestiae eu.

Lightbox

Lightbox Picture Gallery

Nachstehend unsere Bilder-Gallerie. So funktioniert diese Foto-Schau: Nach Klick auf ein Foto öffnet sich ein neues Fenster mit dem Foto sowie einer Bildunterschrift und einer Anzeige (Bild X von Anzahl X), gleichzeitig dunkelt sich die komplette Webseite im Hintergrund ab. Es ist ein Jquery-Script.

Tolles Feature: Nachdem Sie ein Bild geklickt haben, fahren Sie mit der Maus über die rechte oder linke Fotohälfte des Bildes. Es erscheint dann ein Pfeil, welcher Sie durch Klick auf dieses immer weiter zum nächsten bzw. vorangehendem Foto führt. In diesem Fenster lässt sich also eine ganze Bildkollektion durchsehen. Zum Schließen des Fenster klickt man auf das 'Schließen-Symbol' oder irgendwo ausserhalb des Fensters.

Gallery Media

Lightbox auf allen Fotos

Sie könnten das Lightbox-Script auch auf alle anderen Fotos, welche mit dem 'img-Tag' (und nicht als 'Hintergrund-Image') eingebaut sind, anwenden. Die entsprechenden Änderungen dazu sind nur in der HTML-Datei zu tätigen, denn das Script ist ja bereits eingebaut. Hier ist der Basis-Code als Beispiel:

Bild ohne Lightbox:

HTML
<img src="images/beispiel.jpg" width="900" height="500">

Bild mit Lightbox:

HTML
<a href="images/beispiel.jpg"
data-lightbox="gruppe1"
data-title="Ihre Bildunterschrift">
<img src="images/beispiel.jpg" width="900" height="500"></a>

Noch ein Hinweis: 'data-title' für eine Bildunterschrift ist optional und sollten Sie eine zweite Gallerie innerhalb der selben HTML-Datei aufmachen, so schreiben Sie bei der zweiten Gallerie dann bei 'data-lightbox' gruppe2 statt gruppe1.

Die Original-Lightbox

Hier einmal der Link zur originalen Lightbox-Gallery. Dort finden Sie bei Bedarf auch unter 'Options' noch verschiedene Möglichkeiten der Einstellung. Anhand der guten, weil einfachen Beispiele (Examples), erkennen Sie sehr schnell das Prinzip der Gallerie. Außerdem können Sie somit auch besser nachvollziehen, wie wir die Fotos bei unserer Gallerie responsive angelegt haben, denn diese responsive Anordnung ist ja nicht automatisch im genannten Script der Lightbox enthalten.

Bilder & Icons

Bilder

Die Fotos in dieser Vorlage sind vom Foto-Anbieter Picjumbo. Wir haben diese innerhalb unseres Grid-Systems responsive angelegt. Gerne können Sie natürlich auch Ihre eigenen Fotos verwenden.

Wir verwenden Icon-Fonts

Font-Icons sind sozusagen grafisch wirkende Schriftzeichen, die aber wie normaler Text behandelt werden (denn es sind ja Textzeichen) und damit eine schnellere und leichtere Formatierung gegenüber grafischen Icons per Bildformat (z.b. gif, jpg oder png) ermöglichen. Wir haben eine der beliebtesten Icon-Schriften in dieser Vorlage bereits anbei. Sie heißt "Fontawesome".

Font Awesome

Viele weitere Icons sind möglich, denn die sehr verbreitete Icon-Schrift vom Anbieter "Fontawesome" ist ja bereits in dieser Vorlage installiert. So fügen Sie ggfls. weitere Icons hinzu oder ersetzen die vorhandenen.

Die Dateien der Icon-Schrift sind also bereits diesem Template beigefügt mit dem großen Vorteil, das die Icons somit auch geladen und angezeigt werden, wenn keine Internet-Verbindung besteht.

Die Icon-Schrift kann aber statt dessen auch noch einfacher durch einen entsprechenden Link im Kopfbereich der Seite aufgerufen werden, die Schrift wird dann serverseitig geladen, sehen Sie hierzu die Erklärungen auf der Seite des Anbieters. Dies mag für manche der leichtere Weg sein, falls man ein Versions-Update aktualisieren möchte. Aber wie gesagt: Besteht keine Internet-Verbindung, so wird in diesem Fall auch kein Icon angezeigt.

Wir haben die Icons schon für Sie angepasst. Denn ohne weitere Bearbeitung sind die Font-Icons immer genauso groß und erscheinen in gleicher Farbe wie die aktuell verwendete Schrift für den Text.

Als Beispiel: