Pfad zum Bild

[Uwe367]

Hallo allerseits.
Ich habe mittels CSS ein Lupenicon in die Miniaturbilder eingebaut so daß wirklich JEDER sehen kann daß diese per Klick zu vergrößern sind. Das ganze habe ich in einem Template für den CP Bilder< div > untergebracht und ist derzeit zu Versuchszwecken noch als style-Anweisung eingebaut.
So sieht das ganze bisher aus:


Da das Lupenicon aber nur ein Bild ist, welches mittles CSS über das andere gelegt wird, hat es logischerweise keinen Link zu dem größeren Bild. Welchen RT muß ich vewenden um dem Lupenicon den Link zu dem großen Bild zu geben so daß sich dieses dann auch in der Lightbox öffnet?

[Oliver Georgi]

Es ist vollkommen überflüssig, dies per zusätzlichem HTML-Tag zu realisieren. Sinnvoller ist es, das an den Link selbst zu koppeln per reinem CSS.

Üblicherweise hat Dein Link eine Klasse, z.B. <a href class="zoom">…</a>

Ich würde sowas ja z.B. mittels FontAwesome oder SVG realisieren. Also z.B.:

Code: Select all

a.zoom {position: relative; display: inline-block;}
a.zoom:after {position: absolute; left: 5px; bottom: 5px; content: url(zoom.svg); opacity: 0.5;}
a.zoom:hover:after {opacity: 1;}

[Uwe367]

Na das werd ich doch gleich mal ausprobieren.
Vielen Dank

[EDIT]
Ja geil Oliver. Das klappt ja besser als ich dachte. Vielen vielen Dank für die Lösung
Habe das etwas abgewandelt und das läuft wunderbar.

Einfachste Lösung hierfür war das ganze im CP Bilder Spezial aufzubauen da hier schon der ZOOM-RT werkelt.
Also hab ich das ganze einfach so gemacht:

Code: Select all

<!--IMAGES_ENTRY_START//-->
[ZOOM]<a class="zoom" href="{IMAGE_ABS}" {LIGHTBOX_CAPTION}target="_blank"{LIGHTBOX}><img src="{THUMB_ABS}" alt="{THUMB_NAME}" border="0" /></a>		
[/ZOOM][ZOOM_ELSE]
[IMAGE_URL]<a href="{IMAGE_URL}"{IMAGE_TARGET}>[/IMAGE_URL]<img src="{THUMB_ABS}" alt="{THUMB_NAME}" border="0" />[IMAGE_URL]</a>[/IMAGE_URL]
[/ZOOM_ELSE]
<!--IMAGES_ENTRY_END//-->

und das läuft prima.

Im CP BIlder< div > funktioniert diese Lösung allerdings nicht da das Bild trotz aktivierter Lightbox nicht in selbiger geöffnet wird.

[/EDIT]

[Oliver Georgi]

Das funktioniert auch in Bilder <div> – versuchs mal mit folgendem CSS Selektor: a[rel^=lightbox], anstatt a.zoom.

Es existieren noch x andere Wege, aber das führt hier zu weit…

[Uwe367]

Probiere ich morgen Abend mal aus, früher komme ich nicht dazu. Danke

[EDIT]
Und auch das funktioniert natürlich. Ich habe das so gemacht und ich hoffe es ist einigermaßen ok.

Code: Select all

<a href="{IMAGE_ABS}" rel="lightbox"><img src="{THUMB_ABS}" alt="{THUMB_NAME}" border="0" /></a>

[/EDIT]