CSS Sliding Gallery - Website X5 Helpsite

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

CSS Sliding Gallery

Scripte > Bildergalerien
Slide-Photo-Alben horizontal und vertikal auf reiner CSS3-Basis
Eine ganz simple Fotogalerie in horizontaler und vertikaler Version. Dieses Script verwendet kein JavaScript und auch kein Flasch. Es wird ausschließlich über die jeweilige CSS-Datei gesteuert. Die Anpassungen der Verlinkungen erfolgen in der Datei "include.html" bzw. im HTML-Objekt selbst, der Style der Galerie zur Anpassung an die Homepage der jeweiligen Datei "style.css".
Es sind immer 2 Varianten zur Einbindung erläutert. Sollte diese Galerie auf mehreren Seiten eingesetzt werden, empfiehlt sich die Variante per <?php include "...."; ?> , um Textänderungen des Menüs nur in einer Datei durchführen zu müssen.
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 mit einem 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/Obj53_1/style.css" />
Code für den <BODY> Bereich
<?php include "wsX5Obj/Obj53_1/include.html"; ?>

alternative Einbindung:
<div>
<ul id="Obj53_1">
<li>
<a href="wsX5Obj/Obj53_1/img/img_1.jpg"><img src="wsX5Obj/Obj53_1/img/img_1.jpg" alt="Image 1" title="" /></a>
</li>
<li>
<a href="wsX5Obj/Obj53_1/img/img_2.jpg"><img src="wsX5Obj/Obj53_1/img/img_2.jpg" alt="Image 2" title="" /></a>
</li>
<li>
<a href="wsX5Obj/Obj53_1/img/img_3.jpg"><img src="wsX5Obj/Obj53_1/img/img_3.jpg" alt="Image 3" title="" /></a>
</li>
<li>
<a href="wsX5Obj/Obj53_1/img/img_4.jpg"><img src="wsX5Obj/Obj53_1/img/img_4.jpg" alt="Image 4" title="" /></a>
</li>
<li>
<a href="wsX5Obj/Obj53_1/img/img_5.jpg"><img src="wsX5Obj/Obj53_1/img/img_5.jpg" alt="Image 5" title="" /></a>
</li>
<li>
<a href="wsX5Obj/Obj53_1/img/img_6.jpg"><img src="wsX5Obj/Obj53_1/img/img_6.jpg" alt="Image 6" title="" /></a>
</li>
<li>
<a href="wsX5Obj/Obj53_1/img/img_7.jpg"><img src="wsX5Obj/Obj53_1/img/img_7.jpg" alt="Image 7" title="" /></a>
</li>
</ul>
</div>
Code Datei "style.css"
#Obj53_1 {
padding: 0;
margin: 0 auto 5em auto;
list-style-type: none;
overflow: hidden;
width: 320px;
height: 425px;
border: 1px solid #888;
background: #fff url(img/background.gif);
}
#Obj53_1 li { float: left; }
#Obj53_1 li a {
display: block;
height: 28px;
width: 320px;
float: left;
text-decoration: none;
border-bottom: 1px solid #fff;
cursor: default;
}
#Obj53_1 li a img { width: 320px; height: 28px; border: 0; }
#Obj53_1 li a:hover { background: #eee; height: 240px; }
#Obj53_1 li a:hover img { height: 240px; }
Download Button
x runter geladen
Code für den <HEAD> Bereich
<link rel="stylesheet" type="text/css" href="wsX5Obj/Obj53_2/style.css" />
Code für den <BODY> Bereich
<?php include "wsX5Obj/Obj53_2/include.html"; ?>

alternative Einbindung:
<div>
<ul id="Obj53_2">
<li>
<a href="wsX5Obj/Obj53_2/img/img_1.jpg"><img src="wsX5Obj/Obj53_2/img/img_1.jpg" alt="Image 1" title="" /></a>
</li>
<li>
<a href="wsX5Obj/Obj53_2/img/img_2.jpg"><img src="wsX5Obj/Obj53_2/img/img_2.jpg" alt="Image 2" title="" /></a>
</li>
<li>
<a href="wsX5Obj/Obj53_2/img/img_3.jpg"><img src="wsX5Obj/Obj53_2/img/img_3.jpg" alt="Image 3" title="" /></a>
</li>
<li>
<a href="wsX5Obj/Obj53_2/img/img_4.jpg"><img src="wsX5Obj/Obj53_2/img/img_4.jpg" alt="Image 4" title="" /></a>
</li>
<li>
<a href="wsX5Obj/Obj53_2/img/img_5.jpg"><img src="wsX5Obj/Obj53_2/img/img_5.jpg" alt="Image 5" title="" /></a>
</li>
<li>
<a href="wsX5Obj/Obj53_2/img/img_6.jpg"><img src="wsX5Obj/Obj53_2/img/img_6.jpg" alt="Image 6" title="" /></a>
</li>
<li>
<a href="wsX5Obj/Obj53_2/img/img_7.jpg"><img src="wsX5Obj/Obj53_2/img/img_7.jpg" alt="Image 7" title="" /></a>
</li>
</ul>
</div>
Code Datei "style.css"
#Obj53_2 {
padding: 0;
margin: 0 auto 5em auto;
list-style-type: none;
overflow: hidden;
width: 320px;
height: 425px;
border: 1px solid #888;
background: #fff url(img/background.gif);
}
#Obj53_2 li { float: left; }
#Obj53_2 li a {
display: block;
height: 30px;
width: 320px;
float: left;
text-decoration: none;
border-bottom: 1px solid #fff;
cursor: default;
}
#Obj53_2 li a img { width: 320px; height: 30px; border: 0; }
#Obj53_2 li a:hover { background: #eee; height: 240px; }
#Obj53_2 li a:hover img { height: 240px; }

» nach oben «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt