|
| 1 | +# Image Viewer |
| 2 | + |
| 3 | +The Image Viewer component enables interactive image viewing in a modal, using the [Fancybox](https://fancyapps.com/fancybox/) library. |
| 4 | +It supports automatic or manual opening and grouping of images. |
| 5 | + |
| 6 | +Not only images, but also Videos, YouTube Videos, PDFs, HTML, [...](https://fancyapps.com/fancybox/) are supported and can be displayed in the modal. |
| 7 | +The appropriate `data-type` can be set, the system tries to determine this if it has not been set. |
| 8 | +For example, the following can be used: |
| 9 | + |
| 10 | +- `image` - Image |
| 11 | +- `pdf` - PDF file |
| 12 | +- `html5video` - HTML5 video |
| 13 | +- `youtube` - YouTube video |
| 14 | +- `vimeo` - Vimeo video |
| 15 | + |
| 16 | +## Open Image Viewer Automatically |
| 17 | + |
| 18 | +The following code example adds an image to the global modal and groups it with all other images that are not explicitly grouped: |
| 19 | + |
| 20 | +```smarty |
| 21 | +<a href="{$imageLink}" data-caption="{$caption}" data-fancybox> |
| 22 | + <img src="{$thumbnailUrl}" width="…" height="…" alt=""> |
| 23 | +</a> |
| 24 | +``` |
| 25 | + |
| 26 | +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: |
| 27 | + |
| 28 | +```smarty |
| 29 | +<a href="{$imageLink}" data-caption="{$caption}" data-fancybox="fooBar"> |
| 30 | + <img src="{$thumbnailUrl}" width="…" height="…" alt=""> |
| 31 | +</a> |
| 32 | +``` |
| 33 | + |
| 34 | +## Grouping content from the same message |
| 35 | + |
| 36 | +To ensure that images are only grouped from the same message in the same modal, `data-fancybox="message-{$messageObjectType}-{$messageObjectID}"` is used in the BBCode. |
| 37 | + |
| 38 | +```php |
| 39 | +final class FooBBCode extends AbstractBBCode |
| 40 | +{ |
| 41 | + #[\Override] |
| 42 | + public function getParsedTag(array $openingTag, $content, array $closingTag, BBCodeParser $parser): string |
| 43 | + { |
| 44 | + $objectID = (!empty($openingTag['attributes'][0])) ? \intval($openingTag['attributes'][0]) : 0; |
| 45 | + if (!$objectID) { |
| 46 | + return ''; |
| 47 | + } |
| 48 | + |
| 49 | + $foo = MessageEmbeddedObjectManager::getInstance()->getObject('com.woltlab.wcf.foo', $objectID); |
| 50 | + if ($foo === null) { |
| 51 | + return ContentNotVisibleView::forNotAvailable(); |
| 52 | + } |
| 53 | + |
| 54 | + if (!$foo->isAccessible()) { |
| 55 | + return ContentNotVisibleView::forNoPermission(); |
| 56 | + } |
| 57 | + |
| 58 | + if ($parser->getOutputType() == 'text/html') { |
| 59 | + return WCF::getTPL()->fetch('shared_bbcode_foo', 'wcf', [ |
| 60 | + 'imageLink' => $foo->getLink(), |
| 61 | + 'caption' => $foo->getTitle(), |
| 62 | + 'activeMessageID' => MessageEmbeddedObjectManager::getInstance()->getActiveMessageID(), |
| 63 | + 'activeMessageObjectType' => MessageEmbeddedObjectManager::getInstance()->getActiveMessageObjectType(), |
| 64 | + ], true); |
| 65 | + } elseif ($parser->getOutputType() == 'text/simplified-html') { |
| 66 | + return StringUtil::getAnchorTag($foo->getLink(), $foo->getTitle()); |
| 67 | + } else { |
| 68 | + return StringUtil::encodeHTML($foo->getLink()); |
| 69 | + } |
| 70 | + } |
| 71 | +} |
| 72 | +``` |
| 73 | + |
| 74 | +```smarty title="shared_bbcode_foo.tpl" |
| 75 | +<a href="{$imageLink}" data-caption="{$caption}" data-fancybox="message-{$activeMessageObjectType}-{$activeMessageObjectID}"> |
| 76 | + <img src="{$thumbnailUrl}" width="…" height="…" alt=""> |
| 77 | +</a> |
| 78 | +``` |
| 79 | + |
| 80 | +## Open Image Viewer Manually |
| 81 | + |
| 82 | +The Image Viewer can also be created dynamically using the function `WoltLabSuite/Core/Component/Image/Viewer::createFancybox()`. |
| 83 | +The contents of the modal are passed directly to the function. |
| 84 | + |
| 85 | +### Example |
| 86 | + |
| 87 | +The following code example creates a button that opens the Image Viewer with two images: |
| 88 | + |
| 89 | +```html |
| 90 | + |
| 91 | +<button type="button" id="openImageViewer">Open Image Viewer</button> |
| 92 | + |
| 93 | +<script data-relocate="true"> |
| 94 | + require(['WoltLabSuite/Core/Component/Image/Viewer'], ({ createFancybox }) => { |
| 95 | + document.getElementById("openImageViewer").addEventListener("click", () => { |
| 96 | + void createFancybox([ |
| 97 | + { |
| 98 | + src: "https://example.com/image1.jpg", |
| 99 | + caption: "Image 1", |
| 100 | + type: "image", |
| 101 | + }, |
| 102 | + { |
| 103 | + src: "https://example.com/image2.jpg", |
| 104 | + caption: "Image 2", |
| 105 | + type: "image", |
| 106 | + }, |
| 107 | + ]); |
| 108 | + }); |
| 109 | + }); |
| 110 | +</script> |
| 111 | +``` |
0 commit comments