HpBk-TemplateWorld

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> 

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

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

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

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

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

<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:

<script src="https://dl.dropboxusercontent.com/u/82955745/Lightbox/jquery-1.11.0.min.js"></script> 
<script src="https://dl.dropboxusercontent.com/u/82955745/Lightbox/lightbox.min.js"></script>

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.

<style type="text/css"> <!--
.bildergalerie {
  width:200px;
  float: left;
  margin: 5px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  opacity: .6;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* IE8 */
  filter: alpha(opacity=60); } /*IE7 und kleiner*/

.bildergalerie:hover {
  width:200px;
  float: left;
  margin: 5px;
  opacity: 1.0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100); }
 }

body:after {
  content: url(https://dl.dropboxusercontent.com/u/82955745/Lightbox/close.png) url(https://dl.dropboxusercontent.com/u/82955745/Lightbox/loading.gif) url(https://dl.dropboxusercontent.com/u/82955745/Lightbox/prev.png) url(https://dl.dropboxusercontent.com/u/82955745/Lightbox/next.png);
  display: none;
}

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 9999;
  text-align: center;
  line-height: 0;
  font-weight: normal;
}

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  background-color: white;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
}

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-container {
  padding: 4px;
}

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(https://dl.dropboxusercontent.com/u/82955745/Lightbox/loading.gif) no-repeat;
}

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url(https://dl.dropboxusercontent.com/u/82955745/Lightbox/prev.png) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url(https://dl.dropboxusercontent.com/u/82955745/Lightbox/next.png) right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
}

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 0 4px;
  color: #ccc;
}

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}

.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(https://dl.dropboxusercontent.com/u/82955745/Lightbox/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
--> </style>

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)
(gesperrter Nutzer)	Hallo, warum funktioniert auf einmal die Bildergalerie mit Lightbox nicht mehr ? Bitte um Info ! Danke und Gruß