CSS Multi Gallery - Website X5 Hilfe - Die Helpsite

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

CSS Multi Gallery

Scripte > Bildergalerien
Eine Multi-Photo-Galerie auf reiner CSS3-Basis
Eine noch ganz andere Idee für eine Fotopräsentation. Dieses Script verwendet kein JavaScript und auch kein Flasch. Es wird ausschließlich über die CSS-Datei gesteuert.
Für die Einbindung sind 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 Datei "gallery_style.css".

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!
Code für den <HEAD> Bereich
<link rel="stylesheet" type="text/css" media="screen,projection" href="wsX5Obj/Obj54_0/gallery_style.css" />
Code für den <BODY> Bereich
<?php include "wsX5Obj/Obj54_0/index.html"; ?>

alternative Einbindung:
<div class="Obj54" style align="center">
<ul class="topic">
<li><a class="set" href="#bruecken">Brücken<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="wsX5Obj/Obj54_0/img/bruecken_01.jpg"><img src="wsX5Obj/Obj54_0/img/bruecken_01k.jpg"
alt="" title="" /></a></li>
<li><a href="wsX5Obj/Obj54_0/img/bruecken_02.jpg"><img src="wsX5Obj/Obj54_0/img/bruecken_02k.jpg"
alt="" title="" /></a></li>
<li><a href="wsX5Obj/Obj54_0/img/bruecken_03.jpg"><img src="wsX5Obj/Obj54_0/img/bruecken_03k.jpg"
alt="" title="" /></a></li>
<li><a href="wsX5Obj/Obj54_0/img/bruecken_04.jpg"><img src="wsX5Obj/Obj54_0/img/bruecken_04k.jpg"
alt="" title="" /></a></li>
<li><a href="wsX5Obj/Obj54_0/img/bruecken_05.jpg"><img src="wsX5Obj/Obj54_0/img/bruecken_05k.jpg"
alt="" title="" /></a></li>
<li><a href="wsX5Obj/Obj54_0/img/bruecken_06.jpg"><img src="wsX5Obj/Obj54_0/img/bruecken_06k.jpg"
alt="" title="" /></a></li>
<li><a href="wsX5Obj/Obj54_0/img/bruecken_07.jpg"><img src="wsX5Obj/Obj54_0/img/bruecken_07k.jpg"
alt="" title="" /></a></li>
<li><a href="wsX5Obj/Obj54_0/img/bruecken_08.jpg"><img src="wsX5Obj/Obj54_0/img/bruecken_08k.jpg"
alt="" title="" /></a></li>
<li><a href="wsX5Obj/Obj54_0/img/bruecken_09.jpg"><img src="wsX5Obj/Obj54_0/img/bruecken_09k.jpg"
alt="" title="" /></a></li>
<li><a href="wsX5Obj/Obj54_0/img/bruecken_10.jpg"><img src="wsX5Obj/Obj54_0/img/bruecken_10k.jpg"
alt="" title="" /></a></li>
<li><a href="wsX5Obj/Obj54_0/img/bruecken_11.jpg"><img src="wsX5Obj/Obj54_0/img/bruecken_11k.jpg"
alt="" title="" /></a></li>
<li><a href="wsX5Obj/Obj54_0/img/bruecken_12.jpg"><img src="wsX5Obj/Obj54_0/img/bruecken_12k.jpg"
alt="" title="" /></a></li>
<li><a href="wsX5Obj/Obj54_0/img/bruecken_13.jpg"><img src="wsX5Obj/Obj54_0/img/bruecken_13k.jpg"
alt="" title="" /></a></li>
<li><a href="wsX5Obj/Obj54_0/img/bruecken_14.jpg"><img src="wsX5Obj/Obj54_0/img/bruecken_14k.jpg"
alt="" title="" /></a></li>
<li><a href="wsX5Obj/Obj54_0/img/bruecken_15.jpg"><img src="wsX5Obj/Obj54_0/img/bruecken_15k.jpg"
alt="" title="" /></a></li>
<li><a href="wsX5Obj/Obj54_0/img/bruecken_16.jpg"><img src="wsX5Obj/Obj54_0/img/bruecken_16k.jpg"
alt="" title="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="active"><a class="set" href="#tiere">Tiere<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="wsX5Obj/Obj54_0/img/tiere_01.jpg"><img src="wsX5Obj/Obj54_0/img/tiere_01k.jpg"
alt="" title="" /></a></li>
<li><a href="wsX5Obj/Obj54_0/img/tiere_02.jpg"><img src="wsX5Obj/Obj54_0/img/tiere_02k.jpg"
alt="" title="" /></a></li>
<li><a href="wsX5Obj/Obj54_0/img/tiere_03.jpg"><img src="wsX5Obj/Obj54_0/img/tiere_03k.jpg"
alt="" title="" /></a></li>
<li><a href="wsX5Obj/Obj54_0/img/tiere_04.jpg"><img src="wsX5Obj/Obj54_0/img/tiere_04k.jpg"
alt="" title="" /></a></li>
<li><a href="wsX5Obj/Obj54_0/img/tiere_05.jpg"><img src="wsX5Obj/Obj54_0/img/tiere_05k.jpg"
alt="" title="" /></a></li>
<li><a href="wsX5Obj/Obj54_0/img/tiere_06.jpg"><img src="wsX5Obj/Obj54_0/img/tiere_06k.jpg"
alt="" title="" /></a></li>
<li><a href="wsX5Obj/Obj54_0/img/tiere_07.jpg"><img src="wsX5Obj/Obj54_0/img/tiere_07k.jpg"
alt="" title="" /></a></li>
<li><a href="wsX5Obj/Obj54_0/img/tiere_08.jpg"><img src="wsX5Obj/Obj54_0/img/tiere_08k.jpg"
alt="" title="" /></a></li>
<li><a href="wsX5Obj/Obj54_0/img/tiere_09.jpg"><img src="wsX5Obj/Obj54_0/img/tiere_09k.jpg"
alt="" title="" /></a></li>
<li><a href="wsX5Obj/Obj54_0/img/tiere_10.jpg"><img src="wsX5Obj/Obj54_0/img/tiere_10k.jpg"
alt="" title="" /></a></li>
<li><a href="wsX5Obj/Obj54_0/img/tiere_11.jpg"><img src="wsX5Obj/Obj54_0/img/tiere_11k.jpg"
alt="" title="" /></a></li>
<li><a href="wsX5Obj/Obj54_0/img/tiere_12.jpg"><img src="wsX5Obj/Obj54_0/img/tiere_12k.jpg"
alt="" title="" /></a></li>
<li><a href="wsX5Obj/Obj54_0/img/tiere_13.jpg"><img src="wsX5Obj/Obj54_0/img/tiere_13k.jpg"
alt="" title="" /></a></li>
<li><a href="wsX5Obj/Obj54_0/img/tiere_14.jpg"><img src="wsX5Obj/Obj54_0/img/tiere_14k.jpg"
alt="" title="" /></a></li>
<li><a href="wsX5Obj/Obj54_0/img/tiere_15.jpg"><img src="wsX5Obj/Obj54_0/img/tiere_15k.jpg"
alt="" title="" /></a></li>
<li><a href="wsX5Obj/Obj54_0/img/tiere_16.jpg"><img src="wsX5Obj/Obj54_0/img/tiere_16k.jpg"
alt="" title="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="set" href="#wasser">Wasser<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#wasser_01"><img src="wsX5Obj/Obj54_0/img/wasser_01.jpg" alt="" title="" /></a></li>
<li><a href="#wasser_02"><img src="wsX5Obj/Obj54_0/img/wasser_02.jpg" alt="" title="" /></a></li>
<li><a href="#wasser_03"><img src="wsX5Obj/Obj54_0/img/wasser_03.jpg" alt="" title="" /></a></li>
<li><a href="#wasser_04"><img src="wsX5Obj/Obj54_0/img/wasser_04.jpg" alt="" title="" /></a></li>
<li><a href="#wasser_05"><img src="wsX5Obj/Obj54_0/img/wasser_05.jpg" alt="" title="" /></a></li>
<li><a href="#wasser_06"><img src="wsX5Obj/Obj54_0/img/wasser_06.jpg" alt="" title="" /></a></li>
<li><a href="#wasser_07"><img src="wsX5Obj/Obj54_0/img/wasser_07.jpg" alt="" title="" /></a></li>
<li><a href="#wasser_08"><img src="wsX5Obj/Obj54_0/img/wasser_08.jpg" alt="" title="" /></a></li>
<li><a href="#wasser_09"><img src="wsX5Obj/Obj54_0/img/wasser_09.jpg" alt="" title="" /></a></li>
<li><a href="#wasser_10"><img src="wsX5Obj/Obj54_0/img/wasser_10.jpg" alt="" title="" /></a></li>
<li><a href="#wasser_11"><img src="wsX5Obj/Obj54_0/img/wasser_11.jpg" alt="" title="" /></a></li>
<li><a href="#wasser_12"><img src="wsX5Obj/Obj54_0/img/wasser_12.jpg" alt="" title="" /></a></li>
<li><a href="#wasser_13"><img src="wsX5Obj/Obj54_0/img/wasser_13.jpg" alt="" title="" /></a></li>
<li><a href="#wasser_14"><img src="wsX5Obj/Obj54_0/img/wasser_14.jpg" alt="" title="" /></a></li>
<li><a href="#wasser_15"><img src="wsX5Obj/Obj54_0/img/wasser_15.jpg" alt="" title="" /></a></li>
<li><a href="#wasser_16"><img src="wsX5Obj/Obj54_0/img/wasser_16.jpg" alt="" title="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="set" href="#natur">Natur<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#natur_01"><img src="wsX5Obj/Obj54_0/img/natur_01.jpg" alt="" title="" /></a></li>
<li><a href="#natur_02"><img src="wsX5Obj/Obj54_0/img/natur_02.jpg" alt="" title="" /></a></li>
<li><a href="#natur_03"><img src="wsX5Obj/Obj54_0/img/natur_03.jpg" alt="" title="" /></a></li>
<li><a href="#natur_04"><img src="wsX5Obj/Obj54_0/img/natur_04.jpg" alt="" title="" /></a></li>
<li><a href="#natur_05"><img src="wsX5Obj/Obj54_0/img/natur_05.jpg" alt="" title="" /></a></li>
<li><a href="#natur_06"><img src="wsX5Obj/Obj54_0/img/natur_06.jpg" alt="" title="" /></a></li>
<li><a href="#natur_07"><img src="wsX5Obj/Obj54_0/img/natur_07.jpg" alt="" title="" /></a></li>
<li><a href="#natur_08"><img src="wsX5Obj/Obj54_0/img/natur_08.jpg" alt="" title="" /></a></li>
<li><a href="#natur_09"><img src="wsX5Obj/Obj54_0/img/natur_09.jpg" alt="" title="" /></a></li>
<li><a href="#natur_10"><img src="wsX5Obj/Obj54_0/img/natur_10.jpg" alt="" title="" /></a></li>
<li><a href="#natur_11"><img src="wsX5Obj/Obj54_0/img/natur_11.jpg" alt="" title="" /></a></li>
<li><a href="#natur_12"><img src="wsX5Obj/Obj54_0/img/natur_12.jpg" alt="" title="" /></a></li>
<li><a href="#natur_13"><img src="wsX5Obj/Obj54_0/img/natur_13.jpg" alt="" title="" /></a></li>
<li><a href="#natur_14"><img src="wsX5Obj/Obj54_0/img/natur_14.jpg" alt="" title="" /></a></li>
<li><a href="#natur_15"><img src="wsX5Obj/Obj54_0/img/natur_15.jpg" alt="" title="" /></a></li>
<li><a href="#natur_16"><img src="wsX5Obj/Obj54_0/img/natur_16.jpg" alt="" title="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="set" href="#personen">Personen<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#personen_01"><img src="wsX5Obj/Obj54_0/img/personen_01.jpg" alt="" title="" /></a></li>
<li><a href="#personen_02"><img src="wsX5Obj/Obj54_0/img/personen_02.jpg" alt="" title="" /></a></li>
<li><a href="#personen_03"><img src="wsX5Obj/Obj54_0/img/personen_03.jpg" alt="" title="" /></a></li>
<li><a href="#personen_04"><img src="wsX5Obj/Obj54_0/img/personen_04.jpg" alt="" title="" /></a></li>
<li><a href="#personen_05"><img src="wsX5Obj/Obj54_0/img/personen_05.jpg" alt="" title="" /></a></li>
<li><a href="#personen_06"><img src="wsX5Obj/Obj54_0/img/personen_06.jpg" alt="" title="" /></a></li>
<li><a href="#personen_07"><img src="wsX5Obj/Obj54_0/img/personen_07.jpg" alt="" title="" /></a></li>
<li><a href="#personen_08"><img src="wsX5Obj/Obj54_0/img/personen_08.jpg" alt="" title="" /></a></li>
<li><a href="#personen_09"><img src="wsX5Obj/Obj54_0/img/personen_09.jpg" alt="" title="" /></a></li>
<li><a href="#personen_10"><img src="wsX5Obj/Obj54_0/img/personen_10.jpg" alt="" title="" /></a></li>
<li><a href="#personen_11"><img src="wsX5Obj/Obj54_0/img/personen_11.jpg" alt="" title="" /></a></li>
<li><a href="#personen_12"><img src="wsX5Obj/Obj54_0/img/personen_12.jpg" alt="" title="" /></a></li>
<li><a href="#personen_13"><img src="wsX5Obj/Obj54_0/img/personen_13.jpg" alt="" title="" /></a></li>
<li><a href="#personen_14"><img src="wsX5Obj/Obj54_0/img/personen_14.jpg" alt="" title="" /></a></li>
<li><a href="#personen_15"><img src="wsX5Obj/Obj54_0/img/personen_15.jpg" alt="" title="" /></a></li>
<li><a href="#personen_16"><img src="wsX5Obj/Obj54_0/img/personen_16.jpg" alt="" title="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
Code Datei "gallery_style.css"
.Obj54 { width: 635px; height: 550px; text-align: left; position: relative; margin: 0 auto; }
.Obj54 ul.topic {
padding: 0;
margin: 0;
list-style: none;
width: 635px;
height: auto;
position: relative;
z-index: 10;
}
.Obj54 ul.topic li {
display: block;
width: 125px;
height: 31px;
float: left;
}
.Obj54 ul.topic li a.set {
display: block;
font-size: 11px;
width: 124px;
height: 30px;
text-align: center;
line-height: 30px;
color: #000;
text-decoration: none;
border: 1px solid #fff;
border-width: 1px 1px 0 0;
background: #ccc;
font-family: verdana, arial, sans-serif;
}
.Obj54 ul.topic li a ul,
.Obj54 ul.topic li ul { display:none; }
.Obj54 ul.topic li.active a { color: #000; background: #bbb; }
.Obj54 ul.topic li a:hover,
.Obj54 ul.topic li:hover a { color: #fff; background: #aaa; }
.Obj54 ul.topic li.active ul {
display: block;
position: absolute;
left: 0;
top: 31px;
list-style: none;
padding: 0;
margin: 0;
height: 375px;
background: #ddd;
width: 464px;
padding: 40px 60px;
border: 20px solid #bbb;
z-index: 1;
}
.Obj54 ul.topic li a:hover ul,
.Obj54 ul.topic li:hover ul {
display: block;
position: absolute;
left: 0;
top: 31px;
list-style: none;
padding: 0;
margin: 0;
height: 375px;
background: #ddd;
width: 464px;
padding: 40px 60px;
border: 20px solid #aaa;
z-index: 100;
}
.Obj54 ul.topic li ul li {
display: inline;
width: 112px;
height: 87px;
float: left;
border: 1px solid #fff;
margin: 1px;
}
.Obj54 ul.topic li ul li a {
display: block;
width: 110px;
height: 85px;
cursor: default;
float: left;
text-decoration: none;
background: #444;
border: 1px solid #888;
}
.Obj54 ul.topic li ul li a img { display: block; width: 100px; height: 75px; border: 5px solid #eee; }
.Obj54 ul.topic li a:hover ul li a:hover,
.Obj54 ul.topic li:hover ul li a:hover { white-space: normal; position: relative; }
.Obj54 ul.topic li a:hover ul li a:hover img,
.Obj54 ul.topic li:hover ul li a:hover img {
position: absolute;
left: -50px;
top: -32px;
width: 200px;
height: 150px;
border-color: #fff;
}
Feedbacks zu ""


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

© 2009 - 2019





Besucher Statistik
» 6 Online
» 195 Heute
» 828 Gestern
» 3112 Woche
» 10562 Monat
» 50238 Jahr
» 377994 Gesamt
Record: 2382 (29.03.2019)
Gesamt Downloads:
Zurück zum Seiteninhalt