Feature #23528
closedAllow easy use of lightbox style image enlargement in the frontend
0%
Description
At the moment the click-enlarge feature for images is implemented as good ol' popup window and without deeper knowledge of css styled contents workings it is pretty hard to change this to a lightbox style image enlargement (changing css classes and rel attribute).
This patch implements an easier way by offering three new constants:
Lightbox click-enlarge rendering -> Whether or not lightbox rendering is enabled
Lightbox CSS class -> the CSS class to use in the image link
Lightbox rel="" attribute -> the rel="" attribute to use
This enables the user to get lightbox compliant rendering by changing these constants for the following lightbox scripts:
CeeBox, ColorBox, Facebox, Lightbox, Lightbox+, Lightbox2, Lighter Box 2, LightWindow 2, Lytebox, mediaboxadvanced, Milkbox, nyroModal, Pirobox, PrettyPhoto, Slightly ThickerBox, Slimbox2, Thickbox, TopUp
(I did only test CeeBox, Colorbox, Lightbox2, nyroModal and Thickbox, but from the documentation the others should work as well)
Documentation for new properties:
CSS Styled Content:
Constants > styles.content.imgtext.linkWrap:
Property: lightboxEnabled
Datatype: string
Description: If set, images will be rendered with a link to their big version and a specified css class and rel attribute to easily allow the use of lightboxes
Default: 0
Property:lightboxCssClass
Datatype: string
Description: Which CSS class to use for lightbox links (only applicable if lightbox rendering is enabled)
Default: lightbox
Property: LightboxRelAttribute
Datatype: string
Description: Which rel="" attribute to use for lightbox links (only applicable if lightbox rendering is enabled)
Default: lightbox[{field:uid}]
TSRef:
imageLinkWrap:
Change datatype of JSwindow to "boolean / stdWrap"
Add property:
Property: directImageLink
Datatype: boolean
Description: If true, a link to the generated image file will be returned directly (showpic.php is not used)
Add property:
Property: linkParams
Datatype: typolink
Description: Allows the manipulation of the generated typolink if JSwindow is not used. Example:
linkParams.ATagParams.dataWrap = class="{$styles.content.imgtext.linkWrap.lightboxCssClass}" rel="{$styles.content.imgtext.linkWrap.lightboxRelAttribute}"
(issue imported from #M15689)
Files