pines/elements/image-gallery.json

{
    "data" : {
        "imageGalleryOpened" : "A boolean value to determine if the image gallery is opened or closed.",
        "imageGalleryActiveUrl" : "The src URL of the image that is currently active.",
        "imageGalleryImageIndex" : "When the image gallery is initialized we'll add an data-index incrementor (1, 2, 3, ... etc.) to all the images in the gallery.",
        "imageGalleryOpen(event)" : "The method that can be called to open the image gallery.",
        "imageGalleryClose()" : "The method that can be called to close the image gallery.",
        "imageGalleryNext()" : "The method that will be called to load the next image in the gallery.",
        "imageGalleryPrev()" : "The method that will be called to load the previous image in the gallery."
        
    },
    "alert_notification" : {
        "title" : "Alpine Teleport Directive",
        "description" : "This element uses the <a href=\"https://alpinejs.dev/directives/teleport\" target=\"_blank\" class=\"underline\">AlpineJS teleport directive</a>, which will teleport the Image Gallery to be a child of the body element. This allows the gallery to be full-screen and prevents any display issues with its parent elements."
    },
    "additional" : {
        "description" : "<p>Adding or removing your own images is as simple as adding or removing the <strong><code>&lt;li&gt;&lt;img src='...' /&gt;&lt;/li&gt;</code></strong> elements inside of the image gallery element (this is the same element that contains the <code>x-ref=&#x22;gallery&#x22;</code> reference).</p>"
    }
}