Merge pull request #523 from WoltLab/6.2-fancyapps-v6

Document image view with compatibility to `@fancyapps/ui` v6

Author: Cyperghost

docs/javascript/components_image_viewer.md

@@ -5,6 +5,7 @@ It supports automatic or manual opening and grouping of images.
 
 Not only images, but also Videos, YouTube Videos, PDFs, HTML, [...](https://fancyapps.com/fancybox/) are supported and can be displayed in the modal.
 The appropriate `data-type` can be set, the system tries to determine this if it has not been set.
+You must include the `data-type` property when showing images that are generated through `data-src` URLS that end in `.php` or `.html`.
 For example, the following can be used:
 
 - `image` - Image
@@ -18,15 +19,15 @@ For example, the following can be used:
 The following code example adds an image to the global modal and groups it with all other images that are not explicitly grouped:
 
 ```smarty
-<a href="{$imageLink}" data-caption="{$caption}" data-fancybox>
+<a href="{$imageLink}" data-caption="{$caption}" data-type="image" data-fancybox>
 	<img src="{$thumbnailUrl}" width="…" height="…" alt="">
 </a>
 ```
 
 If 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:
 
 ```smarty
-<a href="{$imageLink}" data-caption="{$caption}" data-fancybox="fooBar">
+<a href="{$imageLink}" data-caption="{$caption}" data-type="image" data-fancybox="fooBar">
 	<img src="{$thumbnailUrl}" width="…" height="…" alt="">
 </a>
 ```
@@ -72,14 +73,14 @@ final class FooBBCode extends AbstractBBCode
 ```
 
 ```smarty title="shared_bbcode_foo.tpl"
-<a href="{$imageLink}" data-caption="{$caption}" data-fancybox="message-{$activeMessageObjectType}-{$activeMessageObjectID}">
+<a href="{$imageLink}" data-caption="{$caption}" data-type="image" data-fancybox="message-{$activeMessageObjectType}-{$activeMessageObjectID}">
 	<img src="{$thumbnailUrl}" width="…" height="…" alt="">
 </a>
 ```
 
 ## Open Image Viewer Manually
 
-The Image Viewer can also be created dynamically using the function `WoltLabSuite/Core/Component/Image/Viewer::createFancybox()`.
+The Image Viewer can also be created dynamically using the function `WoltLabSuite/Core/Component/Image/Viewer::showFancybox()`.
 The contents of the modal are passed directly to the function.
 
 ### Example
@@ -91,9 +92,9 @@ The following code example creates a button that opens the Image Viewer with two
 <button type="button" id="openImageViewer">Open Image Viewer</button>
 
 <script data-relocate="true">
-  require(['WoltLabSuite/Core/Component/Image/Viewer'], ({ createFancybox }) => {
+  require(['WoltLabSuite/Core/Component/Image/Viewer'], ({ showFancybox }) => {
     document.getElementById("openImageViewer").addEventListener("click", () => {
-      void createFancybox([
+      showFancybox([
         {
           src: "https://example.com/image1.jpg",
           caption: "Image 1",