[SOLVED] [bootstrap-package] adding lightbox zoom on image in carousel

TYPO3 Questions Extensions
1

Hey,
I’m currently adding an image-zoom to the carousel. Adding the “a”-tag to the \Private\Partials\ContentElements\Carousel\Item\Image.html works fine for me, but it doesn’t get the image-properties correctly. Can someone maybe help me getting the solution where to get the width and height of the image?

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:link.typolink parameter="{item.data.link}" additionalAttributes="{draggable:'false'}" class="carousel-content-link">
    <a href="{item.images.0.publicUrl}" class="lightbox" rel="lightbox-group-{data.uid}" data-lightbox-width="800px" data-lightbox-height="800px">
        <div class="carousel-content-inner">
            <div class="carousel-image">
                <f:if condition="{item.images.0}">
                    <f:render partial="Media/Rendering/Image" arguments="{file: item.images.0, data: item.data, settings: settings, variants: variants}" />
                </f:if>
            </div>
        </div>
    </a>
</f:link.typolink>
</html>
2

Okay, I got the solution via ChatGPT :smile:

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:link.typolink parameter="{item.data.link}" additionalAttributes="{draggable:'false'}" class="carousel-content-link">
    <a href="{item.images.0.publicUrl}" class="lightbox" rel="lightbox-group-{data.uid}" 
        data-lightbox-width="{item.images.0.properties.width}" 
        data-lightbox-height="{item.images.0.properties.height}">
        <div class="carousel-content-inner">
            <div class="carousel-image">
                <f:if condition="{item.images.0}">
                    <f:render partial="Media/Rendering/Image" arguments="{file: item.images.0, data: item.data, settings: settings, variants: variants}" />
                </f:if>
            </div>
        </div>
    </a>
</f:link.typolink>
</html>
1 Like