CSS Sliding Gallery - Website X5 Hilfe - Die Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
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 CSS-Datei gesteuert.

Für die Einbindung sind immer 2 Varianten erläutert, wobei die 1. Variante einfacher zu handhaben wäre.
Die Anpassungen der Verlinkungen  erfolgen in der Datei "index.html" bzw. im HTML-Objekt, der Style der gesamten Galerie in der jeweiligen Datei "gallery_style.css".
Entsprechende 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 jeweils 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.
Sliding Gallery horizontal
Download Button
x runter geladen!
Code für den <HEAD> Bereich
<link rel="stylesheet" type="text/css" href="wsX5Obj/Obj53_1/gallery_style.css" />
Code für den <BODY> Bereich
<?php include "wsX5Obj/Obj53_1/index.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 "gallery_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; }
Sliding Gallery vertical
Download Button
x runter geladen!
Code für den <HEAD> Bereich
<link rel="stylesheet" type="text/css" href="wsX5Obj/Obj53_2/gallery_style.css" />
Code für den <BODY> Bereich
<?php include "wsX5Obj/Obj53_2/index.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 "gallery_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; }
Feedbacks zu ""


Kein Kommentar
Vielen Dank für Dein Feedback.
HTML5
Button Spenden

© 2009 - 2019





Besucher Statistik
» 1 Online
» 196 Heute
» 828 Gestern
» 3113 Woche
» 10563 Monat
» 50239 Jahr
» 377995 Gesamt
Record: 2382 (29.03.2019)
Gesamt Downloads:
Zurück zum Seiteninhalt