CSS Multi Slideshow - Website X5 Helpsite

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

CSS Multi Slideshow

Scripte > Bildergalerien
Eine animierte Multi-Photo-Slideshow reiner CSS3-Basis
Hier eine sehr, sehr aufwendig gestaltete animierte Slide Bildershow, die 3 verschiedene Bildgrößen (99 x 66 px; 599 x 399 px; 640 x 480 px) benötigt, aber doch einen sehr wirkungsvollen Eindruck hinterlässt. Sollten die Bilder mit einem Link auf andere HTML-Seiten verweisen, werden die großen Bilder nicht benötigt. Es muss ledigleich der Link in Code an den entspechenden Stellen geändert werden, zum Beispiel
<li><a href="seite.html">.
Das gesamte Script verwendet kein Javascript und auch kein Flasch. Es wird ausschließlich über CSS3 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 in der Datei "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.
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/Obj55_0/style.css" />
Code für den <BODY> Bereich
<?php include "wsX5Obj/Obj55_0/include.html"; ?>

alternative Einbindung:
<div align="center">
<ul class="u1">
<li class="title">Fotos aus dem Leben<br /><span>Demo der animierten Multi Slideshow</span></li>
<li class="p1 tp"><a class="a1" href="#url">1<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="wsX5Obj/Obj55_0/img/natur_01g.jpg" target="_blank">
<img class="small" src="wsX5Obj/Obj55_0/img/natur_01k.jpg" alt="" />
<img class="full" src="wsX5Obj/Obj55_0/img/natur_01.jpg" alt="" /></a></li>
<li><a href="wsX5Obj/Obj55_0/img/natur_02g.jpg" target="_blank">
<img class="small" src="wsX5Obj/Obj55_0/img/natur_02k.jpg" alt="" />
<img class="full" src="wsX5Obj/Obj55_0/img/natur_02.jpg" alt="" /></a></li>
<li><a href="wsX5Obj/Obj55_0/img/natur_03g.jpg" target="_blank">
<img class="small" src="wsX5Obj/Obj55_0/img/natur_03k.jpg" alt="" />
<img class="full" src="wsX5Obj/Obj55_0/img/natur_03.jpg" alt="" /></a></li>
<li><a href="wsX5Obj/Obj55_0/img/natur_04g.jpg" target="_blank">
<img class="small" src="wsX5Obj/Obj55_0/img/natur_04k.jpg" alt="" />
<img class="full" src="wsX5Obj/Obj55_0/img/natur_04.jpg" alt="" /></a></li>
<li><a href="wsX5Obj/Obj55_0/img/natur_05g.jpg" target="_blank">
<img class="small" src="wsX5Obj/Obj55_0/img/natur_05k.jpg" alt="" />
<img class="full" src="wsX5Obj/Obj55_0/img/natur_05.jpg" alt="" /></a></li>
<li><a href="wsX5Obj/Obj55_0/img/natur_06g.jpg" target="_blank">
<img class="small" src="wsX5Obj/Obj55_0/img/natur_06k.jpg" alt="" />
<img class="full" src="wsX5Obj/Obj55_0/img/natur_06.jpg" alt="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="p2 tp"><a class="a2" href="#url">2<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="wsX5Obj/Obj55_0/img/personen_01g.jpg" target="_blank">
<img class="small" src="wsX5Obj/Obj55_0/img/personen_01k.jpg" alt="" />
<img class="full" src="wsX5Obj/Obj55_0/img/personen_01.jpg" alt="" /></a></li>
<li><a href="wsX5Obj/Obj55_0/img/personen_02g.jpg" target="_blank">
<img class="small" src="wsX5Obj/Obj55_0/img/personen_02k.jpg" alt="" />
<img class="full" src="wsX5Obj/Obj55_0/img/personen_02.jpg" alt="" /></a></li>
<li><a href="wsX5Obj/Obj55_0/img/personen_03g.jpg" target="_blank">
<img class="small" src="wsX5Obj/Obj55_0/img/personen_03k.jpg" alt="" />
<img class="full" src="wsX5Obj/Obj55_0/img/personen_03.jpg" alt="" /></a></li>
<li><a href="wsX5Obj/Obj55_0/img/personen_04g.jpg" target="_blank">
<img class="small" src="wsX5Obj/Obj55_0/img/personen_04k.jpg" alt="" />
<img class="full" src="wsX5Obj/Obj55_0/img/personen_04.jpg" alt="" /></a></li>
<li><a href="wsX5Obj/Obj55_0/img/personen_05g.jpg" target="_blank">
<img class="small" src="wsX5Obj/Obj55_0/img/personen_05k.jpg" alt="" />
<img class="full" src="wsX5Obj/Obj55_0/img/personen_05.jpg" alt="" /></a></li>
<li><a href="wsX5Obj/Obj55_0/img/personen_06g.jpg" target="_blank">
<img class="small" src="wsX5Obj/Obj55_0/img/personen_06k.jpg" alt="" />
<img class="full" src="wsX5Obj/Obj55_0/img/personen_06.jpg" alt="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="p3 tp"><a class="a3" href="#url">3<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="wsX5Obj/Obj55_0/img/tiere_01g.jpg" target="_blank">
<img class="small" src="wsX5Obj/Obj55_0/img/tiere_01k.jpg" alt="" />
<img class="full" src="wsX5Obj/Obj55_0/img/tiere_01.jpg" alt="" /></a></li>
<li><a href="wsX5Obj/Obj55_0/img/tiere_02g.jpg" target="_blank">
<img class="small" src="wsX5Obj/Obj55_0/img/tiere_02k.jpg" alt="" />
<img class="full" src="wsX5Obj/Obj55_0/img/tiere_02.jpg" alt="" /></a></li>
<li><a href="wsX5Obj/Obj55_0/img/tiere_03g.jpg" target="_blank">
<img class="small" src="wsX5Obj/Obj55_0/img/tiere_03k.jpg" alt="" />
<img class="full" src="wsX5Obj/Obj55_0/img/tiere_03.jpg" alt="" /></a></li>
<li><a href="wsX5Obj/Obj55_0/img/tiere_04g.jpg" target="_blank">
<img class="small" src="wsX5Obj/Obj55_0/img/tiere_04k.jpg" alt="" />
<img class="full" src="wsX5Obj/Obj55_0/img/tiere_04.jpg" alt="" /></a></li>
<li><a href="wsX5Obj/Obj55_0/img/tiere_05g.jpg" target="_blank">
<img class="small" src="wsX5Obj/Obj55_0/img/tiere_05k.jpg" alt="" />
<img class="full" src="wsX5Obj/Obj55_0/img/tiere_05.jpg" alt="" /></a></li>
<li><a href="wsX5Obj/Obj55_0/img/tiere_06g.jpg" target="_blank">
<img class="small" src="wsX5Obj/Obj55_0/img/tiere_06k.jpg" alt="" />
<img class="full" src="wsX5Obj/Obj55_0/img/tiere_06.jpg" alt="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="p4 tp"><a class="a4" href="#url">4<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="wsX5Obj/Obj55_0/img/bruecken_01g.jpg" target="_blank">
<img class="small" src="wsX5Obj/Obj55_0/img/bruecken_01k.jpg" alt="" />
<img class="full" src="wsX5Obj/Obj55_0/img/bruecken_01.jpg" alt="" /></a></li>
<li><a href="wsX5Obj/Obj55_0/img/bruecken_02g.jpg" target="_blank">
<img class="small" src="wsX5Obj/Obj55_0/img/bruecken_02k.jpg" alt="" />
<img class="full" src="wsX5Obj/Obj55_0/img/bruecken_02.jpg" alt="" /></a></li>
<li><a href="wsX5Obj/Obj55_0/img/bruecken_03g.jpg" target="_blank">
<img class="small" src="wsX5Obj/Obj55_0/img/bruecken_03k.jpg" alt="" />
<img class="full" src="wsX5Obj/Obj55_0/img/bruecken_03.jpg" alt="" /></a></li>
<li><a href="wsX5Obj/Obj55_0/img/bruecken_04g.jpg" target="_blank">
<img class="small" src="wsX5Obj/Obj55_0/img/bruecken_04k.jpg" alt="" />
<img class="full" src="wsX5Obj/Obj55_0/img/bruecken_04.jpg" alt="" /></a></li>
<li><a href="wsX5Obj/Obj55_0/img/bruecken_05g.jpg" target="_blank">
<img class="small" src="wsX5Obj/Obj55_0/img/bruecken_05k.jpg" alt="" />
<img class="full" src="wsX5Obj/Obj55_0/img/bruecken_05.jpg" alt="" /></a></li>
<li><a href="wsX5Obj/Obj55_0/img/bruecken_06g.jpg" target="_blank">
<img class="small" src="wsX5Obj/Obj55_0/img/bruecken_06k.jpg" alt="" />
<img class="full" src="wsX5Obj/Obj55_0/img/bruecken_06.jpg" alt="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="cover"></li>
</ul>
</div>
Code Datei "style.css"
ul.u1 {
padding: 0;
margin: 0 auto;
list-style: none;
width: 616px;
border: 16px solid #000;
border-width: 16px 16px 5px 0;
height: 465px;
position: relative;
background: #000;
overflow: hidden;
-o-border-radius: 8px;
-icab-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
ul.u1 ul {
padding: 0;
margin: 0;
list-style: none;
position: absolute;
top: 70px;
width: 600px;
height: 66px;
overflow: visible;
border: 0;
left: 32px;
z-index: 100;
transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-webkit-transition: 1s ease-in-out;
}
ul.u1 ul li { float: left; }
ul.u1 ul li a { display: block; float: left; width: 100px; height: 66px; background: #000; }
ul.u1 ul li a img { display: block; border: 0; }
ul.u1 ul li a img.small {
opacity: 1;
filter: alpha(opacity=100);
float: right;
transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-webkit-transition: 0.5s ease-in-out;
}
ul.u1 ul li a img.full {
position: absolute;
left: 1px;
top: -470px;
opacity: 0;
z-index: 1;
filter: alpha(opacity=0);
transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-webkit-transition: 1s ease-in-out;
}
ul.u1 li.tp {
position: absolute;
left: -16px;
top: 400px;
width: 16px;
height: 17px;
background: orange; z-index:5;
}
ul.u1 li.p1 a.a1 {
position:absolute;
left: 16px;
top: 0;
display: block;
width: 16px;
height: 17px;
background: #000;
font: 12px/16px arial,sans-serif;
color: #fff;
text-decoration: none;
text-align: center;
}
ul.u1 li.p2 a.a2 {
position: absolute;
left: 16px;
top: 16px;
display: block;
width: 16px;
height: 17px;
background: #000;
font: 12px/16px arial,sans-serif;
color: #fff;
text-decoration: none;
text-align: center;
}
ul.u1 li.p3 a.a3 {
position: absolute;
left: 16px;
top: 32px;
display: block;
width: 16px;
height: 17px;
background: #000;
font: 12px/16px arial,sans-serif;
color: #fff;
text-decoration: none;
text-align: center;
}
ul.u1 li.p4 a.a4 {
position: absolute;
left: 16px;
top: 48px;
display: block;
width: 16px;
height: 17px;
background: #000;
font: 12px/16px arial,sans-serif;
color: #fff;
text-decoration: none;
text-align: center;
}
ul.u1 li.p1 ul { top: 0; }
ul.u1 li.p1 ul li a img.full { top: -400px; }
ul.u1 li.tp:hover { border: 0; }
ul.u1 li.tp:hover a { font-weight: bold; background: #ffae31; }
ul.u1 li.tp:hover ul { top: 0; }
ul.u1 li.tp:hover ul li a img.full { top: -400px; }
ul.u1 ul li a:hover img.small { opacity: 0.4; filter: alpha(opacity=40); }
ul.u1 ul li a:hover img.full { opacity: 1; filter: alpha(opacity=100); }
ul.u1 li.title {
position: absolute;
left: 17px;
top: 0;
height: 299px;
padding-top: 100px;
width: 599px;
z-index: 1;
color: #888;
font-size: 25px;
text-align: center;
transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-webkit-transition: 1s ease-in-out;
}
ul.u1 li.title span { font-size: 16px; }
ul.u1:hover li.title { opacity: 0; filter: alpha(opacity=0); }

/* for IE6 */
ul.u1 table { border-collapse: collapse; width: 0; height: 0; margin-bottom: -1px; position: absolute; }
ul.u1 li a.a1 ul { top: 0; }
ul.u1 li a.a2 ul { top: 53px; }
ul.u1 li a.a3 ul { top: 37px; }
ul.u1 li a.a4 ul { top: 23px; }
ul.u1 li.tp a:hover { border: 0; }
ul.u1 li.tp a:hover { font-weight: bold; background: #ffae31; }
ul.u1 li a.a1:hover ul { top: 0; }
ul.u1 li a.a2:hover ul { top: -16px; }
ul.u1 li a.a3:hover ul { top: -32px; }
ul.u1 li a.a4:hover ul { top: -48px; }
ul.u1 li.tp a:hover ul li a img.full { top: -400px; }
* html ul.u1 li.cover { height: 401px; }
* html ul.u1 ul { left: 2px; top: 66 px; }
» nach oben «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt