GrayScale Gallery

Scripte > Bildergalerien

Graustufen - Mouseover - Farbgalerie

Mit dem Graustufen-Galerie-Skript kannst Du eine stilvolle Schwarzweiß-Bildergalerie in die Website einbetten.

Bilder werden automatisch von Vollbild in Schwarzweiß konvertiert. Das Original wird immer nur mit MouseOver angezeigt und mit einem Klick

auf das Bild öffnet sich ein neues Fenster mit dem Original Bild im Großformat. Die Galerie ist für eine unbegrenzte Anzahl von Bildern verwendbar und die Bildtitel können nach Wunsch benannt/umbenannt werden. Die Bilder befinden sich im Unterverzeichnis "img".

ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HEAD-Code in den HEAD-Bereich <head>...</head> und HTML-Code in den BODY-Bereich <body>...</body> der aufrufende Datei einfügen.

Eine demo.html ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.

Aufruf: "http://www.domain.tld/demo.html". Diese kann aber auch durch einen Doppelklick ausgeführt werden.

Bei Einbindung per <?php include...?> muss die ausführende Datei die Dateiendung .php aufweisen.

x runter geladen

Bezeichnung 1
Bezeichnung 2
Bezeichnung 3
Bezeichnung 4
Bezeichnung 5
Bezeichnung 6
Bezeichnung 7
Bezeichnung 8

Code für den <HEAD> Bereich

<!-- Hinweis:

Wer jQuery ohnehin auf seiner Seite eingebunden hat, braucht die erste Zeile des folgenden Codes nicht mehr. -->

Vor dem </HEAD> Tag

Code für den <BODY> Bereich

<?php include "wsX5Obj/Obj186_0/include.html"; ?>

alternative Einbindung:

<div class="Obj186_gallery">

<ul>

<li>

<a target="_blank" href="wsX5Obj/Obj186_0/img/car1.jpg"><img src="wsX5Obj/Obj186_0/img/car1.jpg"/></a>

<span>Bezeichnung 1</span>

</li>
<li>

<a target="_blank" href="wsX5Obj/Obj186_0/img/car2.jpg"><img src="wsX5Obj/Obj186_0/img/car2.jpg"/></a>

<span>Bezeichnung 2</span>

</li>
<li>

<a target="_blank" href="wsX5Obj/Obj186_0/img/car3.jpg"><img src="wsX5Obj/Obj186_0/img/car3.jpg"/></a>

<span>Bezeichnung 3</span>

</li>
<li>

<a target="_blank" href="wsX5Obj/Obj186_0/img/car4.jpg"><img src="wsX5Obj/Obj186_0/img/car4.jpg"/></a>

<span>Bezeichnung 4</span>

</li>
<li>

<a target="_blank" href="wsX5Obj/Obj186_0/img/car2.jpg"><img src="wsX5Obj/Obj186_0/img/car2.jpg"/></a>

<span>Bezeichnung 5</span>

</li>
<li>

<a target="_blank" href="wsX5Obj/Obj186_0/img/car1.jpg"><img src="wsX5Obj/Obj186_0/img/car1.jpg"/></a>

<span>Bezeichnung 6</span>

</li>
<li>

<a target="_blank" href="wsX5Obj/Obj186_0/img/car4.jpg"><img src="wsX5Obj/Obj186_0/img/car4.jpg"/></a>

<span>Bezeichnung 7</span>

</li>
<li>

<a target="_blank" href="wsX5Obj/Obj186_0/img/car3.jpg"><img src="wsX5Obj/Obj186_0/img/car3.jpg"/></a>

<span>Bezeichnung 8</span>

</li>

</ul>

</div>

</div>

Nach dem <BODY> Tag

Code Datei "style.css"

.Obj186_gallery li span { -webkit-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; }

.Obj186_gallery ul { overflow: hidden; list-style: none;}

.Obj186_gallery li { float: left; width: 25%; position: relative; overflow: hidden;}

.Obj186_gallery a { position: relative; display: block; }

.Obj186_gallery a img { display: block; width: 100%; height: auto;}

.Obj186_gallery li span {

color: #fff;
background-color: rgba(0,0,0,0.5);
padding: 5px 10px;
position: absolute;
bottom: -100%;
left: 0;
width: 100%;
z-index: 2;
}

.Obj186_gallery li:hover span { bottom: 0; }

@media (max-width: 991px) {

.Obj186_gallery li { width: 33.3333%; }
}

@media (max-width: 767px) {

.Obj186_gallery li { width: 50%; }
}

@media (max-width: 480px) {

.Obj186_gallery li { width: 100%; }
}

» nach oben «