Lightbox Bilder mit einer Lupe versehen
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;}
Liste der Anhänge anzeigen (Anzahl: 1)
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;
}
Liste der Anhänge anzeigen (Anzahl: 2)
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
Liste der Anhänge anzeigen (Anzahl: 2)
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?
Liste der Anhänge anzeigen (Anzahl: 1)
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
Super Tipp für bessere Usability ..
Wow, danke Juke .. :)
daran hatte ich mir einst wochenlang die Zähne ausgebissen und erst noch ohne Erfolg .. :cool:
Gruss
cy
Liste der Anhänge anzeigen (Anzahl: 1)
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