Facebook
Facebook Massanger
Pinterest
Google Plus
RSS Icon

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.js

Einbinden 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.

Mosaik.css kopieren:

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 Code

Jetzt 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

Mit unserer speziellen Strategie mehr Kunden für Ihr Unternehmen!
Mehr Erfolg mit Ihrer Online-Präsenz im Internet. Jetzt Kontaktdaten eintragen..