Hallo,
ich habe eine kleine Bilderschau nur mit CSS die auch local funktioniert.
Unbenannt.jpg
Der Html-Code sieht aus wie folgt.
Code:
<div id="imageGallery">
<div class="imageZoom">
<ul>
<li id="slide1"><a href="#"><img alt="Bild 1" src="tl_files/JoggenInNRWsite/images/2015/Ninja-Run USA 2015/bild1.JPG" /></a></li>
<li id="slide2"><a href="#"><img alt="Bild 2" src="tl_files/JoggenInNRWsite/images/2015/Ninja-Run USA 2015/bild2.JPG" /></a></li>
<li id="slide3"><a href="#"><img alt="Bild 3" src="tl_files/JoggenInNRWsite/images/2015/Ninja-Run USA 2015/bild3.JPG" /></a></li>
</ul>
</div>
<div class="imagePreview">
<ul>
<li><a href="#slide1"><img alt="Vorschaubild 1" src="tl_files/JoggenInNRWsite/images/2015/Ninja-Run USA 2015/bild1.JPG" /></a></li>
<li><a href="#slide2"><img alt="Vorschaubild 2" src="tl_files/JoggenInNRWsite/images/2015/Ninja-Run USA 2015/bild2.JPG" /></a></li>
<li><a href="#slide3"><img alt="Vorschaubild 3" src="tl_files/JoggenInNRWsite/images/2015/Ninja-Run USA 2015/bild3.JPG" /></a></li>
</ul>
</div>
</div>
Die CSS-Steuerung über die Vorschaubilder geschieht wie folgt.
Code:
/* Slide-Effekt "Transition" festlegen */
.imageZoom ul li img {
-moz-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
transition: height 2s ease;
}
/* Ausmaße für den Slide-Effekt mit Pseudoklasse :target festlegen */
.imageZoom ul li:target img {
height:465px;
width:620px;
border:1px solid #f0f0f0;
}
wenn ich in Contao auf ein Vorschaubild klicke wird die Startseite aufgerufen, weiß jemand warum?
Gruß
Klaus
Lesezeichen