CSS Multi Slideshow - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

CSS Multi Slideshow

Scripte > Bildergallerien

Eine animierte Multi-Photo-Slideshow reiner CSS3-Basis. (UTF-8)

Hier eine animierte Slideshow die 3 verschiedene Bildgrößen (99x66px; 599x399px; 640x480px) benötigt, aber doch einen sehr wirkungsvollen Eindruck hinterläßt. Sollten die Bilder mit einem Link auf andere HTML-Seiten verweisen, werden die großen Bilder nicht benötigt. Es muss ledigleich der Code an den entspechenden Stellen abgeändert werden, z. B.

<li><a href="seite.html>

oder bei Verweisen auf andere Domains, z.B.

<li><a href="http://www domain.tld" target="_blank">

Das gesamte Script verwendet kein Javascript und auch kein Flasch. Es wird ausschließlich über CSS3 gesteuert.
Für die Einbindung sind 2 Varianten erläutert, wobei die 2. Variante einfacher zu handhaben wäre.
In der Zip-Datei befindet sich ein Verzeichnis "multi-slideshow", das so übernommen werden kann.
Die Anpassungen der Bilder-Links erfolgen in der Datei "index.html" bzw. im HTML-Objekt, das Style der gesamten Gallerie kann in der Datei "slideshow_style.css" den eigenen Bedürfnissen angepasst werden.
Wichtig: Die ausführende Datei der Variante 2 muss die Dateiendung .php aufweisen, damit das Script ausgeführt wird.

Multi Slideshow

Code für den HEAD-Bereich:

[Vor dem /HEAD]

<link rel="stylesheet" type="text/css" media="screen,projection"
href=
"multi-slideshow/slideshow_style.css" />

Variante 1

[Objekt HTML]

Code für das HTML-Objekt:


<div>
<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="multi-slideshow/img/natur_01g.jpg" target="_blank">
<img class="small" src="multi-slideshow/img/natur_01k.jpg" alt="" />
<img class="full" src="multi-slideshow/img/natur_01.jpg" alt="" /></a></li>
<li><a href="multi-slideshow/img/natur_02g.jpg" target="_blank">
<img class="small" src="multi-slideshow/img/natur_02k.jpg" alt="" />
<img class="full" src="multi-slideshow/img/natur_02.jpg" alt="" /></a></li>
<li><a href="multi-slideshow/img/natur_03g.jpg" target="_blank">
<img class="small" src="multi-slideshow/img/natur_03k.jpg" alt="" />
<img class="full" src="multi-slideshow/img/natur_03.jpg" alt="" /></a></li>
<li><a href="multi-slideshow/img/natur_04g.jpg" target="_blank">
<img class="small" src="multi-slideshow/img/natur_04k.jpg" alt="" />
<img class="full" src="multi-slideshow/img/natur_04.jpg" alt="" /></a></li>
<li><a href="multi-slideshow/img/natur_05g.jpg" target="_blank">
<img class="small" src="multi-slideshow/img/natur_05k.jpg" alt="" />
<img class="full" src="multi-slideshow/img/natur_05.jpg" alt="" /></a></li>
<li><a href="multi-slideshow/img/natur_06g.jpg" target="_blank">
<img class="small" src="multi-slideshow/img/natur_06k.jpg" alt="" />
<img class="full" src="multi-slideshow/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="multi-slideshow/img/personen_01g.jpg" target="_blank">
<img class="small" src="multi-slideshow/img/personen_01k.jpg" alt="" />
<img class="full" src="multi-slideshow/img/personen_01.jpg" alt="" /></a></li>
<li><a href="multi-slideshow/img/personen_02g.jpg" target="_blank">
<img
class="small" src="multi-slideshow/img/personen_02k.jpg" alt="" />
<img class="full" src="multi-slideshow/img/personen_02.jpg" alt="" /></a></li>
<li><a href="multi-slideshow/img/personen_03g.jpg" target="_blank">
<img
class="small" src="multi-slideshow/img/personen_03k.jpg" alt="" />
<img class="full" src="multi-slideshow/img/personen_03.jpg" alt="" /></a></li>
<li><a href="multi-slideshow/img/personen_04g.jpg" target="_blank">
<img
class="small" src="multi-slideshow/img/personen_04k.jpg" alt="" />
<img class="full" src="multi-slideshow/img/personen_04.jpg" alt="" /></a></li>
<li><a href="multi-slideshow/img/personen_05g.jpg" target="_blank">
<img
class="small" src="multi-slideshow/img/personen_05k.jpg" alt="" />
<img class="full" src="multi-slideshow/img/personen_05.jpg" alt="" /></a></li>
<li><a href="multi-slideshow/img/personen_06g.jpg" target="_blank">
<img
class="small" src="multi-slideshow/img/personen_06k.jpg" alt="" />
<img class="full" src="multi-slideshow/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="multi-slideshow/img/tiere_01g.jpg" target="_blank">
<img
class="small" src="multi-slideshow/img/tiere_01k.jpg" alt="" />
<img class="full" src="multi-slideshow/img/tiere_01.jpg" alt="" /></a></li>
<li><a href="multi-slideshow/img/tiere_02g.jpg" target="_blank">
<img
class="small" src="multi-slideshow/img/tiere_02k.jpg" alt="" />
<img class="full" src="multi-slideshow/img/tiere_02.jpg" alt="" /></a></li>
<li><a href="multi-slideshow/img/tiere_03g.jpg" target="_blank">
<img
class="small" src="multi-slideshow/img/tiere_03k.jpg" alt="" />
<img class="full" src="multi-slideshow/img/tiere_03.jpg" alt="" /></a></li>
<li><a href="multi-slideshow/img/tiere_04g.jpg" target="_blank">
<img
class="small" src="multi-slideshow/img/tiere_04k.jpg" alt="" />
<img class="full" src="multi-slideshow/img/tiere_04.jpg" alt="" /></a></li>
<li><a href="multi-slideshow/img/tiere_05g.jpg" target="_blank">
<img
class="small" src="multi-slideshow/img/tiere_05k.jpg" alt="" />
<img class="full" src="multi-slideshow/img/tiere_05.jpg" alt="" /></a></li>
<li><a href="multi-slideshow/img/tiere_06g.jpg" target="_blank">
<img
class="small" src="multi-slideshow/img/tiere_06k.jpg" alt="" />
<img class="full" src="multi-slideshow/img/natur_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="multi-slideshow/img/bruecken_01g.jpg" target="_blank">
<img
class="small" src="multi-slideshow/img/bruecken_01k.jpg" alt="" />
<img class="full" src="multi-slideshow/img/bruecken_01.jpg" alt="" /></a></li>
<li><a href="multi-slideshow/img/bruecken_02g.jpg" target="_blank">
<img
class="small" src="multi-slideshow/img/bruecken_02k.jpg" alt="" />
<img class="full" src="multi-slideshow/img/bruecken_02.jpg" alt="" /></a></li>
<li><a href="multi-slideshow/img/bruecken_03g.jpg" target="_blank">
<img
class="small" src="multi-slideshow/img/bruecken_03k.jpg" alt="" />
<img class="full" src="multi-slideshow/img/bruecken_03.jpg" alt="" /></a></li>
<li><a href="multi-slideshow/img/bruecken_04g.jpg" target="_blank">
<img
class="small" src="multi-slideshow/img/bruecken_04k.jpg" alt="" />
<img class="full" src="multi-slideshow/img/bruecken_04.jpg" alt="" /></a></li>
<li><a href="multi-slideshow/img/bruecken_05g.jpg" target="_blank">
<img
class="small" src="multi-slideshow/img/bruecken_05k.jpg" alt="" />
<img class="full" src="multi-slideshow/img/bruecken_05.jpg" alt="" /></a></li>
<li><a href="multi-slideshow/img/bruecken_06g.jpg" target="_blank">
<img
class="small" src="multi-slideshow/img/bruecken_06k.jpg" alt="" />
<img class="full" src="multi-slideshow/img/bruecken_06.jpg" alt="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="cover"></li>
</ul>
</div>

Variante 2

[Objekt HTML]

Code für das HTML-Objekt:


<?php include("multi-slideshow/index.html"); ?>

Code der CSS-Datei (slideshow_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:66px;}

Feedbacks zu ""

es gibt insgesamt 1 Kommentar(e)


  1. Hans-Ueli Flückiger http://www.hans-uelli.ch schreibt am 27.05.2013, 06.15 Uhr

    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.
    Admin-Antwort: 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.


Name*
Vorname
Kommentar*
Email *
Homepage
Telefon
Sicherheitscode *
 
Logo HTML5
Button Spenden

© 2009 - 2018




  Besucher Statistik
 » 6 Online
 » 109 Heute
 » 1228 Woche
 » 4561 Monat
 » 36632 Jahr
 » 283210 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü