Lightbox Bilder mit einer Lupe versehen

**Juke** · 18.07.2009, 08:27

Zuerst ein Icon erstellen und auf den Server hochladen und beispielsweise in einem Ordner für die Bilder der Layout-Dateien ablegen.
Pfad z.B. : tl_files/images/layout/magnifier.png

Ich beschreibe hier den Weg, wenn man das Bild NICHT als eigenständiges Element, sondern über die Option "Bild " hinzufügt.

Also:
BE
=> Artikel
=> Artikel auswählen
=> Neues Element hinzufügen
=> Elementtyp Text.
Ganz unten dann Checkbox “Ein Bild hinzufügen”
=> Bild auswählen und Checkbox
=>“Großansicht” aktivieren.

Wenn über diese Methode ein Bild eingefügt wird, wird das Template ce_text_image_full_size verwendet, welches einer kleinen Änderung bedarf.
Im BE unter dem Menüpunkt “templates” das template “ce_text_image_full_size” auswählen und über TL als Kopie im Ordner templates anlegen lassen.
Das Template öffnen und das image-Tag für die Lupe mit dem richtigen Pfad an zwei Stellen wie folgt einfügen:

PHP-Code:


/*templateänderung an ce_text_image_full_size*/

/*<img id="magnifier" src="tl_files/images/layout/magnifier.png" alt="lupe" /> eingefügt*/

<div class="image_container"<?php if ($this->margin): ?> style="<?php echo $this->margin; ?>"<?php endif; ?>>

<a href="<?php echo $this->href; ?>" rel="lightbox" title="<?php echo $this->alt; ?>"><img id="magnifier" src="tl_files/images/magnifier.png" alt="lupe" /><img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" /></a>

<?php if ($this->caption): ?>

<div class="caption"><?php echo $this->caption; ?></div>

Jetzt noch im css den image_container auf position: relative; setzen und die Lupe über die id absolut darin positionieren.

Code:

div.image_container{position:relative;}
div.image_container img.magnifier{top:5px;left:0px;position:absolute;}

***Nina*** · 26.07.2009, 21:50

Ein sehr schöner Tipp

**Toflar** · 27.07.2009, 12:49

Perfekt wär's mit einem kleinen Screenshot

Ansonsten sag auch ich: Dankeschön

**markus.milkereit** · 06.09.2009, 14:39

Sehr schöne Optimierung in der Usability

Dieselbe Änderung kann auch noch in den Templates

ce_accordion_image_fullsize.tpl (Accordeon-Text mit Bild)
ce_gallery_fullsize.tpl (Bilder-Galerie)
ce_image_fullsize.tpl (nur Bild)

gemacht werden, dann ist es durchgängig gleich.
Einmal Screenshot von Bild mit Lupe rechts unten im Eck, also mit diesem CSS:

Code:

#main div.image_container img.magnifier {
  position:absolute;
  bottom: 0px; right: 0px;
}

**chrisbirne** · 24.09.2009, 13:45

----------------------
Sehr schöne Optimierung in der Usability

Dieselbe Änderung kann auch noch in den Templates

ce_accordion_image_fullsize.tpl (Accordeon-Text mit Bild)
ce_gallery_fullsize.tpl (Bilder-Galerie)
ce_image_fullsize.tpl (nur Bild)

gemacht werden, dann ist es durchgängig gleich.
-----------------------

Hallo,

vielen Dank für den Tipp. Beim Text Image habe ich das bereist umgesetzt.

Aber was muss ich in ce_gallery_fullsize.tpl ändern, um auch dor die Lupe zu sehen. Ich habe schon einiges probiert, aber ich krieg das nicht hin. Ich muss dazu sagen, dass ich Anfänger und kein Coder bin.

Nochmals vielen Dank.
Chrisbirne

**Corazon** · 24.09.2009, 16:06

also ich hab da auch problem,
kann das sein der der code nicht stimmt. die lupe wird angezeig.. aber ich hab einen haufen steuer code auf frontend.. und wo haue ich die css rein..

**joerg-t** · 24.09.2009, 21:35

Hallo,

versucht doch mal die 5. Zeile von Jutta ihrem php in euere Templates
an dieser Position einzufügen. Anschließend noch die CSS Anweisung.
Dann sollte es gehen.

Grüße Jörg

**chrisbirne** · 25.09.2009, 00:16

Hallo Jörg,

das hat bei mir bei der ce_gallery_fullsize.tpl nicht geklappt.....

Viele Grüße
Chrisbirne

**Corazon** · 25.09.2009, 06:15

also mein code sieht jetzt so aus

Code:

<div class="image_container"<?php if ($this->margin): ?> style="<?php echo $this->margin; ?>"<?php endif; ?>>
<a href="<?php echo $this->href; ?>" rel="lightbox" title="<?php echo $this->alt; ?>">
<img id="magnifier" src="tl_files/icons/search.png" alt="lupe" /><img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" /></a>
<?php if ($this->caption): ?>
<div class="caption"><?php echo $this->caption; ?></div>
<?php endif; ?>
</div>

und die Lupe ist auch endlich drin.
aber ausser halb des bildes. wie bekomme ich die ins bild so wie beim marus seinem screenshot.
ich weiß per css.. nur ich finde keinen images container

**Kahmoon** · 07.10.2009, 14:39

Super Sache. Aber welches Template muss ich anpassen um Lightboxbilder innerhalb Artikeln dieses Lupenicon zu verpassen?

Gruß
Franky

**markus.milkereit** · 07.10.2009, 15:36

@Franky,
ist im Ursprungsartikel genannt: ce_text_image_full_size.tpl

@Corazon
gleich dein erstes div hat doch die richtige Klasse: image_container

Gruß
Markus

**Kahmoon** · 07.10.2009, 15:43

Ich beschreibe hier den Weg, wenn man das Bild NICHT als eigenständiges Element, sondern über die Option "Bild " hinzufügt.

Leider nein, mit diesem Template scheint es sich nicht um die Grafik innerhalb eines Artikel- bzw. Nachrichtentextes zu handeln sondern wie beschrieben das Teaserbild einer News (das klappt damit wunderbar). Ich würde aber gern Lightboxbilder innerhalb eines Nachrichtentextes damit bereichern.

**markus.milkereit** · 07.10.2009, 15:55

Ahh im Teaser, nicht im Artikel -> garnicht :P
Zumindest kannst du nicht vernünftig die Lupe platzieren, weil du als Bezugspunkt nur den ganzen Text hast, nicht das im Editor eingefügte Bild.

Gibt es nicht auch eine Erweiterung Teaserbild oder sowas, mit der du auch beim Teaser wie beim Inhaltselement ein "Bild hinzufügen" hast? Da würde es wieder gehen. Ist auch generell besser per CSS steuerbar, weil du mehr Elemente zum Layouten hast.
Falls es das nicht gibt: ich habs schon irgendwo im Einsatz, müsste ich nur mal raussuchen und veröffentlichen

Gruß
Markus

**Kahmoon** · 07.10.2009, 15:57

Hmmm ja das mit dem Bezugspunkt hab ich schon befürchtet

. Das man es irgendwie mit einer Klasse des Lightboxbildes löst? Mit einem Hintergrundbild?

Naja dann hab ich mich wohl zu früh gefreut :-P

Danke für die Antwort.

ha.. · 13.10.2009, 08:14

Habe den Thread mal durchgelesen und finde das ganze auch eine gute Sache.
Jedoch habe ich das ganze mal versucht und scheitere immer noch an der absoluten Anzeige der Lupe. Habe die Grafik ganz normal mit in den image_container gepackt!

Ist das ganze eigentlich auch luffähig im IE?

Beste Grüße, Jörg

**Kahmoon** · 13.10.2009, 08:38

Oben beschriebenes Tutorial funktioniert bei mir in allen Browsern.

ha.. · 13.10.2009, 09:52

...auch im IE 6?

Gruß, Jörg

**Kahmoon** · 13.10.2009, 10:07

Jetzt hab ichs grad noch mal kontrolliert und siehe da wenn ich die Imagebox relative positioniere werden die Grafiken im IE 6 nicht mehr angezeigt. Ich bin mir aber sicher das es mal ging..hmmm

ha.. · 13.10.2009, 13:29

Das Problem hatte ich auch mit den Accordions!
Vielleicht sollte man für diese Sache mal eine komplette Überarbeitung der templates andenken, da ich das als eine sehr wichtige Erweiterung sehe. Am besten als Auswahlbox mit Lupenfunktion...aber das ist noch hin, denke ich!

Mal sehen, ob wir das gefixt kriegen!

Viel Spaß beim basteln und bis später...

Gruß, Jörg

**Juke** · 14.10.2009, 19:56

Huch, was ist denn hier los?

Ich habe am Code irgendwann später nochmal was nachkorrigiert und nach dem Motto : never change a running system muss bei Copy&Paste was schief gelaufen sein. Ich hab's leider nicht gesehen und habe nun den Code nochmal neu eingefügt.

Bei mir hat alles funktioniert und ja, ich fänd's auch gut und würde mich freuen, wenn das zukünftig im System als anklickbare Option übernommen werden würde.

**Graf Typo** · 14.10.2009, 21:03

Hallo Juke,

noch eine Kleinigkeit. Im Code steht:

Code:

<img id="magnifier" src="tl-files/images/magnifier.png" alt="lupe" />

Mal abgesehen davon, dass man den Pfad eh an seine Installation anpassen muss, muss es doch tl_files und nicht tl-files heißen, oder?

Gruß,
der Graf

**Juke** · 14.10.2009, 21:13

thxx - ich mache seit langem keine Unterstriche mehr ...

**Graf Typo** · 14.10.2009, 21:34

Verstehe.

Dann aber noch etwas anderes: Im IMG-Tag vergibst du ein id="magnifier", in der CSS-Datei heißt der Selektor dann aber img.magnifier. Hier ist "magnifier" also eine Klasse und keine ID. Ohnehin sollte es im IMG-Tag besser class="magnifier" heißen, falls es mehrere solcher Elemente auf derselben Seite gibt, denn eine ID darf ja im validen XHTML/CSS nur einmal pro Dokument vergeben werden.

Probleme habe ich noch mit der Positionierung der Lupe, sobald das Bild im Backend eine Caption oder Abstände zugeteilt bekommt. Dazu müsste man das Template wohl noch weiter anpassen, zum Beispiel mit einem weiteren Wrapper-DIV.

Gruß,
der Graf

**Andreas** · 14.10.2009, 23:57

Hallo,

alles was ich dafür habe ist:

<span class="zoom" title="zoom">zoom</span>

Und zwar im Link, direkt hinter dem Bild, alles andere ist CSS.

HTML-Code:

<div class="image_container right">
  <a><img /><span class="zoom" title="zoom">zoom</span></a>
</div>

Andreas

Bild1 mit CSS, Bild2 CSS deaktiviert

**Acta** · 20.10.2009, 14:59

Hi, war gerade dabei das mal umzusetzen. Leider stoße ich da an ein problem in der Dartstellung:

Mein code passt:

HTML-Code:

<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>

<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>
<?php if ($this->addBefore): ?>

<div class="image_container"<?php if ($this->margin || $this->float): ?> style="<?php echo $this->margin . $this->float; ?>"<?php endif; ?>>
<a href="<?php echo $this->href; ?>" rel="lightbox" title="<?php echo $this->alt; ?>"><img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" /></a>
<?php if ($this->caption): ?>
<div class="caption"><?php echo $this->caption; ?></div>
<?php endif; ?>
</div>
<?php endif; ?>

<?php echo $this->text; ?>

<?php if (!$this->addBefore): ?>

<div class="image_container"<?php if ($this->margin): ?> style="<?php echo $this->margin; ?>"<?php endif; ?>>
<a href="<?php echo $this->href; ?>" rel="lightbox" title="<?php echo $this->alt; ?>">
<img id="magnifier" src="tl_files/images/magnifier.gif" alt="lupe" /><img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" /></a>
<?php if ($this->caption): ?>
<div class="caption"><?php echo $this->caption; ?></div>
<?php endif; ?>
</div>


<?php endif; ?>
</div>

Und im Css ist auch alles eingestellt:

Mein problem ist das ich einen weißen hintergrund habe (HINTER DER LUPE).

Siehe : Anlage whg und als beweis anlage transparenz

Die Datei ist als gif gespeichert.

Woran könnte es den liegen?

**chrisbirne** · 20.10.2009, 15:07

Hi Acta,

ich habe die Lupe als png mit transparentem Hintergrund gespeichert. Vielleicht liegt es ja daran.

Viele Grüße

**Kahmoon** · 20.10.2009, 15:09

PNG und die IE Familie ist gar nicht gut aufeinander zu sprechen....

**chrisbirne** · 20.10.2009, 15:18

Zitat von Kahmoon

PNG und die IE Familie ist gar nicht gut aufeinander zu sprechen....

Das kann ich nicht unbedingt bestätigen. Damit hatte ich noch nie Probleme. Aber IE macht sonst schon Probleme genug....

**Acta** · 20.10.2009, 15:25

als png hatte ich es zuerst ... hatte auch nicht geholfen...

Komme einfach nicht drauf warum der sich weigert.

IM IE 6 und im FF 3 sieht beides gleich sch***e aus.

**Acta** · 21.10.2009, 08:26

Anscheind mach ich irgendwas falsch.

Also unten beigefügt noch ein Screenshot wie es aussieht wenn ich die Transparenz einfärbe..

Anscheind habe ich einen dauerhaft weißen rand ring um das bild.....

Warum auch immer.

Weiterhin ist mir aufgefallen das ich die Lupe nur positionieren kann in dem ich im Css folgenden eintrag mache.

Code:

.image_container{position:relative;}
.image_container img#magnifier{bottom:0px;right:0px;position:absolute;}

Sprich statt img.magnifier muss ich img#magnifier verwenden

**Andreas** · 21.10.2009, 12:17

Eine ID wird immer mit einer Raute angesprochen. Lege das Gif mal irgendwo anders hin. In ein Element mit einem farbigen Hintergrund um zu sehen ob es an dem GIF liegt. Wenn das GIF in Ordnung ist, dann schau nach, ob von irgendwoher ein Hintergrund vererbt wird.

Andreas

**Acta** · 21.10.2009, 12:44

Gut hab das jetzt mit nem Anderen Hintergrund genommen. hat nix gebracht aber man kann es ja auch so nutzen.

Hat schon jemand eine Möglichkeit gefunden um die Lupe anzuzueigen wenn ich folgenden Weg gehe:

Nachrichtenbeitrag erstellen

und dort über Symbol Lightbox bild einfügen

bzw. über die Checkbox Bild einfügen?

Bei beidem wird bei mir keine Lupe angezeigt.

**webseven** · 09.11.2009, 13:47

Wow, danke Juke ..

daran hatte ich mir einst wochenlang die Zähne ausgebissen und erst noch ohne Erfolg ..

Gruss
cy

**whitestone** · 19.11.2009, 17:15

Zitat von Andreas

Hallo,

alles was ich dafür habe ist:

<span class="zoom" title="zoom">zoom</span>

Und zwar im Link, direkt hinter dem Bild, alles andere ist CSS.

HTML-Code:

<div class="image_container right">
  <a><img /><span class="zoom" title="zoom">zoom</span></a>
</div>

Andreas
Bild1 mit CSS, Bild2 CSS deaktiviert

eine newbie-frage - ich bekomme keine klasse "zoom" im link -
wie kann ich das umsetzen?

danke

**Andreas** · 19.11.2009, 17:46

Hallo whitestone,

dazu musst du ein Template modifizieren. Such mal im Ordner system/modules/ nach tpl-Dateien, welche rel="lightbox enthalten. Das sind folgende:

Code:

system\modules\calendar\templates\event_default.tpl
system\modules\faq\templates\mod_faqreader.tpl
system\modules\frontend\templates\ce_accordion_image_fullsize.tpl
system\modules\frontend\templates\ce_gallery_fullsize.tpl
system\modules\frontend\templates\ce_image_fullsize.tpl
system\modules\frontend\templates\ce_text_image_fullsize.tpl
system\modules\glossary\templates\mod_glossary_list.tpl
system\modules\news\templates\news_full.tpl
system\modules\news\templates\news_latest.tpl

Kopiere das Template, in welchem du die Lupe haben willst, z.B. text_image_fullsize.tpl, in deinen Ordner templates/

Öffne die Datei, suche den Link und füge direkt hinter dem Bild und noch in dem Link folgendes ein:

Code:

<span class="zoom" title="zoom">zoom</span>

Wenn du mehrere Templates damit modifizieren willst, dann empfehle ich dir eine Datei inc_zoom.inc in dem Ordner templates anzulegen, in welche du obíge Zeile einfügst. Innerhalb der Templates welches du ändern willst brauchst du dann nur noch {{file::inc_zoom.inc}} einzugügen. Das hat den Vorteil, dass du diese Zeile für alle Templates über die Datei inc_zoom.inc verändern kannst.

Gruß Andreas

***xchs*** · 19.11.2009, 18:17

Zitat von Andreas

Kopiere das Template, in welchem du die Lupe haben willst, z.B. text_image_fullsize.tpl, in deinen Ordner templates/

In diesem Zusammenhang als Info dazu: Das Template "ce_text_image_fullsize.tpl" wird neben einigen anderen auch in der bevorstehenden TL-Version 2.8 als "depracted" eingestuft; ev. sind dann einige zusätzliche Anpassungen/Änderungen notwendig...

**Andreas** · 19.11.2009, 18:51

Ja, hatte schon gesehen. Man muss sich beim Update auf 2.8 sowieso viel Zeit nehmen und mit einer Übersicht der Änderungen dransetzen. Je mehr eigene Templates man hat, desto mehr Arbeit. Aber erstmal könn wir ja noch sauber strukturieren und keine Corefiles ändern, dann geht's nachher auch ein wenig leichter

Andreas

**whitestone** · 20.11.2009, 08:41

hallo andreas

vielen dank für die ausführliche anleitung - weltklasse
der tag ist gerettet

das ganze noch mit einer tabellenlosen bildergalerie kombinieren und es ist perfekt

http://www.mit2m.de/journal/tabellen...e-in-typolight

sonnengrüße

andi

**Andreas** · 20.11.2009, 10:55

Hallo Andi,

das freut mich

Ich hatte mir übrigens auch tabellenlose Galerietemplates erstellt, allerdings nicht mit einer Liste. Wenn man die Galerie ohne CSS ansieht, weiß man warum, das macht irgendwie keinen Sinn, auch semantisch nicht korrekt. Deshalb hatte ich die Bilder einfach in SPANs gehüllt, damit sie Inline-Elemente bleiben, und mit CSS formatiert, so dass sie korrekt nebeneinander erscheinen. Ich benutze dort viel Inline-CSS, da ich die Werte für Breite und Höhe aus dem BE auslese. Auf eine Lupe habe ich in der Galerie verzichtet, das hätte ich optisch nicht so schön gefunden. Beispiel kannst du dir hier ansehen: http://frankntone.com/de/produkte/sp...s/galerie.html Das einzige was der Kunde im BE noch angibt ist die Anzahl der Bilder pro Reihe.

Gruß Andreas

**whitestone** · 20.11.2009, 11:18

frankntone habe ich mir schon "vorher" angeschaut (url habe ich vom screenshot) - gefällt mir gut

semantik: da hast du recht - ist deine lösung auch mit lupe machbar?
bin nicht "programmierer" - wenn ja, dann werde ich es einmal versuchen

ich habe es jetzt einmal als liste eingebaut (siehe screenshot, wenn es dich interessiert)

danke nochmals für deine mühe und deine tipps

sonnengrüße

andi