Lightbox Bilder mit einer Lupe versehen

danke für den hinweis

ich bin aber überfordert mit der prüfung
wie mache ich das?

das template ist das standard-template "gallery default"
contao 2.8.3 - hab ich vergessen

danke

andi

PHP-Code:

---

<?php $this->showTemplateVars(); ?>

---

Im Template oben eintragen. Danach am besten im HTML-Quelltext ansehen.

danke andreas
habe es in der zwischenzeit einfach auf gut glück probiert

PHP-Code:

---

    [sPosition] => before
    [layout] => DB_Mysql_Result Object
        (
            [resResult:protected] => Resource id #92
            [strQuery:protected] => SELECT * FROM tl_layout WHERE id='26' LIMIT 0,1
            [intIndex:private] => 0
            [intRowIndex:private] => 0
            [blnDone:private] => 
            [blnModified:private] => 
            [arrCache:protected] => Array
                (
                    [0] => Array
                        (
                            [id] => 26
                            [tstamp] => 1276261927
                            [name] => hydro_menschen
                            [fallback] => 
                            [header] => 1
                            [headerHeight] => a:2:{s:4:"unit";s:2:"px";s:5:"value";s:3:"282";}
                            [footer] => 1
                            [footerHeight] => a:2:{s:4:"unit";s:0:"";s:5:"value";s:0:"";}
                            [cols] => 3cl
                            [widthLeft] => a:2:{s:4:"unit";s:0:"";s:5:"value";s:0:"";}
                            [widthRight] => a:2:{s:4:"unit";s:0:"";s:5:"value";s:0:"";}
                            [sections] => a:1:{i:0;s:15:"slogan_quicknav";}
                            [sPosition] => before
                            [stylesheet] => a:13:{i:0;s:1:"1";i:1;s:1:"4";i:2;s:1:"2";i:3;s:1:"6";i:4;s:1:"7";i:5;s:1:"8";i:6;s:1:"9";i:7;s:2:"10";i:8;s:2:"17";i:9;s:2:"20";i:10;s:2:"24";i:11;s:2:"25";i:12;s:2:"27";}
                            [newsfeeds] => 
                            [calendarfeeds] => 
                            [modules] => a:9:{i:0;a:2:{s:3:"mod";s:2:"45";s:3:"col";s:6:"header";}i:1;a:2:{s:3:"mod";s:1:"1";s:3:"col";s:6:"header";}i:2;a:2:{s:3:"mod";s:1:"2";s:3:"col";s:4:"left";}i:3;a:2:{s:3:"mod";s:1:"7";s:3:"col";s:5:"right";}i:4;a:2:{s:3:"mod";s:2:"52";s:3:"col";s:5:"right";}i:5;a:2:{s:3:"mod";s:1:"0";s:3:"col";s:4:"main";}i:6;a:2:{s:3:"mod";s:2:"29";s:3:"col";s:6:"footer";}i:7;a:2:{s:3:"mod";s:2:"49";s:3:"col";s:15:"slogan_quicknav";}i:8;a:2:{s:3:"mod";s:2:"51";s:3:"col";s:15:"slogan_quicknav";}}
                            [template] => fe_page_menschen
                            [doctype] => xhtml_strict
                            [mootools] => a:2:{i:0;s:12:"moo_mediabox";i:1;s:13:"moo_close_all";}
                            [urchinId] => 
                            [cssClass] => 
                            [onload] => TauscheBild()
                            [head] => <!--[if lte IE 7]><script type="text/javascript" src="tl_files/clean_blue/js/IE8.js"></script><![endif]--> 
                            [static] => 
                            [width] => a:2:{s:4:"unit";s:2:"px";s:5:"value";s:3:"960";}
                            [align] => center
                            [script] => 
                        )
 
                )
 
        )
 
    [language] => de
    [charset] => UTF-8
    [base] => http://127.0.0.1:8888/hydro/
    [mainTitle] => Hydro Ingenieure
    [pageTitle] => Menschen mit Weitblick zu klaren Lösungen in der Umwelttechnik - Team mit Fachwissen
    [title] => Hydro Ingenieure - Menschen mit Weitblick zu klaren Lösungen in der Umwelttechnik - Team mit Fachwissen
    [description] => Hydro Ingenieure Umwelttechnik - Team mit interdiszipliären Fachwissen für klare Lösungen
    [onload] => TauscheBild()
    [class] => 
    [mootools] => 
<script type="text/javascript" src="plugins/mediabox/js/mediabox.js"></script> 
<script type="text/javascript"> 
<!--//--><![CDATA[//><!--
Mediabox.scanPage = function() {
  var links = $$("a").filter(function(el) {
    return el.rel && el.rel.test(/^lightbox/i);
  });
  $$(links).mediabox({/* Put custom options here */}, null, function(el) {
    var rel0 = this.rel.replace(/[[]|]/gi," ");
    var relsize = rel0.split(" ");
    return (this == el) || ((this.rel.length > 8) && el.rel.match(relsize[1]));
  });
};
window.addEvent("domready", Mediabox.scanPage);
//--><!]]>
</script> 
 
<script type="text/javascript"> 
<!--//--><![CDATA[//><!--
window.addEvent('domready', function()
{
    new Accordion($$('div.toggler'), $$('div.accordion'),
    {
        display: false,
        alwaysHide: true,
        opacity: false,
        onActive: function(tog){
            tog.addClass('active_ak');
        },
        onBackground: function(tog){
            tog.removeClass('active_ak');
        }
    });
});
//--><!]]>
</script> 
 
    [stylesheets] => <link rel="stylesheet" href="system/modules/TemplateInfo/html/templateinfo.css" type="text/css" media="all" /> 
<link rel="stylesheet" href="plugins/mediabox/css/mediabox_white_black.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="basic.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="form.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="layout_reserve.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="content.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="modules.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="events.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="info.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="hydro.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="layout.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="navigation.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="bildergalerie.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="lupe_span.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="toggler.css" type="text/css" media="screen" /> 
 
    [head] => <script type="text/javascript" src="system/modules/TemplateInfo/html/templateinfo.js"></script> 
<!--[if lte IE 7]><script type="text/javascript" src="tl_files/clean_blue/js/IE8.js"></script><![endif]--> 
 
    [keywords] => Hydro Ingenieure, Mitarbeiter, Team, Fachwissen, Weitblick, Lösungen
) 


---

allerdings kann ich es nicht deuten

ich glaub , ich hab da einen fehler gemacht

habe jetzt die variablen im "gallery-template" abgefragt

PHP-Code:

---

Array
(
    [body] => Array
        (
            [row_0 row_last even] => Array
                (
                    [0] => stdClass Object
                        (
                            [width] => 600
                            [height] => 450
                            [arrSize] => Array
                                (
                                    [0] => 254
                                    [1] => 191
                                    [2] => 2
                                    [3] => width="254" height="191"
                                    [bits] => 8
                                    [channels] => 3
                                    [mime] => image/jpeg
                                )
 
                            [imgSize] =>  width="254" height="191"
                            [href] => tl_files/hydro_inhalt/hydro_referenzen/hundsheim/hundsheim.jpg
                            [attributes] =>  rel="lightbox[lb762]"
                            [src] => system/html/hundsheim-49808fc1.jpg
                            [alt] => Erste Bewehrungsprobe im Juni 2009
                            [fullsize] => 1
                            [addBefore] => 1
                            [margin] => 
                            [caption] => 
                            [addImage] => 1
                            [colWidth] => 50%
                            [class] => col_0 col_first
                        )
 
                    [1] => stdClass Object
                        (
                            [width] => 600
                            [height] => 450
                            [arrSize] => Array
                                (
                                    [0] => 254
                                    [1] => 191
                                    [2] => 2
                                    [3] => width="254" height="191"
                                    [bits] => 8
                                    [channels] => 3
                                    [mime] => image/jpeg
                                )
 
                            [imgSize] =>  width="254" height="191"
                            [href] => tl_files/hydro_inhalt/hydro_referenzen/hundsheim/hundsheim_bau.jpg
                            [attributes] =>  rel="lightbox[lb762]"
                            [src] => system/html/hundsheim_bau-1830b54b.jpg
                            [alt] => Montage der Bewehrungskörbe
                            [fullsize] => 1
                            [addBefore] => 1
                            [margin] => 
                            [caption] => 
                            [addImage] => 1
                            [colWidth] => 50%
                            [class] => col_1 col_last
                        )
 
                )
 
        )
 
    [headline] => 
) 


---

und das schreibt er " [fullsize] => 1 "

wenn ich keine großansicht im artikel eingebe, dann kommt folgende ausgabe

PHP-Code:

---

    [body] => Array
        (
            [row_0 row_last even] => Array
                (
                    [0] => stdClass Object
                        (
                            [width] => 600
                            [height] => 450
                            [arrSize] => Array
                                (
                                    [0] => 254
                                    [1] => 191
                                    [2] => 2
                                    [3] => width="254" height="191"
                                    [bits] => 8
                                    [channels] => 3
                                    [mime] => image/jpeg
                                )
 
                            [imgSize] =>  width="254" height="191"
                            [src] => system/html/maria_taferl_tiefbrunnen-471e08fd.jpg
                            [alt] => Tiefbrunnen Steinbachwiese mit Wasseraufbereitung
                            [fullsize] => 
                            [addBefore] => 1
                            [margin] => 
                            [caption] => 
                            [addImage] => 1
                            [colWidth] => 50%
                            [class] => col_0 col_first
                        )
 
                    [1] => stdClass Object
                        (
                            [width] => 600
                            [height] => 450
                            [arrSize] => Array
                                (
                                    [0] => 254
                                    [1] => 191
                                    [2] => 2
                                    [3] => width="254" height="191"
                                    [bits] => 8
                                    [channels] => 3
                                    [mime] => image/jpeg
                                )
 
                            [imgSize] =>  width="254" height="191"
                            [src] => system/html/maria_taferl_enteisung-bd8258ac.jpg
                            [alt] => Enteisenungs- und Entmanganungsanlage
                            [fullsize] => 
                            [addBefore] => 1
                            [margin] => 
                            [caption] => 
                            [addImage] => 1
                            [colWidth] => 50%
                            [class] => col_1 col_last
                        )
 
                )
 
        )
 
    [headline] => 
) 


---

sowie ich das sehe gibt das gallery-template die "richtige" variable aus

danke nochmals für hilfreiche tipps

andi

Hallo zusammen,

in Contao habe ich im Template "ce_text.tpl" innerhalb des Bildlinks folgenden Code eingefügt:

HTML-Code:

---

<?php if ($this->attributes): ?><img id="lupe" src="tl_files/meinOrdner/lupe.png" alt="Bild vergrößern" /><?php endif; ?>

---

Somit erscheint die Lupe, sobald ein Attribut (Lightbox) vergeben wird, ansonsten eben nicht. Funktioniert vielleicht nicht in allen Fällen, aber in meiner Anwendung reicht es aus, da das Attribut nur bei Verwendung der Lightbox bzw. Mediabox erscheint.

Gruß,
Andreas

Hallo zusammen,

die Idee ist sehr nützlich, der Thread war echt hilfreich, danke Euch!

Nutze das Ganze in Contao 2.9.1 mit gallery und habe für Diese die 'gallery_default.tpl' wie von comanche bereits ähnlich beschrieben wie folgt angepasst:

PHP-Code:

---

<?php if ($col->attributes): ?>
<img id="magnifier" src="tl_files/lupe.png" alt="Lupe" />
<?php endif; ?>

---

Viele Grüsse! Anja

Zitat:

---

Zitat von Andreas

Code:

---

.zoom { display: block; }
/* folgendes erleichtert Positionierung und Ausrichtung */
.image_container img,
.image_container a {
  display: block;
}
/* kein Leerzeichen zwischen den beiden Klassen-Selektoren */
.image_container.float_right { margin: ...; }
/* äußerer Container auf relative, damit die Elemente darin absolut zu ihm poitioniert werden können */
.image_container { position: relative; }
.zoom {
  position: absolute;
  right: 5px;
  bottom: 5px;
}

---

Andreas

---

Funktioniert das bei dir auch Einwandfrei, wenn bilder eine "bildunterschrift" verwenden? :)
also manche ja, manche nein.. wie z.B begriff wie "abbildung 1, die ja häufig notwendig sind

schöner wäre, wenn die lupe als wasserzeichen platziert werden könnte, dafür verzichte ich dann auch gern auf title tag als "Zoom" usw...das bild sagt ja genug aus

gruss
ways

Gibt es sowas nicht als Erweiterung? Ich finde den Bildzoom als eine geniale und zentrale Funktion von Contao. Wenn man bei jedem Bild wählen könnte, ob mit oder ohne Zoom-Icon, wäre das natürlich komfortabel - nicht nur für den Redaktor, sondern auch für den Besucher.

Danke für die Idee mit der Lupe. Noch ein kleiner Tip: sobald im Backend eine URL in das Feld "Bildlink-Adresse" eingegeben wird, ändert sich die Bedeutung der Checkbox von "Großansicht" zu "Neues Fenster": es wird die Url aufgerufen, aber nicht mehr das Bild vergrößert. Dann sollte natürlich auch keine Lupe mehr gezeigt werden. Deshalb sollte man auch noch $this->imageUrl abfragen. Hier am Beispiel von 2.9.5 ce_text.tpl:

PHP-Code:

---

--- ce_text.tpl.ORIGNINAL    Mi 25. Mai 23:52:28 2011
+++ ce_text.tpl    Mi 25. Mai 23:50:10 2011
@@ -16,6 +16,7 @@
 <?php endif; ?>
 <img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" />
 <?php if ($this->href): ?>
+<?php if ($this->fullsize && !$this->imageUrl) { echo '<span title="zoom" class="zoom">zoom</span>'; } ?>
 </a>
 <?php endif; ?>
 <?php if ($this->caption): ?>

---

Und vermutlich könnte man sich auch noch die Abfrage auf $this->fullsize sparen, wenn man die Templateänderung innerhalb des if ($this->href) macht, wie oben gezeigt. Denn ein href wird nur erzeugt, wenn nötig, also entweder für die LightBox oder einen Bild-Link (ich habe es drin gelassen, es schadet ja nicht wirklich).

LG, Georg

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

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

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.

Zitat:

---

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.

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.