Lightbox Bilder mit einer Lupe versehen

**Messa** · 09.06.2011, 18:33

Habe noch ein andern Weg.

In der gallery_default.tpl habe ich über der Ziele (Die original Zeile) diese Zusatzzeile eingefügt.
Sie fügt ein Bild ein mit der class="lupe" ein.
Nur nich das Bild richtig angeben dann klappts und CSS adaptiern.

Meine Zusatzzeile:

Code:

  <a href="<?php echo $col->href; ?>"<?php echo $col->attributes; ?> title="<?php echo $col->alt; ?>"><img class="lupe" src="tl_files/lupe.gif" /></a>

Dir original Zeile:

Code:

<a href="<?php echo $col->href; ?>"<?php echo $col->attributes; ?> title="<?php echo $col->alt; ?>"><img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>" /></a>

CSS - Beispiel:

Code:

.ce_gallery .image_container
{
	position:relative;
}
.lupe
{
	width:50px;
	height:50px;
	position:absolute;
	background-repeat:no-repeat;
	top: 250px;
}

Liebe Grüße
Matthias

**waschbecken1394** · 15.09.2011, 19:13

Hallo!

Kurze Frage zum Template erstellen.
Prinzipiell wollte ich ebenso ein Element im ce_text.tpl platzieren, um eine Lupe via CSS reinzupacken.

Leider werden aber meine Änderungen in dieser TPL Datei nicht übernommen. Was mache ich falsch?

Hab das ce_text.tpl via Templates -> Neues Template im Ordner /templates erzeugt. Ändere ich dann dort etwas, wird es aber nicht übernommen (lt. HTML source). Ich verwende Contao 2.10.0.

Danke für ein Tipp.

Lg, WB

**pmmueller** · 15.09.2011, 19:32

In der 2.10.x solltest du je nach verwendetem Ausgabeformat die Templates *.xhtml oder *.html5 nehmen. Das Ausgabeformat wird im Seitenlayout definiert. HTML => HTML5, XHTML => genau das.

Siehe http://www.contao.org/neuigkeiten/it..._2-10-RC1.html, Abschnitt »Neue Template-Endungen.

**waschbecken1394** · 16.09.2011, 08:45

Zitat von pmmueller

In der 2.10.x solltest du je nach verwendetem Ausgabeformat die Templates *.xhtml oder *.html5 nehmen. Das Ausgabeformat wird im Seitenlayout definiert. HTML => HTML5, XHTML => genau das.

Siehe http://www.contao.org/neuigkeiten/it..._2-10-RC1.html, Abschnitt »Neue Template-Endungen.

Sehr gut - danke für den Hinweis - klappt nun alles einwandfrei.

**Bas** · 30.05.2013, 16:33

2 Jahre später (heute) .. würd ich es mit CSS3 angehen ... ohne Templateanpassungen.

Am Beispiel Contao 3.1 und jQuery-Colorbox sollte es ungefähr so funktionieren:
(Achtung kein finaler Code, sondern ein Skribble.)

Code:

a.cboxElement {
  position:relative;
}

a.cboxElement:before {
  content:"x";
  display:block;
  width:10px;
  height:10px;
  position:absolute;
  top:0px;
  left:0px;
}

Die Contentzuweisung (x) kann man natürlich leer lassen, und statt dessen ne Hintergrundgrafik einziehen. Ich würde die Nutzung eines Iconfonts favorisieren.
Ich werd das bei nächster Gelegenheit mal ausfeilen und poste es dann.