DIA Frontend

Fancybox 

<!-- ### Begin: Element  ### -->
<div id="c216" class="frame frame-default frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <div class="row">
                <div class="col-md-3">
                    <a href="../../common/img/dummy-images/adrian-VKgBktwrtX0-unsplash.jpg" data-fancybox="gallery" data-caption="Description">
                        <img class="img-fluid" src="../../common/img/dummy-images/adrian-VKgBktwrtX0-unsplash.jpg" alt="Alt Text" title="Title">
                    </a>
                </div>
                <div class="col-md-3">
                    <a href="../../common/img/dummy-images/adrian-5jw9OQOQ29c-unsplash.jpg" data-fancybox="gallery" data-caption="Description">
                        <img class="img-fluid" src="../../common/img/dummy-images/adrian-5jw9OQOQ29c-unsplash.jpg" alt="Alt Text" title="Title">
                    </a>
                </div>
                <div class="col-md-3">
                    <a href="../../common/img/dummy-images/adrian-FlwhX4vtzt0-unsplash.jpg" data-fancybox="gallery" data-caption="Description">
                        <img class="img-fluid" src="../../common/img/dummy-images/adrian-FlwhX4vtzt0-unsplash.jpg" alt="Alt Text" title="Title">
                    </a>
                </div>
                <div class="col-md-3">
                    <a href="../../common/img/dummy-images/adrian-LA6EufpEUv0-unsplash.jpg" data-fancybox="gallery" data-caption="Description">
                        <img class="img-fluid" src="../../common/img/dummy-images/adrian-LA6EufpEUv0-unsplash.jpg" alt="Alt Text" title="Title">
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ### End: Element  ### -->
 
{% extends images ? "@wrapper-frame" : "@wrapper-empty" %}

{% block main %}
    {% include "@atom-header" %}

    {% set colClasses = 'col-md-' ~ (12 / imagecols) %}

    {% if images %}
        <div class="row">
            {% for image in images %}
                <div class="{{ colClasses }}">
                    <a href="{{ image.src }}" data-fancybox{% if image.gallery %}="{{ image.gallery }}"{% endif %}{% if image.caption %} data-caption="{{ image.caption }}"{% endif %}>
                        <img class="img-fluid" src="{{ image.src }}" alt="{{ image.alt }}" title="{{ image.title }}">
                    </a>
                </div>
            {% endfor %}
        </div>
    {% endif %}
{% endblock %}
 
{
  "bodytext": null,
  "categories": null,
  "CType": null,
  "customId": null,
  "date": null,
  "frame_class": null,
  "header": null,
  "header_color": null,
  "header_layout": 2,
  "header_link": null,
  "header_position": null,
  "header_style": null,
  "layout": null,
  "space_after_class": null,
  "space_before_class": null,
  "space_inner_after_class": null,
  "space_inner_before_class": null,
  "subheader": null,
  "target": null,
  "images": [
    {
      "src": "../../common/img/dummy-images/adrian-VKgBktwrtX0-unsplash.jpg",
      "title": "Title",
      "caption": "Description",
      "gallery": "gallery",
      "alt": "Alt Text"
    },
    {
      "src": "../../common/img/dummy-images/adrian-5jw9OQOQ29c-unsplash.jpg",
      "title": "Title",
      "caption": "Description",
      "gallery": "gallery",
      "alt": "Alt Text"
    },
    {
      "src": "../../common/img/dummy-images/adrian-FlwhX4vtzt0-unsplash.jpg",
      "title": "Title",
      "caption": "Description",
      "gallery": "gallery",
      "alt": "Alt Text"
    },
    {
      "src": "../../common/img/dummy-images/adrian-LA6EufpEUv0-unsplash.jpg",
      "title": "Title",
      "caption": "Description",
      "gallery": "gallery",
      "alt": "Alt Text"
    }
  ],
  "imagecols": 4
}
  • Content: 
    import $ from 'jquery';
// Set jQuery global
window.$ = window.jQuery = $;

require('@fancyapps/fancybox');

$(() => {
  $('[data-fancybox="gallery"]').fancybox({
    // more options: https://fancyapps.com/fancybox/3/docs/#options
    buttons: [
      //"zoom",
      //"share",
      //"slideShow",
      //"fullScreen",
      //"download",
      //"thumbs",
      "close"
    ],
  });
})
  • URL: /components/raw/frame-fancybox/script.js
  • Filesystem Path: ../template/components/03-typo3/frame/06-special-elements/fancybox/script.js
  • Size: 390 Bytes

No notes defined.