react-image-grid-gallery - npm Package Compare versions

Comparing version 3.1.1 to 3.1.2

dist/cjs/ImageGallery.js

@@ -74,2 +74,3 @@ "use strict";
     var modalThumbnailSectionStyle = galleryStyles.modalThumbnailSectionStyle;
+    var modalThumbImgsPodStyle = galleryStyles.modalThumbImgsPodStyle;
     var modalImageStyle = galleryStyles.modalImageStyle;
@@ -185,6 +186,7 @@ var modalSlideBtnStyle = galleryStyles.modalSlideBtnStyle;
                 react_1.default.createElement("button", { type: "button", "aria-label": "Next image", style: __assign({ opacity: showModalControls ? 1 : 0, right: 0 }, modalSlideBtnStyle), title: "Next image", onClick: function () { return scrollImage(false, 1, 0); } }, SvgElement(react_1.default.createElement("path", { fillRule: "evenodd", d: "M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8" })))),
-            react_1.default.createElement("section", { style: __assign({ opacity: showThumbnails ? 1 : 0 }, modalThumbnailSectionStyle) }, imagesInfoArray.map(function (imageInfo, index) { return (react_1.default.createElement("img", { loading: lazy ? "lazy" : "eager", ref: slideNumber - 1 === index ? activeThumbImgRef : null, style: {
-                    border: slideNumber - 1 === index ? thumbnailBorder : "",
-                    cursor: "pointer",
-                }, key: imageInfo.id, src: imageInfo.thumbSrc || imageInfo.src, alt: imageInfo.alt, onClick: function () { return scrollImage(true, 0, index); } })); })))));
+            react_1.default.createElement("section", { style: __assign({ opacity: showThumbnails ? 1 : 0 }, modalThumbnailSectionStyle) },
+                react_1.default.createElement("div", { style: modalThumbImgsPodStyle }, imagesInfoArray.map(function (imageInfo, index) { return (react_1.default.createElement("img", { loading: lazy ? "lazy" : "eager", ref: slideNumber - 1 === index ? activeThumbImgRef : null, style: {
+                        border: slideNumber - 1 === index ? thumbnailBorder : "",
+                        cursor: "pointer",
+                    }, key: imageInfo.id, src: imageInfo.thumbSrc || imageInfo.src, alt: imageInfo.alt, onClick: function () { return scrollImage(true, 0, index); } })); }))))));
     (0, react_1.useEffect)(function () {
@@ -191,0 +193,0 @@ function handleFullscreenChange() {

dist/cjs/ImageGallery.types.d.ts

@@ -13,3 +13,3 @@ export interface ImageGalleryStylesType {
     modalThumbnailSectionStyle?: React.CSSProperties;
-    modalImageContainerStyle?: React.CSSProperties;
+    modalThumbImgsPodStyle?: React.CSSProperties;
     modalImageStyle?: React.CSSProperties;
@@ -16,0 +16,0 @@ modalSlideBtnStyle?: React.CSSProperties;

dist/cjs/ImageGalleryStyles.js

@@ -10,3 +10,2 @@ "use strict";
         columnGap: "".concat(gapSize, "px"),
-        textAlign: "center",
     };
@@ -111,6 +110,9 @@ var imageBtnStyle = {
     var modalThumbnailSectionStyle = {
-        display: "flex",
-        justifyContent: "center",
         overflow: "hidden",
         height: "".concat(modalThumbnailSectionHeight),
+        textAlign: "center",
+    };
+    var modalThumbImgsPodStyle = {
+        display: "inline-flex",
+        height: "inherit",
         paddingBlock: "12px",
@@ -131,2 +133,3 @@ columnGap: "7px",
         modalThumbnailSectionStyle: modalThumbnailSectionStyle,
+        modalThumbImgsPodStyle: modalThumbImgsPodStyle,
         modalImageStyle: modalImageStyle,
@@ -133,0 +136,0 @@ modalSlideBtnStyle: modalSlideBtnStyle,

dist/esm/ImageGallery.js

@@ -38,2 +38,3 @@ var __assign = (this && this.__assign) || function () {
     var modalThumbnailSectionStyle = galleryStyles.modalThumbnailSectionStyle;
+    var modalThumbImgsPodStyle = galleryStyles.modalThumbImgsPodStyle;
     var modalImageStyle = galleryStyles.modalImageStyle;
@@ -149,6 +150,7 @@ var modalSlideBtnStyle = galleryStyles.modalSlideBtnStyle;
                 React.createElement("button", { type: "button", "aria-label": "Next image", style: __assign({ opacity: showModalControls ? 1 : 0, right: 0 }, modalSlideBtnStyle), title: "Next image", onClick: function () { return scrollImage(false, 1, 0); } }, SvgElement(React.createElement("path", { fillRule: "evenodd", d: "M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8" })))),
-            React.createElement("section", { style: __assign({ opacity: showThumbnails ? 1 : 0 }, modalThumbnailSectionStyle) }, imagesInfoArray.map(function (imageInfo, index) { return (React.createElement("img", { loading: lazy ? "lazy" : "eager", ref: slideNumber - 1 === index ? activeThumbImgRef : null, style: {
-                    border: slideNumber - 1 === index ? thumbnailBorder : "",
-                    cursor: "pointer",
-                }, key: imageInfo.id, src: imageInfo.thumbSrc || imageInfo.src, alt: imageInfo.alt, onClick: function () { return scrollImage(true, 0, index); } })); })))));
+            React.createElement("section", { style: __assign({ opacity: showThumbnails ? 1 : 0 }, modalThumbnailSectionStyle) },
+                React.createElement("div", { style: modalThumbImgsPodStyle }, imagesInfoArray.map(function (imageInfo, index) { return (React.createElement("img", { loading: lazy ? "lazy" : "eager", ref: slideNumber - 1 === index ? activeThumbImgRef : null, style: {
+                        border: slideNumber - 1 === index ? thumbnailBorder : "",
+                        cursor: "pointer",
+                    }, key: imageInfo.id, src: imageInfo.thumbSrc || imageInfo.src, alt: imageInfo.alt, onClick: function () { return scrollImage(true, 0, index); } })); }))))));
     useEffect(function () {
@@ -155,0 +157,0 @@ function handleFullscreenChange() {

dist/esm/ImageGallery.types.d.ts

@@ -13,3 +13,3 @@ export interface ImageGalleryStylesType {
     modalThumbnailSectionStyle?: React.CSSProperties;
-    modalImageContainerStyle?: React.CSSProperties;
+    modalThumbImgsPodStyle?: React.CSSProperties;
     modalImageStyle?: React.CSSProperties;
@@ -16,0 +16,0 @@ modalSlideBtnStyle?: React.CSSProperties;

dist/esm/ImageGalleryStyles.js

@@ -7,3 +7,2 @@ export function imageGalleryStyles(columnCount, columnWidth, gapSize, fixedCaption) {
         columnGap: "".concat(gapSize, "px"),
-        textAlign: "center",
     };
@@ -108,6 +107,9 @@ var imageBtnStyle = {
     var modalThumbnailSectionStyle = {
-        display: "flex",
-        justifyContent: "center",
         overflow: "hidden",
         height: "".concat(modalThumbnailSectionHeight),
+        textAlign: "center",
+    };
+    var modalThumbImgsPodStyle = {
+        display: "inline-flex",
+        height: "inherit",
         paddingBlock: "12px",
@@ -128,2 +130,3 @@ columnGap: "7px",
         modalThumbnailSectionStyle: modalThumbnailSectionStyle,
+        modalThumbImgsPodStyle: modalThumbImgsPodStyle,
         modalImageStyle: modalImageStyle,
@@ -130,0 +133,0 @@ modalSlideBtnStyle: modalSlideBtnStyle,

package.json

 {
   "name": "react-image-grid-gallery",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "description": "A simple image gallery with lightbox for displaying a grid of images in React apps",
@@ -5,0 +5,0 @@ "main": "./dist/cjs/ImageGallery.js",

README.md

@@ -173,3 +173,3 @@ # React Image Grid Gallery
 
-(**Optional**) The image's [index](https://codesweetly.com/web-tech-terms-i/#index) to begin the grid's lazy loading. 
+(**Optional**) The image's [index](https://codesweetly.com/web-tech-terms-i/#index) to begin the grid's lazy loading.
 
@@ -199,2 +199,3 @@ **tip:** Use a negative number to lazy load all the images.
 - Modal thumbnail section: `modalThumbnailSectionStyle`
+- Modal thumbnail images container: `modalThumbImgsPodStyle`
 - Modal image element: `modalImageStyle`
@@ -201,0 +202,0 @@ - Modal slide button: `modalSlideBtnStyle`

No alert changes

Improved metrics

Total package byte prevSize

55515

1.07%

Lines of code

789

1.02%

Number of lines in readme file

280

0.36%

No dependency changes