Ergebnis 1 bis 29 von 29

Thema: Lightbox mit Lupe

  1. #1
    Contao-Fan Avatar von Juke
    Registriert seit
    09.07.2009.
    Ort
    Ludwigsburg
    Beiträge
    293
    Partner-ID
    4860

    Standard Lightbox mit Lupe

    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
    Geändert von Juke (11.07.2009 um 22:53 Uhr)

  2. #2
    AG Core-Entwicklung Avatar von Psi
    Registriert seit
    19.06.2009.
    Ort
    Mittelfranken
    Beiträge
    930
    Partner-ID
    5583
    User beschenken
    Wunschliste

    Standard

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

  3. #3
    Contao-Fan Avatar von Juke
    Registriert seit
    09.07.2009.
    Ort
    Ludwigsburg
    Beiträge
    293
    Partner-ID
    4860

    Standard

    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

  4. #4
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    7.376
    Partner-ID
    152
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard Sollte doch so gehen:

    Probier doch mal:

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

  5. #5
    Contao-Fan Avatar von joe
    Registriert seit
    20.06.2009.
    Ort
    Lüneburg
    Beiträge
    687
    User beschenken
    Wunschliste

    Standard

    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

  6. #6
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    7.376
    Partner-ID
    152
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.

  7. #7
    Contao-Fan Avatar von joe
    Registriert seit
    20.06.2009.
    Ort
    Lüneburg
    Beiträge
    687
    User beschenken
    Wunschliste

    Standard

    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

  8. #8
    Contao-Fan Avatar von Juke
    Registriert seit
    09.07.2009.
    Ort
    Ludwigsburg
    Beiträge
    293
    Partner-ID
    4860

    Standard

    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

  9. #9
    Contao-Fan Avatar von joe
    Registriert seit
    20.06.2009.
    Ort
    Lüneburg
    Beiträge
    687
    User beschenken
    Wunschliste

    Standard

    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?

  10. #10
    Contao-Fan Avatar von Juke
    Registriert seit
    09.07.2009.
    Ort
    Ludwigsburg
    Beiträge
    293
    Partner-ID
    4860

    Daumen hoch

    Jaaa! Genau das meinte ich - DANKE !!

  11. #11
    Contao-Fan Avatar von Juke
    Registriert seit
    09.07.2009.
    Ort
    Ludwigsburg
    Beiträge
    293
    Partner-ID
    4860

    Frage

    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*
    Geändert von Juke (14.07.2009 um 13:23 Uhr)

  12. #12
    Contao-Urgestein Avatar von Toflar
    Registriert seit
    15.06.2009.
    Beiträge
    4.468
    Partner-ID
    8667
    User beschenken
    Wunschliste

    Standard

    1. Was ist das für ein Pfad?
    2. Es heisst "alt" nicht "al"
    Contao Core-Entwickler @terminal42 gmbh
    Wir sind Contao Premium-Partner!
    Für Individuallösungen kannst du uns gerne kontaktieren.
    PS: Heute schon getrakked?

  13. #13
    Contao-Fan Avatar von Juke
    Registriert seit
    09.07.2009.
    Ort
    Ludwigsburg
    Beiträge
    293
    Partner-ID
    4860

    Standard

    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.

  14. #14
    Contao-Urgestein Avatar von Toflar
    Registriert seit
    15.06.2009.
    Beiträge
    4.468
    Partner-ID
    8667
    User beschenken
    Wunschliste

    Standard

    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
    Contao Core-Entwickler @terminal42 gmbh
    Wir sind Contao Premium-Partner!
    Für Individuallösungen kannst du uns gerne kontaktieren.
    PS: Heute schon getrakked?

  15. #15
    Contao-Fan Avatar von Juke
    Registriert seit
    09.07.2009.
    Ort
    Ludwigsburg
    Beiträge
    293
    Partner-ID
    4860

    Standard

    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

  16. #16
    Contao-Fan Avatar von Nils Riel
    Registriert seit
    19.06.2009.
    Beiträge
    730

    Standard

    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.

  17. #17
    Contao-Fan Avatar von Juke
    Registriert seit
    09.07.2009.
    Ort
    Ludwigsburg
    Beiträge
    293
    Partner-ID
    4860

    Standard

    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.

  18. #18
    Contao-Urgestein Avatar von Toflar
    Registriert seit
    15.06.2009.
    Beiträge
    4.468
    Partner-ID
    8667
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von Nils Riel Beitrag anzeigen
    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?
    Contao Core-Entwickler @terminal42 gmbh
    Wir sind Contao Premium-Partner!
    Für Individuallösungen kannst du uns gerne kontaktieren.
    PS: Heute schon getrakked?

  19. #19
    Contao-Fan Avatar von Nils Riel
    Registriert seit
    19.06.2009.
    Beiträge
    730

    Standard

    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.

  20. #20
    Contao-Urgestein Avatar von Toflar
    Registriert seit
    15.06.2009.
    Beiträge
    4.468
    Partner-ID
    8667
    User beschenken
    Wunschliste

    Standard

    Ist eben auch nicht der Hit
    Contao Core-Entwickler @terminal42 gmbh
    Wir sind Contao Premium-Partner!
    Für Individuallösungen kannst du uns gerne kontaktieren.
    PS: Heute schon getrakked?

  21. #21
    Contao-Fan Avatar von Juke
    Registriert seit
    09.07.2009.
    Ort
    Ludwigsburg
    Beiträge
    293
    Partner-ID
    4860

    Standard

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

  22. #22
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.293
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  23. #23
    Contao-Fan Avatar von Juke
    Registriert seit
    09.07.2009.
    Ort
    Ludwigsburg
    Beiträge
    293
    Partner-ID
    4860

    Standard

    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
    Geändert von Juke (15.07.2009 um 09:27 Uhr)

  24. #24
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.293
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  25. #25
    Contao-Fan Avatar von Juke
    Registriert seit
    09.07.2009.
    Ort
    Ludwigsburg
    Beiträge
    293
    Partner-ID
    4860

    Daumen hoch

    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

  26. #26
    Contao-Urgestein Avatar von Toflar
    Registriert seit
    15.06.2009.
    Beiträge
    4.468
    Partner-ID
    8667
    User beschenken
    Wunschliste

    Standard

    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
    Contao Core-Entwickler @terminal42 gmbh
    Wir sind Contao Premium-Partner!
    Für Individuallösungen kannst du uns gerne kontaktieren.
    PS: Heute schon getrakked?

  27. #27
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.293
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  28. #28
    Contao-Fan Avatar von Juke
    Registriert seit
    09.07.2009.
    Ort
    Ludwigsburg
    Beiträge
    293
    Partner-ID
    4860

    Standard

    Zitat Zitat von Toflar Beitrag anzeigen
    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.

  29. #29
    Contao-Fan Avatar von Juke
    Registriert seit
    09.07.2009.
    Ort
    Ludwigsburg
    Beiträge
    293
    Partner-ID
    4860

    Standard

    Zitat Zitat von MacKP Beitrag anzeigen
    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 Zitat von MacKP Beitrag anzeigen
    ...
    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 Zitat von MacKP Beitrag anzeigen
    ...
    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

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Ähnliche Themen

  1. Lightbox Bilder mit einer Lupe versehen
    Von Juke im Forum Modifizierte Templates
    Antworten: 84
    Letzter Beitrag: 30.05.2013, 17:33
  2. Lightbox Bildergruppen rel="lightbox[lb2]" Problem
    Von psren im Forum Bilder/Dateien
    Antworten: 3
    Letzter Beitrag: 18.02.2011, 22:27
  3. Suchformular -> Lupe als Submit-Button im Suchformular
    Von freak_me11 im Forum Formulare
    Antworten: 11
    Letzter Beitrag: 30.01.2011, 19:10
  4. Suchen - Feld (Lupe) - falsche Darstellung im Internet Explorer 7
    Von wolpert im Forum Layout / Templates / Holy Grail
    Antworten: 3
    Letzter Beitrag: 19.08.2010, 12:42
  5. Suche mit Lupe
    Von ZOOTV im Forum Allgemeine Inhaltselemente
    Antworten: 5
    Letzter Beitrag: 03.05.2010, 23:02

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •