Pfad zum Bild

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

Pfad zum Bild

Postby Uwe367 » Sun 20. Aug 2017, 17:30

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: 9396
Joined: Fri 3. Oct 2003, 22:22
Location: Dessau
Contact:

Re: Pfad zum Bild

Postby Oliver Georgi » Sun 20. Aug 2017, 20:05

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: 797
Joined: Sat 15. Sep 2007, 07:19
Location: Koblenz

Re: Pfad zum Bild

Postby Uwe367 » Sun 20. Aug 2017, 20:17

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: 9396
Joined: Fri 3. Oct 2003, 22:22
Location: Dessau
Contact:

Re: Pfad zum Bild

Postby Oliver Georgi » Mon 21. Aug 2017, 03:57

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: 797
Joined: Sat 15. Sep 2007, 07:19
Location: Koblenz

Re: Pfad zum Bild

Postby Uwe367 » Mon 21. Aug 2017, 05:53

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]


Return to “phpwcms Templates Deutsch”

Who is online

Users browsing this forum: No registered users and 1 guest