GrayScale Gallery - Website X5 Helpsite

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

Keine Kommentare gefunden.

Bitte Dein Feedback

Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.

Login | Registrierung


            CAPTCHA
            Vielen Dank für Dein Feedback.
            Logo Host Europe
            Button Spenden

            © 2009 - 2020




            
            Besucher Statistik
            » 5 Online
            » 7 Heute
            » 1 Gestern
            » 1911 Woche
            » 3168 Monat
            » 32427 Jahr
            » 256633 Gesamt
            Record: 1144 (01.02.2020)
            Gesamt Downloads:
            Hosting by
            Zurück zum Seiteninhalt