<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      xmlns:ce="http://typo3.org/ns/TYPO3/CMS/FluidStyledContent/ViewHelpers"
      xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
      data-namespace-typo3-fluid="true">


<f:for each="{gallery.rows}" as="row">
    <f:for each="{row.columns}" as="column">
        <f:if condition="{column.media}">


            <f:variable name="imgWidth"
                        value="{column.dimensions.width}"/>
            <f:variable name="imgHeight"
                        value="{column.dimensions.height}"/>


            <div class="gallery-item"
                 style="width:{imgWidth}px; flex-grow:{imgWidth}">
                <div style="display:block; padding-bottom:{imgHeight/imgWidth*100}%"></div>

                <f:render partial="Media/Type"
                          arguments="{file: column.media, dimensions: column.dimensions, data: data, settings: settings}"/>
            </div>


        </f:if>
    </f:for>
</f:for>


<v:asset.script
        path="EXT:stwmue_sitepackage/Resources/Public/JavaScript/jquery.fancybox.min.js"
        external="0" name="fancybox" overwrite="1" dependencies="jquery"
        debug="1" standalone="1" rewrite="1" fluid="0"/>

<v:asset.script>
    $().fancybox({
    selector : '.fancybox'
    });
</v:asset.script>


<v:asset.style
        path="EXT:stwmue_sitepackage/Resources/Public/Css/jquery.fancybox.min.css"
        external="0" name="fancybox-css" overwrite="1" standalone="1"
        rewrite="1" fluid="0"/>