GrayScale Gallery - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Scan QR or Download Android App
Direkt zum Seiteninhalt

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.
Download Button
x runter geladen
Code für den <HEAD> Bereich
<link rel="stylesheet" href="wsX5Obj/Obj186_0/style.css"/>
<!-- Hinweis:
Wer jQuery ohnehin auf seiner Seite eingebunden hat, braucht die erste Zeile des folgenden Codes nicht mehr. -->
<script src="wsX5Obj/Obj186_0/js/jquery-1.11.1.min.js"></script>
<script src="wsX5Obj/Obj186_0/js/jquery.BlackAndWhite.min.js"></script>
<script src="wsX5Obj/Obj186_0/js/functions.js"></script>
Code für den <BODY> Bereich
<?php include "wsX5Obj/Obj186_0/include.html"; ?>

alternative Einbindung:
<div style="padding: 5px">
<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>
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 «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt