HpBk-TemplateWorld | Alles für dich.

Bildergalerie mit Lightbox

Bildergalerie mit Lightbox

Das Baukasten-Extra "Galerie" prahlt ja jetzt nicht wirklich vor Schönheit. Darum zeige ich dir, wie du ganz einfach eine Bildergalerie auf deiner Seite einfügen kannst, bei der sich auf Klick die Bilder vergrößern und sogar Vor- und Zurückpfeile angezeigt werden.

Der HTML-Code

Als erstes begibst du dich unter "Seiten" auf eine Seite, auf der die Bildergalerie später zu sehen sein soll. Im Editor klickst du oben links auf "Quellcode" und fügst folgenden Code ein:


<a data-lightbox="roadtrip" href="https://img.webme.com/pic/h/hpbk-templateworld/lightbox1.jpg"><img alt="" class="bildergalerie" src="https://img.webme.com/pic/h/hpbk-templateworld/vorschaubild1.jpg" /></a>

Dieser Code sorgt dafür, dass die Galerie um ein Bild erweitert wird. Der blaue Teil ist die URL-Adresse des Bildes, das angezeigt wird, nachdem man auf das Vorschaubild geklickt hat. Also das vergrößerte Bild.

Der rote Teil ist die URL-Adresse des Vorschaubildes. Dieses wird nicht automatisch erstellt, sondern muss von dir in der passenden Größe erstellt werden.

Die CSS-Codes

Als nächstes begibst du dich in die Designeinstellungen unter "Design" - "Designeinstellungen" - "Erweiterte Designeinstellungen". Dort fügst du im Feld "Text über dem Design" folgenden Code ein:
Außerdem muss folgender Code ebenfalls im Feld "Text über dem Design" eingefügt werden. Hast du ein CSS-Design? Dann füge den Code ohne die Style Tags in das Feld "CSS-Code ohne Style Tags" ein.
Der oben stehende Code sorgt dafür, wie unsere Bildergalerie aussieht. Die Vorschaubilder müssen also in einer Breite von 200 px angelegt werden. Die Höhe ist egal.

Und so sieht die Bildergalerie aus:


Weitere Tipps

Für diese Bildergalerie solltest du am besten nur querformatige Bilder einsetzen. Das oben gezeigte Beispiel zeigt die Bildergalerie für 6 Bilder. Natürlich kann die Anzahl beliebig erweitert werden.



Kommentare zu dieser Seite:
Kommentar von:14.04.2017 um 12:15 (UTC)
uds-photographics
uds-photographics
Offline

Hallo,

warum funktioniert auf einmal die Bildergalerie mit Lightbox nicht mehr ?

Bitte um Info !
Danke und Gruß

Kommentar von:26.02.2015 um 23:50 (UTC)
KatharinaJarzebowski
KatharinaJarzebowski
Offline




Kommentar zu dieser Seite hinzufügen:
Dein Name:
Deine E-Mail-Adresse:
Deine Homepage:
Deine Nachricht:

Du bist der 392804 Besucher.

Information

HpBk-TemplateWorld ist seit Januar 2011 die neue Design-Zentrale im Homepage-Baukasten. Mit über 100 Designs ist und soll HpBk-TemplateWorld auch mit eurer Hilfe noch weiter ausgebaut werden und somit zu einer zentralen Anlaufstelle für Designs, Templates und Tutorials im HpBk werden.

Partner werden

Möchtest du auch Partner von HpBk-TemplateWorld werden? Dann schreibe mich an. Gerne sehe ich mir deine Seite genauer an und werde dich dann zu den offiziellen Partnerseiten hinzufügen.