Image Gallery

A component for displaying a collection of images in an organized layout.

Code Example Shortcut: z-image-gallery

<!-- Image Gallery -->
<div class="image-gallery">
    <!-- page 1 -->
    <img src="your-img.jpg" alt="" data-text="photo description here">
    <img src="your-img-2.jpg" alt="" data-text="photo description here">
    ... 

    <!-- page 2  -->
    <img src="your-img.jpg" alt="" data-text="photo description here">
    <img src="your-img-2.jpg" alt="" data-text="photo description here">
    ...
</div>

<!-- Pagination -->
<div class="pagination-nav">
    <!-- generated dynamically -->
</div>

<!-- Modal -->
<z-modal>
    <div class="modal-body">
        <img src="" id="modal-image">
        <p id="modal-description"><!-- generated by your data-text --></p>
    </div>
    <button slot="footer" class="modal-close">Close</button>
</z-modal>