Bilderschau ohne Javascript

[kleppi]

Hallo,

ich habe eine kleine Bilderschau nur mit CSS die auch local funktioniert.
Unbenannt.jpg
Der Html-Code sieht aus wie folgt.

<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.

/* 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

[ciaobello]

<a href="#">

Das kennt Contao wohl nicht und ruft somit die 404 Seite auf, die vermutlich auf die Startseite zeigt.

Versuche mal mit einem inserttag den Request String {{env::request}} mitzugeben. Contao soll ja auf der entsprechenden Seite bleiben.

https://docs.contao.org/books/manual...tml#inserttags

Und denke bitte mal an ein Update ... 2.9 ist eine veraltete Version von Contao.

[tab]

Vermutlich kennt Contao das wohl schon, aber wegen des base-Tags wird natürlich auf die Startseite gesprungen.

Edit: Falls es in der alten Version das base-Tag schon im Header gab, da habe ich keine Ahnung .

[ciaobello]

Edit: Falls es in der alten Version das base-Tag schon im Header gab, da habe ich keine Ahnung .

Genau deshalb vermute ich ja auch nur, zudem kann ja auch etwas falsch konfiguriert sein ...

[kleppi]

Hallo,

ich habe es gelöst, siehe Code

<div class="imagePreview">
    <ul>
      <li><a href="{{env::request}}#slide1"><img alt="Vorschaubild 1" src="tl_files/JoggenInNRWsite/images/2015/Ninja-Run USA 2015/bild1.JPG" /></a></li>
      <li><a href="{{env::request}}#slide2"><img alt="Vorschaubild 2" src="tl_files/JoggenInNRWsite/images/2015/Ninja-Run USA 2015/bild2.JPG" /></a></li>
      <li><a href="{{env::request}}#slide3"><img alt="Vorschaubild 3" src="tl_files/JoggenInNRWsite/images/2015/Ninja-Run USA 2015/bild3.JPG" /></a></li>

    </ul>
  </div>

vielen Dank für eure Hilfe.
Klaus

[ciaobello]

Ich hoffe doch für dich dass du auf dieser Web-Seite keine Formulare verwendest ... nur mal so wegen Attacken und so (Contao 2.9.x).

[kleppi]

ich verwende keine Formulare auf meiner Webseite.
Ich berichte dort über das Joggen von mir und meinen Freunden, ich benutze für Bildberichte viele Slider, die werde ich garantiert nicht mehr aktualisiert bekommen.
http://www.joggen-in-nrw.de

hier ist der Link zu der Anleitung für diese Bildershow.
webstandard.kulando.de/post/2010/05/21/sliding-image-gallery-css3-transition-tutorial




Gruß Klaus