GrayScale Gallery - Website X5 Hilfe - Die Helpsite

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

GrayScale Gallery

Scripte > Bildergalerien
Graustufen - Mouseover - Farbgalerie
Mit der 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 Mausover 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
x runter geladen!
GrayScale Gallery
Code für den <HEAD> Bereich
<link rel="stylesheet" href="wsX5Obj/Obj186_0/style.css" type="text/css" media="all" />
<!-- Hinweis:
Wer jQuery ohnehin auf seiner Seite eingebunden hat, braucht die erste Zeile des folgenden Codes nicht mehr. -->
<script type="text/javascript" src="wsX5Obj/Obj186_0/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="wsX5Obj/Obj186_0/js/jquery.BlackAndWhite.min.js"></script>
<script type="text/javascript" src="wsX5Obj/Obj186_0/js/functions.js"></script>
Code für den <BODY> Bereich
<?php include "wsX5Obj/Obj186_0/index.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 "gallery_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 ""
Kein Kommentar
Vielen Dank für Dein Feedback.
Logo Host Europe
Button Spenden

© 2009 - 2019





Besucher Statistik
» 2 Online
» 39 Heute
» 317 Gestern
» 752 Woche
» 2460 Monat
» 131602 Jahr
» 459358 Gesamt
Record: 2382 (29.03.2019)
Gesamt Downloads:
Hosting by
Zurück zum Seiteninhalt