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:

<script language="javascript" type="text/javascript" src="https://www.damoda.de/downloads/jsintegrate/jquery-2.1.4.min.js"></script>

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

<script language="javascript" type="text/javascript" src="https://www.damoda.de/downloads/jsintegrate/mosaik-galerie.js"></script>

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:

.photo {
	position: relative;
}
.title{
	position: absolute;
	bottom:20px;
	left:0px;
	text-align: center;
	right:0px;
	font-size:24px;
	font-weight: bold;
	color:#979797;
}
.photos {
	margin:auto;
	font-size:0px;
}

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

<!DOCTYPE html>
<html lang="de">
<head>
<title>Mosaik Galerie von Damoda</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="dateiname.css" />
<!--CSS Als Beispiel und kann nach einbinden der CSS gelöscht werden-->
<style>
.photo{position:relative}.title{position:absolute;bottom:20px;left:0;text-align:center;right:0;font-size:24px;font-weight:700;color:#979797}.photos{margin:auto;font-size:0}</style>
</head>
<body>
<div class="photos">
	<div class="photo">
		<img src="http://www.damoda.de/img/downloads/jquery-bildergallerie/600x600.jpg">
		<div class="title">1</div>
	</div>
	<div class="photo">
		<img src="http://www.damoda.de/img/downloads/jquery-bildergallerie/600x400.jpg">
		<div class="title">2</div>
	</div>
	<div class="photo">
		<img src="http://www.damoda.de/img/downloads/jquery-bildergallerie/600x600.jpg">
		<div class="title">3</div>
	</div>
	<div class="photo">
		<img src="http://www.damoda.de/img/downloads/jquery-bildergallerie/600x400.jpg">
		<div class="title">4</div>
	</div>
	<div class="photo">
		<img src="http://www.damoda.de/img/downloads/jquery-bildergallerie/600x600.jpg">
		<div class="title">5</div>
	</div>
	<div class="photo">
		<img src="http://www.damoda.de/img/downloads/jquery-bildergallerie/600x320.jpg">
		<div class="title">6</div>
	</div>
	<div class="photo">
		<img src="http://www.damoda.de/img/downloads/jquery-bildergallerie/600x600.jpg">
		<div class="title">7</div>
	</div>
	<div class="photo">
		<img src="http://www.damoda.de/img/downloads/jquery-bildergallerie//600x400.jpg">
		<div class="title">8</div>
	</div>
	<div class="photo">
		<img src="http://www.damoda.de/img/downloads/jquery-bildergallerie/600x600.jpg">
		<div class="title">9</div>
	</div>
	<div class="photo">
		<img src="http://www.damoda.de/img/downloads/jquery-bildergallerie/900x600.jpg">
		<div class="title">10</div>
	</div>
	<div class="photo">
		<img src="http://www.damoda.de/img/downloads/jquery-bildergallerie/600x400.jpg">
		<div class="title">11</div>
	</div>
	<div class="photo">
		<img src="http://www.damoda.de/img/downloads/jquery-bildergallerie/600x600.jpg">
		<div class="title">12</div>
	</div>
	<div class="photo">
		<img src="http://www.damoda.de/img/downloads/jquery-bildergallerie/600x400.jpg">
		<div class="title">13</div>
	</div>
	<div class="photo">
		<img src="http://www.damoda.de/img/downloads/jquery-bildergallerie/600x600.jpg">
		<div class="title">14</div>
	</div>
	<div class="photo">
		<img src="http://www.damoda.de/img/downloads/jquery-bildergallerie/600x400.jpg">
		<div class="title">15</div>
	</div> 
	<div class="photo">
		<img src="http://www.damoda.de/img/downloads/jquery-bildergallerie/600x400.jpg">
		<div class="title">16</div>
	</div>
	<div class="photo">
		<img src="http://www.damoda.de/img/downloads/jquery-bildergallerie/600x900.jpg">
		<div class="title">17</div>
	</div>
	<div class="photo">
		<img src="http://www.damoda.de/img/downloads/jquery-bildergallerie/900x600.jpg">
		<div class="title">18</div>
	</div>
	<div class="photo">
		<img src="http://www.damoda.de/img/downloads/jquery-bildergallerie/600x400.jpg">
		<div class="title">19</div>
	</div>
	<div class="photo">
		<img src="http://www.damoda.de/img/downloads/jquery-bildergallerie/600x280.jpg">
		<div class="title">20</div>
	</div>
	<div class="photo">
		<img src="http://www.damoda.de/img/downloads/jquery-bildergallerie/600x400.jpg">
		<div class="title">21</div>
	</div>
	<div class="photo">
		<img src="http://www.damoda.de/img/downloads/jquery-bildergallerie/600x600.jpg">
		<div class="title">22</div>
	</div>
	<div class="photo">
		<img src="http://www.damoda.de/img/downloads/jquery-bildergallerie/600x400.jpg">
		<div class="title">23</div>
	</div> 
	<div class="photo">
		<img src="http://www.damoda.de/img/downloads/jquery-bildergallerie/600x400.jpg">
		<div class="title">24</div>
	</div>
	<div class="photo">
		<img src="http://www.damoda.de/img/downloads/jquery-bildergallerie/600x900.jpg">
		<div class="title">25</div>
	</div>
	<div class="photo">
		<img src="http://www.damoda.de/img/downloads/jquery-bildergallerie/900x600.jpg">
		<div class="title">26</div>
	</div>
	<div class="photo">
		<img src="http://www.damoda.de/img/downloads/jquery-bildergallerie/900x600.jpg">
		<div class="title">27</div>
	</div>
</div>
<!-- Scripts -->
<script language="javascript" type="text/javascript" src="https://www.damoda.de/downloads/jsintegrate/jquery-2.1.4.min.js"></script>
<script language="javascript" type="text/javascript" src="https://www.damoda.de/downloads/jsintegrate/mosaik-galerie.js"></script>
<script type="text/javascript">
	var gallery = $('.photos').gallerify({
		margin:5,
		mode:'flickr',
		lastRow:'fullwidth'
	});	
</script>
</body>
</html>

HTML Datei download (.zip Datei/952Bytes)

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.

<script type="text/javascript">
	var gallery = $('.photos').gallerify({
		---> margin:10, Margin erhöhen z.B. von 5 auf 10
		mode:'flickr',
		lastRow:'fullwidth'
	});	
</script>

Oder man ändert das Ansichtsmodus 'mode'

mode:'object',
mode:'bootstrap',
mode:'bootstrapv4',
mode:'flickr',
mode:'small',

<script type="text/javascript">
	var gallery = $('.photos').gallerify({
		margin:10,
		---> mode:'flickr', z.B flickr zu bootstrap
		lastRow:'fullwidth'
	});	
</script>

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