Pfad zum Bild

Bitte alle templatebezogenen Beiträge in diesem Forum veröffentlichen.
Post Reply
User avatar
Uwe367
Posts: 1206
Joined: Sat 15. Sep 2007, 07:19
Location: Koblenz

Pfad zum Bild

Post by 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:
Image

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?
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: Pfad zum Bild

Post by 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;}
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
Uwe367
Posts: 1206
Joined: Sat 15. Sep 2007, 07:19
Location: Koblenz

Re: Pfad zum Bild

Post by Uwe367 »

Na das werd ich doch gleich mal ausprobieren.
Vielen Dank :D

[EDIT]
Ja geil Oliver. Das klappt ja besser als ich dachte. Vielen vielen Dank für die Lösung :D
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]
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: Pfad zum Bild

Post by 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…
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
Uwe367
Posts: 1206
Joined: Sat 15. Sep 2007, 07:19
Location: Koblenz

Re: Pfad zum Bild

Post by Uwe367 »

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

[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]
Post Reply