CSS Multi Slideshow - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
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.
Achtung: Bei Einbindung per <?php include...?> muss die ausführende Datei die Dateiendung .php aufweisen.
Download Button
Downloads:
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; }
Feedbacks zu ""

Hans-Ueli Flückiger

27.05.2013, 04:15

+0 -0  

Als Nichtcomputerspezialist sind mir nicht alle Begriffe klar. Heisst Multi-Slideshow dass ich aktiv sein muss, d.h. dass kein automatischer Lauf möglich ist?
Wenn ich ein Foto anklicke offnet es sich dieses im selben Fenster. Wenn ich zurück zur Slideshow will muss ich den Preil oben links anklicken, also Seite zurück. ich finde dies nicht ideal.

Multi heißt es, weil es mehrere Bilder verwaltet. Mercedes A-Klasse ist auch nicht für Anfänger. Wie man das Bild öffnet, ist eine Frage des Parameters, den man im Code doch nur ergänzen muss. Der Parameter target="_blank" im href öffnet im neuen Fenster. Ebenso ist ein Popup möglich.
Es muss nicht immer eine Art Slideshow sein, die bei vielen auch störend wirkt.

Bitte Dein Feedback

Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.

Login | Registrierung


            CAPTCHA
            Vielen Dank für Dein Feedback.
            Logo Host Europe
            Button Spenden

            © 2009 - 2020




            
            Besucher Statistik
            » 1 Online
            » 226 Heute
            » 1 Gestern
            » 1086 Woche
            » 2343 Monat
            » 31602 Jahr
            » 255808 Gesamt
            Record: 1144 (01.02.2020)
            Gesamt Downloads:
            Hosting by
            Zurück zum Seiteninhalt