add plz

README.md

@@ -132,7 +132,7 @@ In the example above we're adding a `<p>` element into default slide overlay. Al
 ```javascript
 <ReactGallery
   overlays={<ReactGallery.Overlays noPlayPause noTitle />}
-  source={images}
+  source={s}
 />
 ```
 
@@ -153,7 +153,7 @@ The slide component it also comes as `ReactBlueImpGallery` property. In the firs
 </thead>
 <tbody class="rich-diff-level-one">
 <tr>
-<td>source</td><td>string</td><td>for image or video resource, this is an alias of `href` also valid for images but not for video slides.</td>
+<td>source</td><td>string</td><td>for image[image]([[https://github.com/blueimp/Gallery#options]] (https://pixel-color-online.com/) or <a href="https://trim-video-online.com/">video</a> resource, this is an alias of `href` also valid for images but not for video slides.</td>
 </tr>
 <tr>
 <td>thumbanil</td><td>string</td><td>to set a resource to show in thumbanils. `source` will be used if `thumbnails` is undefined.</td>

components/ReactBlueImpGallery/Slide/index.js

@@ -70,6 +70,8 @@ class Slide extends React.Component {
       title,
       poster,
       type,
+      pw,
+      ph,
       template,
       children, // eslint-disable-line no-unused-vars
       synchedData, // eslint-disable-line no-unused-vars
@@ -82,8 +84,8 @@ class Slide extends React.Component {
     return template ?
       React.cloneElement(template, { ...Object.assign({}, props, { 'data-trigger' : true }) })
     : (
-        <a href={src} title={_title} type={type} {...Object.assign({}, props, { 'data-trigger': true })}>
-            <img src={tn} alt={_title} />
+        <a className="inline-block" href={src} title={_title} type={type} {...Object.assign({}, props, { 'data-trigger': true })}>
+            <img width={pw} height={ph} src={tn} alt={_title} style={{border: 1 + 'px solid #333', margin: 2 + 'px'}} loading='lazy' />
         </a>
       );
   }
@@ -96,6 +98,8 @@ Slide.propTypes = {
   poster: PropTypes.string,
   title: PropTypes.string,
   type: PropTypes.string,
+  pw: PropTypes.any,
+  ph: PropTypes.any,
   template: PropTypes.any,
   synchedData: PropTypes.object,
 };
@@ -107,6 +111,8 @@ Slide.defaultProps = {
   poster: null,
   title: '',
   type: 'image/jpeg',
+  pw: 70,
+  ph: 70,
   template: null,
   synchedData: {},
 };

components/ReactBlueImpGallery/index.js

@@ -122,7 +122,7 @@ class ReactBlueImpGallery extends React.Component {
     const customClassName = className ? `${className}-thumbnails` : '';
 
     return (
-      <div id={`${id}-links`} style={elementsVisibilityStyle} className={`${customClassName} ${constants.DEFAULT_CLASS_NAME}-thumbnails`}>
+      <div id={`${id}-links`} style={elementsVisibilityStyle} className={`${customClassName} ${constants.DEFAULT_CLASS_NAME}-thumbnails inline-block`}>
 
         { source.length ?
           source.map((src) => {