Galerie Tutorial
Nachdem im Forum die Frage nach einer weiteren Möglichkeit für eine Bildergalerie aufgetaucht ist, habe ich hier ein kleines Tutorial, wie ich denn meine Galerie aufgebaut habe.
Nicht unbedingt für Anfänger geeignet, aber Jeder hat mal klein angefangen.
Der Einfachheithalber habe ich mir jetzt nur sechs Bilder aus meiner Galerie gefischt, denn das Prinzip lässt sich ganz einfach erweitern.
So sieht meine Galerie aus:
Hier erstmal der Quellcode zu dieser Bildergalerie, wie ich sie eingebunden habe.
<link type="text/css" href="https://7dj.de/hpbk/jquery.fancybox.css" rel="stylesheet" />
<script type="text/javascript" src="https://7dj.de/hpbk/jquery.js"></script>
<script type="text/javascript" src="https://7dj.de/hpbk/jquery.fancybox.js"></script>
<script type="text/javascript">
// Remove padding, set opening and closing animations, close if clicked and disable overlay
$(".fancybox-effects-d").fancybox({
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
});
</script>
<style type="text/css">
a.fancybox-effects-d {
background: none repeat scroll 0 0 #FFFFFF;
margin: 15px 26px;
padding: 15px;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.7);
}
</style>
<a class="fancybox-effects-d" href="https://img.webme.com/pic/s/seo-suchmaschinenoptimierung/bigimage001.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"> <img src="https://img.webme.com/pic/s/seo-suchmaschinenoptimierung/smallimage001.jpg" alt="" /> </a>
[... ...]
<a class="fancybox-effects-d" href="https://img.webme.com/pic/s/seo-suchmaschinenoptimierung/bigimage006.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"> <img src="https://img.webme.com/pic/s/seo-suchmaschinenoptimierung/smallimage006.jpg" alt="" /> </a> Für die Bildergalerie brauchst du:
Schritt 1. Deine Bilder, einmal in großer Auflösung und einmal als kleine Bilder, als sog. Thumbs. Ich habe mir noch zusätzlich die Mühe gemacht und habe die Originalbilder nicht nur verkleinert, sondern ich habe die Bilder, damit ich die Galerie so schön formatieren konnte, quadratisch zugeschnitten, in diesem Fall auf 150x150px und hier hochgeladen. Wenn die Bilder hochgeladen sind, dann gehst du auf "Eigene Bilder verwalten" und suchst dir die Links zu den Bildern für deine Galerie heraus. Mit der Maus auf das entsprechende Bild, Rechtsklick und "Grafikadresse kopieren". Da sich sicherlich keiner alle Linkadressen merken kann, ich übrigens auch nicht, nutze ich nebenher ein leeres .txt Dokument und kopiere mir dort alle entsprechenden Bildadressen dort rein. Denn schliesslich bruache ich die Bildadressen gleich noch.
Schritt 2. Neue Seite hinzufügen. Diese Seite nimmst du dann, um deine Galerie hier zu präsentieren. Wenn du die Seite angelegt hast, dann schaltest du im Editor links oben auf den "Quellcode". Ganz oben kopierst du folgende Zeilen rein:
<link type="text/css" href="https://7dj.de/hpbk/jquery.fancybox.css" rel="stylesheet" />
<script type="text/javascript" src="https://7dj.de/hpbk/jquery.js"></script>
<script type="text/javascript" src="https://7dj.de/hpbk/jquery.fancybox.js"></script>
Die CSS und Javascript-Dateien wurden leider zwischenzeitlich von meiner öffentlichen Quelle entfernt, darum habe ich sie aktuell woanders hingepackt. Wer sie bereits verwendet hatte, bitte entsprechend abändern.
Aber was machen diese Zeilen? Mit der ersten Zeile bekommt die Fancybox Gallery ihr Aussehen. Bei der "jquery.fancybox.css" handelt es sich um den Stylesheet, der auch für die Einbindung des Close Buttons, der Links und Rechts Pfeile und der Farbgebung zuständig ist. Die zweite Zeile bindet das .jquery Framework ein. Ein nützliches Instrument, auch für den erfahrenen Coder, da man hier keine komplett neuen Javascripte mehr "erfinden" muss, sondern einfach bereits fertige und bestehende "Bibliotheken" (Code Schnipsel) einbindet. In der dritten Zeile ist das Javascript, welches es ermöglicht, dass die Fancybox die Bilder "aufpoppen", "swingen" oder sonstige lustige Sachen machen lässt. Damit die eingebundenen styles und javascripts auch dauerhaft verfügbar sind, liegen diese bei Google und somit "relativ" absturzsicher.
<script type="text/javascript">
// Remove padding, set opening and closing animations, close if clicked and disable overlay
$(".fancybox-effects-d").fancybox({
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
});
</script>
Diese Zeilen müssen als Nächstes direkt unter die ersten Zeilen, auch weiterhin in Quellcode-Modus, reinkopiert werden. Was machen diese Zeilen denn jetzt genau? Mit diesem Javascript-Code "steuere" ich das Verhalten der Bildergalerie. Welche Einstellungsmöglichkeiten hier vorhanden sind, das möge doch bitte auf der fancyapps.com/fancybox/ nachgelesen werden. Ich habe mir die Beispieleinstellung genommen, da mir diese für meine Zwecke genügt. Wichtig ist hier nur .fancybox-effects-d, denn das ist die Klasse, die wir für die Bilder noch benötigen. Du kannst da auch .hinz-und-kunz, oder .hund-katze-maus reinschreiben, aber dann muss das später auch so in den folgenden Codeschnipseln stehen.
<style type="text/css">
a img a.fancybox-effects-d img{
background: none repeat scroll 0 0 #FFFFFF;
margin: 15px 26px;
padding: 15px;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.7);
}
</style>
Mit diesem CSS Code gebe ich den "Thumbs" noch ein nettes Aussehen mit. Der Code verpasst den Bildern einen weissen Rand (background: none repeat scroll 0 0 #FFFFFF;) von 15px (padding: 15px) und sorgt dafür, dass die Bilder in einem Abstand von links / rechts von 15px angeordnet werden und oben / unten einen Abstand von 26px (margin: 15px 26px;) haben. Die Werte können natürlich nach belieben geändert werden. Das box-shadow sorgt für den leichten Schatten um den weissen Rand der Bilder.
* edit: Hier hatte sich ein kleiner "Fehler" eingeschlichen. Es muss hier a.fancybox-effects-d img stehen, andernfalls kann es passieren, dass auch andere Bilder einen Rand und Schatten verpasst bekommen. Und wie zu sehen ist, braucht es hier auch wieder die .fancybox-effects-d Klasse, die schon in Schritt 2 zu tragen kommt.
Schritt 3. Jetzt bauen wir aber endlich die eigentliche Galerie und binden die Bilder ein. Auch hier bleiben wir im Quellcode.
<a class="fancybox-effects-d" href="https://img.webme.com/pic/s/seo-suchmaschinenoptimierung/bigimage001.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"> <img src="https://img.webme.com/pic/s/seo-suchmaschinenoptimierung/smallimage001.jpg" alt="" /> </a>
Mit dieser Zeile bekommst du das erste Bild in deine Galerie. Hier findet sich nun die Klasse fancybox-effects-d, die ich oben schon erwähnt habe. Wenn du oben einen anderen Namen gewählt hast, dann muss hier natürlich entsprechend der andere Name eingetragen werden. Anstelle von https://img.webme.com/pic/s/seo-suchmaschinenoptimierung/bigimage001.jpg muss die URL, die Linkadresse deines GROSSEN Bildes eingefügt werden. Und dieser Link https://img.webme.com/pic/s/seo-suchmaschinenoptimierung/smallimage001.jpg muss mit dem Link deines kleinen Bildes ausgetauscht werden. Damit dein Bild auch entsprechend eine Beschriftung unterhalb bekommt, kannst du den Text Lorem ipsum dolor sit amet, consectetur adipiscing elit ganz einfach gegen deinen eigenen Text austauschen und schon kann jeder deinen Kommentar zum Bild lesen.
Schritt 4. Wiederhole Schritt 3. solange, bis du alle Bilder, die du einbinden möchtest, in deiner Galerie eingetragen hast. Abschliessend speichern, Seite anschauen, testen, und dich darüber ärgern, dass du scheinbar irgendwo einen Fehler reingebracht hast, weil irgendwas nicht klappt und / oder die Galerie anders aussieht.
Wie oben schon mal erwähnt, die Fancybox ist nicht unbedingt für Anfänger geeignet. Ferner habe ich die Galerie an meine Seite und Bedürfnisse angepasst. Meine Galerie kann unter Umständen auf deiner Seite einfach doof aussehen, aber das ist eine Ausprobiersache. Und wenn man sich mit der Fancybox ein wenig beschäftigt (und auch mal die entsprechende Seite durchliest), ein wenig rumtestet, dann kann man mit dieser Fancybox eine echt schöne Galerie in seine Seite einbauen. Und nicht nur eine Einzelne.
Solltest du beim Einbau der Box nicht weiterkommen, dann kannst du mir gerne eine kurze PN schicken.
SPAR DIR ( UND MIR ) ABER FOLGENDE ANFRAGEN:
- Kannst du mir das machen?
- Geht nicht, klappt nicht
- Kann ich nicht
- Weiss nicht, wie das geht
Ich biete nur Hilfe zur Selbsthilfe, du musst dich schon auch selbst bemühen. Erst wenn du alles ausprobiert hast und nicht mehr weiterkommst, dann werde ich dir helfen.