Markup
{% set data = data|default([{
"src": "./images/hompage-50-1.png",
"caption":"Close up of underside of asbestos cement . Notice the golf ball dimpling - this is an indication that the material is asbestos cement sheeting."
},{
"src": "./images/garage.jpg",
"caption":"Cement sheet lining on walls and ceiling with asbestos cement cover strips over the joins."
},{
"src": "./images/room.jpg",
"caption":"Asbestos cement sheet cladding - exterior walls and eaves"
},{
"src": "./images/hompage-50-2.png",
"caption":"Asbestos Cement Sheeting - garage exterior. Many homes in the affluent areas erected a fibro garage to house their new car in the 1950s - 1960s"
},{
"src": "./images/cement.jpg"
},{
"src": "./images/house.jpg",
"caption":"Asbestos cement sheet cladding"
}])
%}
{% set svgUrl= svgUrl|default('.') %}
{% set modifier_class = modifier_class|default("nsw-container p-0") %}
<div class="{{modifier_class}}">
<div class="row mx-0">
{% for img in data %}
<div class="col-12 col-md-4 py-3">
<div class="image-card">
<div class="image-card__content">
<div class="image-card__image-area">
<a class="border-0 w-100 p-0" aria-label="View {{img.imgAlt}} in Image Gallery " href="#imageGridExample" data-toggle="modal" data-slide-to="{{ loop.index0 }}">
<img src="{{img.src}}" alt="{{img.imgAlt}}" class="image-card__image rounded">
</a>
</div>
</div>
{% if img.caption %}
<div class="image-card__caption">{{img.caption}}</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
</div>
<div class="modal fade carousel slide position-fixed" id="imageGridExample" tabindex="-1" role="dialog" aria-label="Image Gallery" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-body">
<div class="carousel-inner">
{% for img in data %}
<div tabindex="0" class="carousel-item {{ loop.first ? 'active' }}">
<img class="img-fluid rounded w-100" src="{{ img.src }}" alt="{{img.imgAlt}}">
<p class="image-card__caption">{{img.caption}}</p>
</div>
{% endfor %}
</div>
<a class="carousel-control-prev" tabindex="0" href="#imageGridExample" aria-label="Previous Image" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" tabindex="0" href="#imageGridExample" aria-label="Next Image" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<button type="button" class="close-button" data-dismiss="modal">
<img src="{{svgUrl}}/images/close.svg" class="nsw-icon">
<span class="sr-only">Close Gallery</span>
</button>
</div>
</div>
</div>
</div>
