19 lines
1.5 KiB
JSON
19 lines
1.5 KiB
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><li><img src='...' /></li></code></strong> elements inside of the image gallery element (this is the same element that contains the <code>x-ref="gallery"</code> reference).</p>"
|
|
}
|
|
} |