+
-imagesInfoArray |
+imagesData |
array |
undefined |
@@ -104,6 +112,11 @@ function App() {
- `id`: (**Required** - string or number) Each image's [unique identifying key](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).
- `alt`: (**Required** - string) The image's [alternative text](https://webaim.org/techniques/alttext).
- `caption`: (**Optional** - string) The [image's description](https://www.studysmarter.co.uk/explanations/english/blog/image-caption).
+- `cta`: (**Optional** - object) This feature lets you add a link to each image's caption in the lightbox, allowing users to visit a related page. The CTA (call-to-action) object accepts the following properties:
+ - `href` (string): The URL that the CTA link will point to. (Required)
+ - `target` (string): Specifies where to open the linked document (e.g., `_blank` for a new tab).
+ - `rel` (string): Specifies the relationship between the current document and the linked document (e.g., `noopener noreferrer` for security reasons when using `_blank`).
+ - `text` (string): The text that will be displayed for the CTA link in the image caption within the lightbox. (Required)
- `src`: (**Required** - string) The image's default [URL](https://codesweetly.com/web-address-url).
- `gridSrc`: (**Optional** - string) The preferred grid image's URL.
- `thumbSrc`: (**Optional** - string) The preferred thumbnail image's URL.
@@ -112,6 +125,7 @@ function App() {
|
+
|
@@ -122,6 +136,7 @@ function App() {
| "auto" |
(Optional) The number of columns. |
+
|
@@ -132,16 +147,57 @@ function App() {
| 230 |
(Optional) The minimum width of the gallery's columns. |
+
+customizeImageClickAction |
+function |
+() => {} |
-[`gapSize`](https://codesweetly.com/css-gap-property)
+(**Optional**) A function to be executed when an image is clicked, if `enableDefaultLightbox` is `false`. This allows you to implement your own custom lightbox or any other action on image click.
+
+The `customizeImageClickAction` function receives two arguments, `imageData` and `index`, which are automatically provided. These arguments give you access to the data of the clicked image.
+
+**Example 1:**
+
+```jsx
+ {
+ console.log("Image clicked!");
+ }}
+/>
+```
+
+**Example 2:**
+
+```jsx
+ {
+ console.log("Image clicked:", imageData, index);
+ }}
+/>
+```
+
+**note:** The `customizeImageClickAction` feature is not compatible with the Astro framework, as [Astro does not support passing functions to hydrated components](https://docs.astro.build/en/guides/framework-components/#passing-props-to-framework-components).
|
-number |
-24 |
-(Optional) The gallery's gap size. |
+
+
+enableDefaultLightbox |
+boolean |
+true |
+
+
+(**Optional**) Specify whether to use the packageโs default lightbox. If set to `false`, you can use the `customizeImageClickAction` prop to implement your own lightbox or any other action when an image is clicked.
+
+ |
+
+
fixedCaption |
boolean |
@@ -152,18 +208,25 @@ function App() {
+
-thumbnailBorder |
-string |
-"3px solid #fff" |
-(Optional) The thumbnail's border style. |
+
+
+[`gapSize`](https://codesweetly.com/css-gap-property)
+
+ |
+number |
+24 |
+(Optional) The gallery's gap size. |
+
lazy |
boolean |
true |
(Optional) Specify whether to lazy load images. |
+
lazyFromIndex |
number |
@@ -176,30 +239,12 @@ function App() {
-
-customStyles |
-ImageGalleryStylesType |
-{} |
-
-
-(**Optional**) Custom styles to override the following element's default styles:
-
-- Gallery container: `galleryContainerStyle`
-- Gallery image button: `imageBtnStyle`
-- Gallery image container: `imageContainerStyle`
-- Gallery image element: `imageStyle`
-- Gallery image caption: `imageCaptionStyle`
-- Modal container: `modalContainerStyle`
-- Modal slide number: `modalSlideNumberStyle`
-- Modal toolbar: `modalToolbarStyle`
-- Modal toolbar button: `modalToolbarBtnStyle`
-- Modal slideshow section: `modalSlideShowSectionStyle`
-- Modal thumbnail section: `modalThumbnailSectionStyle`
-- Modal thumbnail images container: `modalThumbImgsPodStyle`
-- Modal image element: `modalImageStyle`
-- Modal slide button: `modalSlideBtnStyle`
- |
+
+thumbnailBorder |
+string |
+"3px solid #fff" |
+(Optional) The thumbnail's border style. |
@@ -250,7 +295,7 @@ function YourComponent() {
const ImageGallery = require("react-image-grid-gallery").ImageGallery;
return (