Lightbox Bilder mit einer Lupe versehen

Ich denke mir, dass meine Lösung auch mit Lupe machbar ist, ist halt nur ein weiteres SPAN, was dann mit CSS formatiert werden muss. Ich hatte es mit nur gespart, da ich für den Schatten schon 4 extra SPANs pro Bild habe und meine Lupe auch so groß ist. Bei dir mit dieser kleinen Lupe sieht das aber gut aus.

Andreas

danke für deine auskunft
ich werde das dann mal versuchen - muss jetzt nur vorher inhalte einpflegen

sonnengrüße

andi

Hallo Ihr zwei,
ich muss da etwas wiedersprechen. Semantisch gesehen ist eine Bildergalerie schon eine Liste von Bildern zu einem bestimmten Thema.
Man könnte es auch so sehen, das man aus jedem Bild mit Unterschrift (Beschreibung) eine Definitionsliste macht. Auch wieder ne Liste, aber wieder etwas anders.
Semantisch heißt nicht zwangsweise gut aussehen ohne CSS ;-)

Viele Grüße

Ok, ich will da jetzt nicht weiter drauf rumreiten, dann könnte man zwar sagen: 3 Absätze hintereinander sind auch eine Liste, aber egal.

Zum CSS, ich meinte nur, ohne CSS erkennt man eher welche semantische Bedeutung die HTML-Elemente haben. Und wenn man dann so ne Liste sieht mit Listenpunkten davor und einfach nur ein Bild unter dem anderen, das macht auch irgendwie keinen Sinn.

Aber wir sind uns schon einig, dass eine einfache Bildergalerie keine tabellarischen Daten sind (geh ich mal von aus jetzt) :D

Ich hatte da eben keinen Listencharakter erkannt und die Präsentation ein Bild neben dem anderen schien mir am ehesten geeignet.

Gruß Andreas

Zitat:

---

Zitat von Andreas

Zum CSS, ich meinte nur, ohne CSS erkennt man eher welche semantische Bedeutung die HTML-Elemente haben. Und wenn man dann so ne Liste sieht mit Listenpunkten davor und einfach nur ein Bild unter dem anderen, das macht auch irgendwie keinen Sinn.

---

Hallo Andreas,
das macht ja eben Sinn. Das versuche ich gerade zu sagen.
3 Absätze untereinander sind nicht zwangsweise eine Liste.. es kommt eben auf den Inhalt an.
Wenn die 3 Absätze jeweils von Pferden in einem Pferderennen handeln, könnte man das aber auch in einer ol machen. Noch mehr Semantik, indem man die Ordnung auch noch einbringt und dadurch deutlich macht in welcher Reihenfolge die Tiere ins Ziel gelaufen sind.
Man kann mit Listen durch ihre Semantik einfach noch ein wenig mehr Sinn vermitteln.

Ist aber auch eine Frage ob der Aufwand passt bei dem ganzen. Gerade bei einem CMS ist es da nicht so einfach, da man ja so ziemlich alle Templates anpassen müsste um das auch noch zu erreichen. Da stellt sich dann auch die Frage: wie sinnvoll wird das noch sein, wenn da normalsterbliche drann sitzen und die Seite weiterhin pflegen ;-)

Ist nur mal so als Denkanstoß zu sehen meine Anmerkungen. Wie ich finde ein recht spannendes Thema.

Viele Grüße

hallo andreas,

ich habe die "lupe" auf einer website eingesetzt, allerdings gibt es da schwierigkeiten mit dem akkordeon, siehe folgenden thread

https://community.contao.org/de/show...9367#post29367


ich habe nun den verursacher herausgefunden

PHP-Code:

---

div.image_container
{
    position:relative;
}
span.zoom
{
    width:16px;
    height:16px;
    position:absolute;
    display:block;
    background-image:url("tl_files/hydro_layout/zoom_in.png");
    background-repeat:no-repeat;
    text-indent: -9999px;
}
span.zoom
{
    bottom:0;
    right:0;
} 


---

es ist das "position: relative;" des div.image_containers für die lupe

gibt es da eine lösung, dass ich beides verwenden könnte sowohl akkordeon als auch lupe
auf deiner website "frankntone.com" funktioniert es ja

vielleicht hast du einen tipp für mich - danke

Hallo whitestone,

am besten installierst du mal IE8, simulierst damit IE7 und schaust dir das mit den Entwicklertools an. Wenn ich dazu komme schau ich es mir aber mal an und bei Erfolg melde ich mich wieder.

Andreas

danke für deine hilfe

entwicklertolls werde ich installieren

du hast bei "frankntone.com" eine klasse "right" mit dispaly:inline hinzugefügt,
ist das vielleicht die lösung - ich kann aber dem image-container keine klasse mitgeben

oder hast du eventuell dafür das template geändert?

setz mal .ce_accordion { position: relative; }

Ja, ich hab das Template geändert. Ab TL 2.8 brauchst du das aber nicht mehr, dann wird eine Klasse dorthin generiert anstatt inlinestyle. Das Inlinestyle bleibt aber erhalten zwecks Abwärtskompatibilität und out-of-the-box floating.

Andreas

hallo andreas

danke - genau das wars, du hast mir den tag gerettet

ich hoffe, ich kann mich einmal revanchieren, ich bin zwar kein "coder", aber vielleicht in den bereichen design und usability

danke nochmals

sonnengrüße
andi

Hi Andi,

das freut mich. Danke für das Angebot, das ist nett.

Andreas

Da das Thema TL 2.8 kurz angerissen wurde,
die Lupe dort zu verwenden wird ne harte Nuss, oder?
Denn folgende Templates fliegen raus:

Code:

---

ce_gallery_fullsize.tpl
ce_image_fullsize.tpl
ce_image_link.tpl
ce_text_image.tpl
ce_text_image_fullsize.tpl
ce_text_image_link.tpl

---

Es gibt da wohl nur noch ein Template (ce_image.tpl) was wohl immer verwendet wird, der Rest macht dann Javascript.
Ich bin jetzt mal über die Bildunterschrift gegangen die ich sonst nicht nutze.
Habe dort, damit die IF Bedingung erfüllt wird, einen Punkt eingegeben.
Und die Klasse caption dann ein Backround-Image mit der Lupe verpasst und positioniert.
Problem dabei, die Lupe ist nicht mehr innerhalb des a-Tags und somit nicht mehr verlinkt.

Ne andere Idee war, das Template ce_image.tpl um den Eintrag

PHP-Code:

---

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


---

zu erweitert, generell aber unsichtbar schalten, und nur dort wo man es benötigt wieder "scharf" schaltet.

Hat sich jemand damit schon beschäftigt?

Hi BugBuster,

ich hab mir das grad mal kurz angesehen. Was spricht dagegen die erwähnte Zeile nach wie vor in den Templates einzufügen, wie ich auf der ersten Seite erklärt habe? Sind nur andere Templates jetzt. Z.B. ce_text.tpl, da ist das Bild direkt mit drin.

Mit CSS verstecken würd ich nicht empfehlen. Warum nicht $this->fullsize im Template abfragen und wenn "1" dann die Code-Zeile einfügen? Man müsste mal nach 'image_container' in allen Templates suchen um zu sehen wo es nötig wäre.

Andreas

Suchergebnis:

Zitat:

---

system\modules\calendar\templates\event_full.tpl 2,00 KB 13.02.2010 00:58:35
system\modules\faq\templates\mod_faqreader.tpl 4,00 KB 13.02.2010 00:58:28
system\modules\frontend\templates\ce_accordion.tpl 2,00 KB 13.02.2010 00:58:11
system\modules\frontend\templates\ce_hyperlink_ima ge.tpl 1,00 KB 13.02.2010 00:58:11
system\modules\frontend\templates\ce_image.tpl 1,00 KB 13.02.2010 00:58:11
system\modules\frontend\templates\ce_text.tpl 2,00 KB 13.02.2010 00:58:11
system\modules\frontend\templates\gallery_default. tpl 2,00 KB 13.02.2010 00:58:11
system\modules\frontend\templates\mod_random_image .tpl 1,00 KB 13.02.2010 00:58:11
system\modules\news\templates\news_full.tpl 2,00 KB 13.02.2010 00:58:39
system\modules\news\templates\news_latest.tpl 2,00 KB 13.02.2010 00:58:39
system\modules\rep_client\templates\repository_cat view.tpl 12,00 KB 13.02.2010 00:58:20

---

Hallo Andreas,
so tief habe ich mir das noch nicht angesehen.
Sah für mich auf den ersten Blick so aus, als wenn (einzelne) Bilder alle über dasselbe Template laufen würden.
Ich will aber nur bei den Fullsize Bildern die Lupe habe, da kommt deine Idee über $this->fullsize zu gehen schon ganz gut..

Wie gesagt, muss mir das mal etwas genauer ansehen.

Ich würde empfehlen eine Datei inc_zoom.php in den Ordner /templates/ zu legen:

PHP-Code:

---

<?php
  // /templates/inc_zoom.php
  if($this->fullsize == 1) {
    echo '<span title="zoom" class="zoom">zoom</span>';
  }
?>

---

Und dann in den Templates an entsprechender Stelle:

PHP-Code:

---

...
<?php include 'inc_zoom.php'; ?>
...

---

Andreas

oder vielleicht noch besser die Abfrage direkt in den Templates

PHP-Code:

---

<?php
  if($this->fullsize == 1) {
    include 'inc_zoom.php';
  }
?>

---

Die Include Datei dann nur:

PHP-Code:

---

<?php
  // /templates/inc_zoom.php
    echo '<span title="zoom" class="zoom">zoom</span>';
?>

---

Gefällt mir, werd ich gleich mal probieren.
Danke.

Funktioniert prima, musste nur den Pfad noch ergänzen:

PHP-Code:

---

<?php
  if($this->fullsize == 1) {
    include 'templates/inc_zoom.php';
  }
?>

---

Ja super. War mir nicht sicher mit dem Pfad, hatte es nicht ausprobiert, obwohl ich sowas in einigen Projekten mache, immer wenn eine Modifikation in mehreren Templates vorkommt. Da kann man einfach leicht den Code mal ändern, ohne in jedes Template zu gehen.

Ne stop, ich seh grad, ich brauch templates/ nicht davor zu setzen (TL 2.7). Modifizierst du denn die original Templates? Bei mir liegen sowohl die Templates als auch die inc-Dateien im Ordner templates/.

Hm, ich probier mal ohne Pfad (beide Templates sind im /templates Ordner).

Das ja witzig, geht auch ohne Pfad. :cool:

Hallo Andreas und BugBuster,

vielen Dank für eure Mühe! Das hat mir die Suche sehr erleichtert!

LG

Hallo,
auch ich bedanke mich erst einmal für eure Vorarbeit.

Ich hab ein Problem mit "ce_text.tpl". (An allen anderen Stellen funktioniert's super.)
Obwohl ich die Änderung von Andreas wie in allen anderen Templates ergänzt habe funktioniert es dort nicht. Es wird nicht in den generierten Quellcode übernommen.

Hier meine Änderung am Template "ce_text.tpl":

PHP-Code:

---

<div class="image_container<?php echo $this->floatClass; ?>"<?php if ($this->margin || $this->float): ?> style="<?php echo trim($this->margin . $this->float); ?>"<?php endif; ?>>
<?php if ($this->href): ?>
<a href="<?php echo $this->href; ?>"<?php echo $this->attributes; ?> title="<?php echo $this->alt; ?>">
<?php endif; ?>
<img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" />
<?php
  if($this->fullsize == 1) {
    include 'inc_zoom.php';
  }
?>
<?php if ($this->href): ?>
</a>

---

Gruß vega

Hallo Vega,
also ich hatte mit

Code:

---

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

---

kein Erfolg. Das ist immer '1' wenn ein Bild eingefügt wird. Allerdings klappt das so:

ce_text.tpl direkt hinter <img /> dann

Code:

---

<?php if($this->fullsize==1){include 'inc_zoom.php';}?>

---

Hast du ja eigentlich auch so.

Gruß :D

Zitat:

---

Zitat von dake

...Das ist immer '1' wenn ein Bild eingefügt wird....

---

Ja, du hast vollkommen Recht. Ich benutze dort immer die Lupe, deswegen hatte ich das wohl so gemacht.

@vega
Liegen sowohl ce_text.tpl als auch inc_zoom.php im selben Ordner, und zwar root/templates/?

@andreas
Ja beide Dateien sind im selben Ordner.

Funktioniert nur nicht bei Bildern die über den Tiny Editor eingefügt werden. Ist also nicht so schlimm aber wenns funktionieren würde auch nicht schlecht! ;-)

Bei den Templates "mod_glossary_list.tpl" & "gallery_default.tpl" hab ich z.B. "<span><small>zoom</small></span>" direkt eingefügt.

PHP-Code:

---

<?php if ($term['fullsize']): ?>
<span><small>zoom</small></span></a><?php endif; ?>

---

Funktioniert soweit super! Gibts hierfür noch ne elegantere Lösung?

Es geht auch mit folgender inc_zoom.php, allerdings habe ich span durch div ersetzt, dann funktioniert das postionieren über CSS auch im IE, so steht dann die Lupe rechts unten im Bild:

PHP-Code:

---

<?php
  // /templates/inc_zoom.php
  if($this->fullsize == 1) {
    echo '<div title="zoom" class="zoom"><img src="tl_files/.../lupe.png"><div>';
  }
?>

---

... und dann das Template "ce_text.tpl" wie oben (hinter <img />) beschrieben ergänzen.

CSS:

.zoom
{
left:65px; ------> je nach Größe des Bildes anpassen
position:relative;
margin-top:-20px; ----> hier muss ein negativer Wert stehen

}

wollte die lupe in das template "gallery_default" einbinden, aber bei mir funktioniert if-abfrage nicht

lupe funktioniert:
- wenn ich <?php include 'inc_zoom.php'; ?> direkt einbinde
- wenn ich den inhalt der inc_zoom.php direkt ins template schreibe

muss ich sonst noch etwas berücksichtigen, damit die if-abfrage funktioniert?

danke für eure hilfe

andi

Zitat:

---

Zitat von Georgi

...allerdings habe ich span durch div ersetzt, dann funktioniert das postionieren über CSS auch im IE...

---

Hallo Georgi,

ich hatte mit Absicht SPAN gewählt, weil ich ohne CSS ein Inline-Element haben wollte. Natürlich habe ich das SPAN so formatiert, dass es sich mit CSS wie ein DIV verhält.

Code:

---

.zoom { display: block; }

---

Hier noch ein paar grobe Tips fürs Formatieren des DIVs .image_container

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

Zitat:

---

Zitat von whitestone

...bei mir funktioniert if-abfrage nicht

---

Hallo andi,

prüfe, ob dir das Template die Variable $this->fullsize liefert.

Gruß

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