Gallery dialog
Notes on technical implementation
In order to make this template work, you will need to combine:
- Template of
@ecl/ec-component-carousel - Javascript behaviors of
@ecl/ec-component-dialog
As long as you have HTML representation matching the output of carousel component on the page (which is treated as a gallery component) you just need to integrate this markup with the Javascript behaviors of the dialog framework by:
- including ECL.js object
- instantiating both the carousel and dialog libraries
document.addEventListener('DOMContentLoaded', function() {
ECL.dialogs({
dialogWindowId: 'ecl-carousel',
});
ECL.carousels();
});For further configuration options of both carousel and dialog components, you can read their corresponding JavaScript files, which expose clear APIs.
{#
Parameters:
- "dialog_contents" data passed to '@ecl/ec-component-carousel' component.
Structure of `dialog_contents` documented in '@ecl/ec-component-carousel'.
JavaScript part explained in component's README file.
#}
{% include '@ecl/ec-component-carousel' with dialog_contents %}
{
"_demo": {
"scripts": "\n // This is only for demo purposes to facilitate end-users.\n\n // Create a link.\n var link = document.createElement('a');\n var text = document.createTextNode('Open dialog');\n\n // Include textual content.\n link.appendChild(text);\n link.title = \"Click to test the modal\";\n\n // Add necessary demo attributes.\n link.setAttribute('href', '#ecl-carousel');\n link.setAttribute('class', 'ecl-link');\n link.setAttribute('data-ecl-dialog', 'ecl-carousel');\n link.setAttribute('id', 'open-dialog-demo');\n\n // Show the link\n document.body.appendChild(link);\n\n document.addEventListener('DOMContentLoaded', function () {\n ECL.dialogs({\n dialogWindowId: 'ecl-carousel'\n });\n ECL.carousels();\n });\n "
},
"dialog_contents": {
"extra_attributes": [
{
"name": "aria-hidden",
"value": true
}
],
"heading_title": "Example gallery carousel",
"carousel_images": [
{
"image": {
"src": "../../assets/demo_images/business-demo-1.jpg",
"alt": "First item"
},
"download": {
"href": "../../example.html#",
"title": "Download",
"label": "Download"
},
"share": {
"href": "../../example.html#",
"title": "Share",
"label": "Share"
},
"description": "<p>Nulla consequat massa quis enim. Donec pede justo.</p>\n <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Integer tincidunt. <a href=\"#\" title=\"Cras dapibus\">Cras dapibus</a>. Vivamus elementum semper nisi.</p>",
"copyright": "© Copyright 1"
},
{
"image": {
"src": "../../assets/demo_images/business-demo-2.jpg",
"alt": "Second item"
},
"download": {
"href": "../../example.html#",
"title": "Download",
"label": "Download"
},
"share": {
"href": "../../example.html#",
"title": "Share",
"label": "Share"
},
"description": "<p>Nulla consequat massa quis enim. Donec pede justo.</p>\n <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Integer tincidunt. <a href=\"#\" title=\"Cras dapibus\">Cras dapibus</a>. Vivamus elementum semper nisi.</p>",
"copyright": "© Copyright 2"
},
{
"image": {
"src": "../../assets/demo_images/business-demo-3.jpg",
"alt": "Third item"
},
"download": {
"href": "../../example.html#",
"title": "Download",
"label": "Download"
},
"share": {
"href": "../../example.html#",
"title": "Share",
"label": "Share"
},
"description": "<p>Nulla consequat massa quis enim. Donec pede justo.</p>\n <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Integer tincidunt. <a href=\"#\" title=\"Cras dapibus\">Cras dapibus</a>. Vivamus elementum semper nisi.</p>",
"copyright": "© Copyright 3"
}
]
}
}
<section class="ecl-carousel" id="ecl-carousel" aria-labelledby="ecl-carousel__heading" aria-hidden="true">
<h3 class="ecl-headings ecl-headings--h3 ecl-u-sr-only" id="ecl-carousel__heading">Example gallery carousel</h3>
<div class="ecl-carousel__list-wrapper">
<ul class="ecl-carousel__list ecl-list--unstyled">
<li class="ecl-carousel__item">
<img src="../../assets/demo_images/business-demo-1.jpg" alt="First item" class="ecl-carousel__image" />
</li>
<li class="ecl-carousel__item">
<img src="../../assets/demo_images/business-demo-2.jpg" alt="Second item" class="ecl-carousel__image" />
</li>
<li class="ecl-carousel__item">
<img src="../../assets/demo_images/business-demo-3.jpg" alt="Third item" class="ecl-carousel__image" />
</li>
</ul>
</div>
<div class="ecl-carousel__live-region">
<div class="ecl-carousel__image-information" data-image=0>
<div class="ecl-carousel__meta">
<span class="ecl-carousel__meta-item ecl-carousel__meta-download">
<a class="ecl-link ecl-link--inverted ecl-link--standalone ecl-carousel__meta-link ecl-icon ecl-icon--download" href="../../example.html#"=":"=""=":"="">Download</a>
</span>
<span class="ecl-carousel__meta-item ecl-carousel__meta-share">
<a class="ecl-link ecl-link--inverted ecl-link--standalone ecl-carousel__meta-link ecl-icon ecl-icon--share" href="../../example.html#"=":"=""=":"="">Share</a>
</span>
</div>
<div class="ecl-carousel__image-description">
<p>Nulla consequat massa quis enim. Donec pede justo.</p>
<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Integer tincidunt. <a href="#" title="Cras dapibus">Cras dapibus</a>. Vivamus elementum semper nisi.</p>
</div>
<div class="ecl-carousel__image-copyright">
© Copyright 1
</div>
</div>
<div class="ecl-carousel__image-information" data-image=1>
<div class="ecl-carousel__meta">
<span class="ecl-carousel__meta-item ecl-carousel__meta-download">
<a class="ecl-link ecl-link--inverted ecl-link--standalone ecl-carousel__meta-link ecl-icon ecl-icon--download" href="../../example.html#"=":"=""=":"="">Download</a>
</span>
<span class="ecl-carousel__meta-item ecl-carousel__meta-share">
<a class="ecl-link ecl-link--inverted ecl-link--standalone ecl-carousel__meta-link ecl-icon ecl-icon--share" href="../../example.html#"=":"=""=":"="">Share</a>
</span>
</div>
<div class="ecl-carousel__image-description">
<p>Nulla consequat massa quis enim. Donec pede justo.</p>
<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Integer tincidunt. <a href="#" title="Cras dapibus">Cras dapibus</a>. Vivamus elementum semper nisi.</p>
</div>
<div class="ecl-carousel__image-copyright">
© Copyright 2
</div>
</div>
<div class="ecl-carousel__image-information" data-image=2>
<div class="ecl-carousel__meta">
<span class="ecl-carousel__meta-item ecl-carousel__meta-download">
<a class="ecl-link ecl-link--inverted ecl-link--standalone ecl-carousel__meta-link ecl-icon ecl-icon--download" href="../../example.html#"=":"=""=":"="">Download</a>
</span>
<span class="ecl-carousel__meta-item ecl-carousel__meta-share">
<a class="ecl-link ecl-link--inverted ecl-link--standalone ecl-carousel__meta-link ecl-icon ecl-icon--share" href="../../example.html#"=":"=""=":"="">Share</a>
</span>
</div>
<div class="ecl-carousel__image-description">
<p>Nulla consequat massa quis enim. Donec pede justo.</p>
<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Integer tincidunt. <a href="#" title="Cras dapibus">Cras dapibus</a>. Vivamus elementum semper nisi.</p>
</div>
<div class="ecl-carousel__image-copyright">
© Copyright 3
</div>
</div>
</div>
</section>
- Handle: @ecl/ec-template-gallery-dialog
- Preview:
- Filesystem Path: ../../src/systems/ec/ec-template/ec-template-gallery-dialog/ec-template-gallery-dialog.twig