Marketing | Webdesign | SEO:
So erstellst du eine Mosaik Bildergalerie mit JQuery
Voraussetzung: Kenntnisse in HTMl und CSS! Schwierigkeit 2 von 10
JQuery ist einer der besten Frameworks die ich kenne. Es ist sehr einfach und schnell zu lernen. Zudem gibt es viele Webseiten, bei denen man gute Beispiele für sein Webdesign findet. Weiter unten werd ich euch ein paar Webseiten vorstellen.
Wie funktioniert Bildergalerie von jQuery
Ich will es hier mal einfach formulieren. jQuery liest die Größen der einzelnen Bilder aus und rechnet diese für ein Mosaik herunter. Ziemlich simple hat aber einen tollen Effekt.
Hier kannst du dir ein Beispiel der Mosaik Bildergalerie anschauen.Beginnen wir mit Schritt 1 der Einbindung in unser HTML Dokument
Zuerst einmal musst du die jQuery Datei einbinden, machst du das nicht, funktioniert es logischerweise auch nicht. So kannst du die jQuery 2.1.4-min.js, in deinen HTML Code, einbinden.
jQuery einbinden:Wo du die jQuery platzieren musst, siehst du in der Textara 'HTML Aufbau'.
Einbinden der Mosaik jQuery.jsDie Mosaik jQuery.js bindest du ein, um die Bilder herunter zu rechnen. Diese kannst du unter:
Einbinden der Mosaik Galerie.jsEinbinden der Mosaik.css
Hier ist es am besten, wenn du den Code direkt in deine CSS Datei kopierst, da dieser sehr kurz ist. Einfach kopieren und in deine CSS einfügen.
Wir haben jetzt folgende Datein eingefügt
- jQuery
- mosaik-galierie.js
- mosaik.css
Somit hätten wir alle Elemente die du brauchst.
Beginnen wir mit dem Aufbau deines HTML Dokuments
Erstelle jetzt eine neue HTML Datei, Kopieren den Code in der Textarea und füge diesen in dein erstelltes HTML Dokument ein.
HTML Aufbau- Kompletter HTML CodeJetzt musst du nur noch unter -> DIV Photo -> img src ="Hier kommen deine Fotos rein(z.B. bilder/bild1.jpg)" deine Fotos einfügen und schon ist die jQuery Mosaik Bildergalerie fertig.
Weitere Einstellungen der Mosaik Bildergalerie:
Bei diesem jQuery Framework hat man noch verschiedene Einstellmöglickeiten.
- Ma kann zum Beispiel den Abstand zwischen den Bildern erhöhen.
Oder man ändert das Ansichtsmodus 'mode'
- mode:'object',
- mode:'bootstrap',
- mode:'bootstrapv4',
- mode:'flickr',
- mode:'small',
Wenn du weitere Fragen hast, trage dich einfach unten in das Kontaktformular ein und ich beantworte dir deine Fragen per Email oder du schreibst mir einfach auf Facebook. Du kannst natürlich auch einen Daumen hoch da lassen :) Damit du mich auf Facebook findest, scroll einfach ganz nach unten und klicke auf das weiße F in dem blauen viereckigen Kasten :)
Vielen lieben Dank
Dein Damoda Team - Webdesign | SEO | Marketing