GrayScale Gallery

Logo Schriftzug
Logo WSX5
Newsletter anmelden
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.
Achtung: Bei Einbindung per <?php include...?> muss die ausführende Datei die Dateiendung .php aufweisen.
Download Button
Downloads:
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%; }
}
Feedbacks zu ""
1 Kommentar
Durchschnittliche Bewertung: 115.0/5
Marcus Briese
2019-11-28 12:00:22
Cool, was es nicht so alles gibt. Und schöne Webseite überhaupt, da verstehe ich als Laie ja so einiges.
Vielen Dank für Dein Feedback.
Logo Host Europe
Button Spenden

© 2009 - 2020





Besucher Statistik
» 4 Online
» 70 Heute
» 180 Gestern
» 553 Woche
» 21816 Monat
» 32921 Jahr
» 503589 Gesamt
Record: 1679 (15.02.2020)
Gesamt Downloads:
Hosting by
Zurück zum Seiteninhalt