@@ -5,6 +5,7 @@ It supports automatic or manual opening and grouping of images.
55
66Not only images, but also Videos, YouTube Videos, PDFs, HTML, [ ...] ( https://fancyapps.com/fancybox/ ) are supported and can be displayed in the modal.
77The appropriate ` data-type ` can be set, the system tries to determine this if it has not been set.
8+ You must include the ` data-type ` property when showing images that are generated through ` data-src ` URLS that end in ` .php ` or ` .html ` .
89For example, the following can be used:
910
1011- ` image ` - Image
@@ -18,15 +19,15 @@ For example, the following can be used:
1819The following code example adds an image to the global modal and groups it with all other images that are not explicitly grouped:
1920
2021``` smarty
21- <a href="{$imageLink}" data-caption="{$caption}" data-fancybox>
22+ <a href="{$imageLink}" data-caption="{$caption}" data-type="image" data- fancybox>
2223 <img src="{$thumbnailUrl}" width="…" height="…" alt="">
2324</a>
2425```
2526
2627If you want to display several images in a group, you can group them using the ` data-fancybox ` attribute. Images with the same group name are then displayed together:
2728
2829``` smarty
29- <a href="{$imageLink}" data-caption="{$caption}" data-fancybox="fooBar">
30+ <a href="{$imageLink}" data-caption="{$caption}" data-type="image" data- fancybox="fooBar">
3031 <img src="{$thumbnailUrl}" width="…" height="…" alt="">
3132</a>
3233```
@@ -72,14 +73,14 @@ final class FooBBCode extends AbstractBBCode
7273```
7374
7475``` smarty title="shared_bbcode_foo.tpl"
75- <a href="{$imageLink}" data-caption="{$caption}" data-fancybox="message-{$activeMessageObjectType}-{$activeMessageObjectID}">
76+ <a href="{$imageLink}" data-caption="{$caption}" data-type="image" data- fancybox="message-{$activeMessageObjectType}-{$activeMessageObjectID}">
7677 <img src="{$thumbnailUrl}" width="…" height="…" alt="">
7778</a>
7879```
7980
8081## Open Image Viewer Manually
8182
82- The Image Viewer can also be created dynamically using the function ` WoltLabSuite/Core/Component/Image/Viewer::createFancybox () ` .
83+ The Image Viewer can also be created dynamically using the function ` WoltLabSuite/Core/Component/Image/Viewer::showFancybox () ` .
8384The contents of the modal are passed directly to the function.
8485
8586### Example
@@ -91,9 +92,9 @@ The following code example creates a button that opens the Image Viewer with two
9192<button type =" button" id =" openImageViewer" >Open Image Viewer</button >
9293
9394<script data-relocate =" true" >
94- require ([' WoltLabSuite/Core/Component/Image/Viewer' ], ({ createFancybox }) => {
95+ require ([' WoltLabSuite/Core/Component/Image/Viewer' ], ({ showFancybox }) => {
9596 document .getElementById (" openImageViewer" ).addEventListener (" click" , () => {
96- void createFancybox ([
97+ showFancybox ([
9798 {
9899 src: " https://example.com/image1.jpg" ,
99100 caption: " Image 1" ,
0 commit comments