Lightbox mit Lupe

**Juke** · 11.07.2009, 19:31

Hallo Forum,

mit dem Editor kann man Bilder mit Lightbox einbinden. Ich möchte, dass das eingebundene Bild eine Lupe bekommt, damit der User weiß, dass man das Bild vergrößern kann.

Alle Möglichkeiten, die ich hierzu kenne haben den Nachteil, dass dann die Lupe selbst nicht anklickbar ist, weil als Hintergrundbild eingebunden. Das ist aber etwas verwirrend und nur die zweitbeste Lösung. Am besten wäre es, wenn man in den Link, welches das Lightbox-Bild umgibt, ein zweites Bild mit einer Lupe einbinden könnte.

Weiß jemand, wie ich es anstellen kann, dass ich den Code für das Bild mit der Lupe in den Code mit den {geschweiften Klammern} hineinbekomme, so dass ich weiterhin die Lightbox-Funktion des TinyMCE benutzen kann und das nicht händisch machen muss?

Viele Grüße
Jutta

**Psi** · 12.07.2009, 15:07

vielleicht per css beim überfahren des lightbox-links den cursor in ein lupensymbol ändern?

**Juke** · 12.07.2009, 17:29

Hm ... das hatte ich schonmal ausprobiert. Der IE braucht dann aber Bilder vom Typ .cur und sich da eine Lupe zurecht zu fuckeln wird im Ergebnis nicht sehr schön.

Ich muss ja eigentlich nur wissen wo in TL der Code ist, der die Ausgabe für die Lightbox macht. Es sollte - theoretisch - nicht so schwer sein, hier ein img mit einer Lupe einzubinden - dann wär das Problem ja schon gelöst. Aber ich weiß nicht wie das mit den geschweiften Klammern funktioniert und wie und wo und was der Code dafür ist

LG Jutta

***lucina*** · 12.07.2009, 21:57

Probier doch mal:

Code:

a[rel=lightbox] img {
background-image: url(tl_files/lupe.png);
position:relative; 
z-index:-1;
}

LG, Carolina

**joe** · 13.07.2009, 08:20

a[rel=lightbox] img {
background-image: url(tl_files/lupe.png);
position:relative;
z-index:-1;
}

wird nicht in allen Browsern gehen da css3 eigenschaft

Wir hatten das gleiche Problem und haben es wie schon hier erwähnt durch nen hover realisiert.

http://www.consulaqua.de/ueber-uns.html

***lucina*** · 13.07.2009, 09:17

Neenee, das ist schon CSS2.1 - IE's < 7 unterstützen es allerdings nicht, aber da sind wir uns ja eigentlich alle einig, dass der inzwischen vernachlässigbar ist.

http://www.w3.org/TR/CSS2/selector.h...bute-selectors
http://dev.l-c-n.com/CSS3-selectors/browser-support.php

MfG, Carolina.

**joe** · 13.07.2009, 09:52

Na dann eben CSS 2

. Vernachlässigen geht leider nicht

Denke das der Ie6 mitte nächsten Jahres von der Bildfläche ist.

Ist ja auch egal wie gesagt mit span im a tag kann man da ne Lupe reinbekommen:

Sprich:

a:hover span

**Juke** · 13.07.2009, 22:39

Hallo zusammen,

es sind immer noch eine Menge Leute mit dem IE6 unterwegs. Da es sich aber bei der Lupe nicht um weltbewegende Dinge handelt, wäre Carolinas Lösung denkbar. Dann bekommen die IE6er Leute halt keine Lupe oder ich mache denen eine via ccm als Hintergrundbild. Wer mit so einem Browser surft, muss mit Abstrichen leben.

Das mit dem hover ist auch ein guter Ansatz, nur will ich ja gerade vermeiden, dass ich das Markup via html Button im Editor händisch einfügen muss - dann kann ich ja auch mein img Tag einfügen.

Wenn man jedoch im TinyMCE den Button für "Bild mit Lightbox" betätigt, wird da so ein (smarty-ähnlicher?) Code eingefügt und der produziert dann das markup. Ich möchte eigentlich nur wissen wo in den Dateien das skript zu diesem Code zu finden ist. Da würde ich dann mal schauen, ob man nicht das img Tag direkt reinsetzen kann, so dass das gleich mit ausgegeben wird und ich auf das händische Einfügen von spans oder img Tags verzichten kann.

Und wenn das für mich zu kompliziert ist - hat vielleicht ein Programmierer, der sich besser auskennt als ich, Lust das als Mini-Auftrag zu erledigen?

Viele Grüße
Jutta

**joe** · 14.07.2009, 08:44

Der smarty ähnliche code ist ein Insert Tag für images und bestandteil von Typolight. Ich finde das aufbauen von Bildern im Tiny sowieso sehr problematisch. Habe da einfach die erfahrung gemacht das spätestens wenn man den Kunden dran lässt das sich eh im Chaos verliert und auf gut deutsch scheiße aussieht.

Kannst du nicht einfach die Template datei ce_text_image_fullsize modifizieren?

**Juke** · 14.07.2009, 11:34

Jaaa! Genau das meinte ich -

DANKE

!!

**Juke** · 14.07.2009, 12:05

Ich denke, ich bin nah dran - aber irgendwas scheint noch falsch zu sein.

Hier habe ich das img für die Lupe eingesetzt:

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="./dateien/layout/maginfier.png" al="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>

Datei hochlgeladen und dann das Bild nicht über TinyMCE Lightbox und Insert Tag sondern als Element in den Artikel eingefügt. Die Änderung wird aber im Quelltext nicht sichtbar ... (bereinigt habe ich auch)

*grübel*

**Toflar** · 14.07.2009, 12:34

1. Was ist das für ein Pfad?
2. Es heisst "alt" nicht "al"

**Juke** · 14.07.2009, 15:50

Der Pfad und ob das Bild richtig angezeigt wird spielt keine Rolle, auch nicht der Tippfehler. Wahrscheinlich werde ich die Lupe sowieso woanders unterbringen, damit ich sie auch in anderen Webseiten verwenden kann. Fakt ist, dass die Ergänzung, die ich in dem Template gemacht habe, nicht im Quelltext erscheint.

**Toflar** · 14.07.2009, 15:55

Datei muss entweder im BE beim Menüpunkt "Templates" bearbeitet werden oder manuell in den Ordner root/templates verschoben werden. Die Originaldatei wird nicht angefasst!

Und wenn du das gemacht hast, funktioniert es. Falls nicht, lösch mal den Cache

**Juke** · 14.07.2009, 17:57

Ich habe mir vor dem Ändern der Orginaldatei natürlich eine Sicherungskopie angelegt

und an und für sich sehe ich keinen Grund, warum ich ein template nicht offline ändern und dann hochladen kann. Mit der Sicherungskopie weiß ich wenigstens, dass da eine Datei ist, die ich geändert habe. Und wenn man das via BE bearbeitet, ist es doch auch eine Änderung in der Orginaldatei. Schätze mal, dass es in diesem Punkt nicht anders ist, wie ich es von anderen Systemen kenne, oder?

Aber nun: Es ist mir ja schon fast peinlich, dass ich so hartnäckig nachhake - aber nö - geht nicht. Den Cache hatte ich auch vorher schon bereinigt. Und wenn ich das template über das BE bearbeite werden die Änderungen erst gar nicht übernommen. Hab mit das via BE bearbeitete template mit ftp runtergeladen und nachgeschaut - die Änderungen waren nicht drin.
Nun versteh ich gar nichts mehr.

Vielleicht ist es das falsche Template? Gibt's vielleicht noch eines?
Ich will eine Lupe

**Nils Riel** · 14.07.2009, 18:04

Das ganze geht doch garantiert auch mit Javascript, du könntest um jedes img ein <span> generieren lassen und dieses stylen. So spart man sich die Templateänderung und hat kein (an für sich) unnützes span um das Bild.

**Juke** · 14.07.2009, 18:05

Ok - hab selber nochmal gelesen. Das mit dem Template Editor macht Sinn, weil dann das geänderte Template im Template Ordner gespeichert wird und vor dem Überschreiben bei einem update geschützt ist.

Problem ist nur ... in meinem template Ordner ist kein neues template angekommen. Ich schaue aber nochmal - vermutlich habe ich was falsch gemacht.

Bis hierher aber schonmal vielen Dank an euch alle.

**Toflar** · 14.07.2009, 18:07

Zitat von Nils Riel

Das ganze geht doch garantiert auch mit Javascript, du könntest um jedes img ein <span> generieren lassen und dieses stylen. So spart man sich die Templateänderung und hat kein (an für sich) unnützes span um das Bild.

Ähm entschuldige, aber das ist ziemlich viel Müll...Wir setzen auf Barrierefreiheit, schon vergessen?

**Nils Riel** · 14.07.2009, 18:55

Der motorisch eingeschränkte, welcher mit einer Lightbox zurecht kommt, den würde ich gerne mal sehen. Hier geht es doch um die Lightbox, welche JS benötigt, somit kann sie doch auch durch JS erweitert werden - sehe dein Problem nicht.

**Toflar** · 14.07.2009, 19:52

Ist eben auch nicht der Hit

**Juke** · 14.07.2009, 21:25

Nun ja, die Lightbox funktioniert zumindest unobstrusive - weiß nicht, ob die Lupe bei deaktiviertem JS dann auch noch erscheinen würde. Mein Hauptproblem ist aber schlicht und ergreifend, dass ich es nicht so gut kann mit JS und mir eine Lösung, die ich selber herstellen kann, lieber ist.

Aber btw: tl legt mein geändertes template fein säuberlich an, die Änderungen sind auch drin, den Cache habe ich auch geleert, aber leider immer noch kein img tag im Quelltext in Sicht ...

**MacKP** · 14.07.2009, 21:33

Hallo Juke,
kannst du uns vllt ein bischen was zeigen? Link? Quellcode?
Ist sonst etwas schwierig...
Es gibt auch stellen in TL wo man nen Template aussuchen kann bei mehreren.. vllt ist das auch hier so?
Ansonsten sollte es übernommen werden.
Ich mache sehr viel mit eigenen Templates und hatte höchstens Probleme, wenn ich im falschen Template gespielt habe ;-)

Viele Grüße

**Juke** · 14.07.2009, 23:01

Edit 15.7.2009 : Link entfernt.

Bei Controlling => Analyse habe ich das Bild nicht mit den Insert Tags sondern über ein eigenes Element in den Artikel eigenfügt. Kein img Tag mit Lupe in Sicht und ich vermute ja auch, dass es das falsche Template ist.

Viele Grüße
Jutta

**MacKP** · 15.07.2009, 06:10

Hallo Juke,
ich glaub ich komm noch nicht ganz mit wie du das Bild eingebracht hast.
Was für ein CE hast du denn genau genommen für das Bild?
Leider kann ich das im Quellcode nicht erkennen...

Viele Grüße

**Juke** · 15.07.2009, 07:19

Guten Morgen !

Das mit dem Bild habe ich so gemacht:
Artikel => Analyse => Neues Element => Elementtyp Bild => Bild aussuchen und Haken bei "Großansicht" setzen.

Und wie ich gerade sehe funktioniert es auf diese Weise nicht, aber es geht wenn ich als Elementtyp "Text" verwende und dann die Option "Ein Bild hinzufügen" wähle. Das ist ja schonmal was *freu*

Es funktioniert jedoch nicht, wenn man das Bild wie oben beschrieben via TinyMCE und Lightbox-Button oder das Bild als eigenständiges Element einfügt. Bei letzerem wird es so sein - vermute ich zumindest - dass man den Code für die Lupe in ein anderes Template einfügen muss?

Viele Grüße
Jutta

**Toflar** · 15.07.2009, 07:29

Hey Jutta

Das ist sehr gut möglich

Schau dir mal diese geniale Erweiterung von lindesbs an: TemplateInfo

So solltest du ganz easy finden, wo welches Template angesprochen wird

**MacKP** · 15.07.2009, 07:31

Ah, das ist schon mal etwas.
Das Bild via TinyMCE einfügen wird auch nicht mit einer Template Änderung klappen. Zumindest nicht mit einem Template von TL, da dort andere genutzt werden, bzw. da im Tiny ja der Code direkt geschrieben wird....
Nun zu dem einzelnen CE Bild.
Da musst du schätzungsweise das ce_image_fullsize.tpl bearbeiten in system/modules/frontend/templates zu finden.
Die anderen beiden haben das rel="lightbox" nicht so wie ich das im Moment sehe.
Allerdings hätte da bei dir im Quellcode dann irgendwas mit <div class="image_container" stehen müssen, was ich nicht gesehen habe. Aber kann ja sein das du da schon am Template rumgeschraubt hast.

Hoffe das bringt dich weiter.
Viele Grüße

**Juke** · 15.07.2009, 08:12

Zitat von Toflar

Hey Jutta

Das ist sehr gut möglich

Schau dir mal diese geniale Erweiterung von lindesbs an: TemplateInfo

So solltest du ganz easy finden, wo welches Template angesprochen wird

DANKE !! Schon einkassiert und installiert und einfach nur gefreut.

**Juke** · 15.07.2009, 08:24

Zitat von MacKP

Ah, das ist schon mal etwas.
Das Bild via TinyMCE einfügen wird auch nicht mit einer Template Änderung klappen. Zumindest nicht mit einem Template von TL, da dort andere genutzt werden, bzw. da im Tiny ja der Code direkt geschrieben wird....

Ja ist logisch. Aber irgendwo in den Tiefen von Typolight muss dennoch definiert sein, was ausgegeben wird, wenn man den Lightbox-Button klickt. Aber danach zu suchen ist für mich wie Stecknadel im Heuhaufen. Lassen wir das - ist mir zu kompliziert. Weil jedoch imho eine Lupe an sich immer sinnvoll ist, wenn ein Bild mit Lightbox angezeigt wird, erbarmt sich vielleicht irgendwann mal jemand, der das besser kann.

Zitat von MacKP

...
Da musst du schätzungsweise das ce_image_fullsize.tpl bearbeiten in system/modules/frontend/templates zu finden.
Die anderen beiden haben das rel="lightbox" nicht so wie ich das im Moment sehe.

Ich weiß jetzt - Dank eurer Hilfe - wie es prinzipiell geht. Ich werde noch weiter ein bisschen probieren. Voerst habe ich aber bekommen was ich wollte und bin ganz glücklich.

Zitat von MacKP

...
Allerdings hätte da bei dir im Quellcode dann irgendwas mit <div class="image_container" stehen müssen, was ich nicht gesehen habe. Aber kann ja sein das du da schon am Template rumgeschraubt hast.

*lach* -- nee, ich glaub eher, dass es gestern schon a weng schpät war und du den image_container nur nicht gesehen hast. Ich weiß definitiv, dass er da war. Aber: dont't worry, kein Problem.

Ich danke euch recht herzlich für eure Geduld und die vielen Hilfen und Tipps.
Dass ich von TL begeistert bin kann ich nicht oft genug sagen. Hoffe, dass ich bald so weit bin, dass ich was zurückgeben kann.

Einen schönen Tag euch allen - trotz Mistwetter
Viele Grüße
Jutta