add possibility to view image in full screen - T7582

.eslintrc.json

@@ -18,6 +18,8 @@
       "error",
       "prefer-double"
     ],
+    "default-param-last": "off",
+    "class-methods-use-this": "off",
     "max-lines": [
       "warn",
       {

config/low-preview/webpack-demo.config.js

@@ -1,43 +1,52 @@
 const path = require('path');
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
 
 const htmlWebpackPlugin = new HtmlWebpackPlugin({
-  template: path.join(__dirname, "../../examples/low-preview/src/index.html"),
-  filename: "./index.html"
+  template: path.join(__dirname, '../../examples/low-preview/src/index.html'),
+  filename: './index.html',
 });
 
 const miniCssExtractPlugin = new MiniCssExtractPlugin({
   // Options similar to the same options in webpackOptions.output
   // both options are optional
-  filename: "[name].css",
-  chunkFilename: "[id].css",
-})
+  filename: '[name].css',
+  chunkFilename: '[id].css',
+});
 module.exports = {
-  entry: path.resolve(__dirname, "../../examples/low-preview/src/index.js"),
+  entry: path.resolve(__dirname, '../../examples/low-preview/src/index.js'),
   output: {
-    path: path.join(__dirname, "../../examples/low-preview/dist"),
-    filename: "bundle[hash].js"
+    path: path.join(__dirname, '../../examples/low-preview/dist'),
+    filename: 'bundle[hash].js',
   },
   module: {
     rules: [
       {
         test: /\.(js|jsx)$/,
-        use: "babel-loader",
-        exclude: /node_modules/
+        use: 'babel-loader',
+        exclude: /node_modules/,
       },
       {
         test: /\.css$/,
-        use: [ MiniCssExtractPlugin.loader, "css-loader" ],
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)$/i,
+        use: [
+          {
+            loader: 'file-loader',
+          },
+        ],
       },
-    ]
+    ],
   },
   plugins: [htmlWebpackPlugin, miniCssExtractPlugin],
   resolve: {
-    extensions: [".js", ".jsx"]
+    extensions: ['.js', '.jsx'],
   },
   devServer: {
-    port: 3001
+    port: 3001,
   },
-  devtool: 'source-map'
-};
+  devtool: 'source-map',
+};

config/wp/webpack-demo.config.js

@@ -37,7 +37,15 @@ module.exports = {
           },
           "css-loader"
         ]
-      }
+      },
+      { 
+        test: /\.(png|jpe?g|gif|svg)$/i, 
+        use: [ 
+          { 
+            loader: 'file-loader', 
+          }, 
+        ], 
+      },
     ]
   },
   plugins: [htmlWebpackPlugin, miniCssExtractPlugin],

examples/low-preview/src/index.html

@@ -342,6 +342,145 @@ <h3>Auto Crop</h3>
       </div>
     </section>
 
+
+    <section class="zoom-section">
+      <h2>Zoom in Images</h2>
+      <div class="zoom">
+        <img
+          ci-src="windmill.jpg"
+          alt="windmill"
+          ci-zoom
+        />
+        <img
+          ci-src="landscape.jpg"
+          alt="landscape"
+          ci-zoom
+        />
+        <img
+          ci-src="port.jpg"
+          alt="port"
+          ci-zoom
+        />
+      </div>
+    </section>
+
+    <section class="gallery-section">
+      <h2>Responsive Gallery</h2>
+      <div class="gallery">
+        <div class="bird">
+          <img
+            ci-src="bird.jpg"
+            alt="bird"
+            ci-ratio="1.5"
+            ci-gallery="gallery1"
+            ci-image-name= 'Peacock'
+          />
+        </div>
+        <img
+          ci-src="fox.jpg"
+          alt="fox"
+          ci-ratio="1.5"
+          ci-gallery="gallery1"
+          ci-image-name= 'Fox'
+        />
+        <img
+          ci-src="windmill.jpg"
+          alt="windmill"
+          ci-ratio="1.5"
+          ci-gallery="gallery1"
+          ci-image-name= 'Windmill'
+        />
+        <img
+          ci-src="landscape.jpg"
+          alt="landscape"
+          ci-ratio="1.5"
+          ci-gallery="gallery1"
+          ci-image-name= 'Bridge'
+        />
+        <img
+          ci-src="cat.jpg"
+          alt="cat"
+          ci-ratio="1.5"
+          ci-gallery="gallery1"
+          ci-image-name= 'Cat'
+        />
+        <img
+          ci-src="port.jpg"
+          alt="port"
+          ci-ratio="1.5"
+          ci-gallery="gallery1"
+          ci-image-name= 'Ship'
+        />
+        <div class="stellers">
+          <img
+            ci-src="stellers.jpg"
+            alt="stellers"
+            ci-ratio="1.5"
+            ci-gallery="gallery1"
+            ci-image-name= 'Falcon'
+         />
+        </div>
+        <img
+          ci-src="lion.jpg"
+          alt="lion"
+          ci-ratio="1.5"
+          ci-gallery="gallery1"
+          ci-image-name= 'Lion'
+        />
+        <img
+          ci-src="port.jpg"
+          alt="port"
+          ci-ratio="1.5"
+          ci-gallery="gallery1"
+          ci-image-name= 'Ship'
+        />
+        <img
+          ci-src="road.jpg"
+          alt="road"
+          ci-ratio="1.5"
+          ci-gallery="gallery1"
+          ci-image-name= 'road'
+        />
+        <div class="road">
+          <img
+            ci-src="road.jpg"
+            alt="road"
+            ci-ratio="1.5"
+            ci-gallery="gallery1"
+            ci-image-name= 'road'
+          />
+        </div>
+        <img
+          ci-src="sea.jpg"
+          alt="sea"
+          ci-ratio="1.5"
+          ci-gallery="gallery1"
+          ci-image-name= 'Sea'
+        />
+        <img
+          ci-src="landscape.jpg"
+          alt="landscape"
+          ci-ratio="1.5"
+          ci-gallery="gallery1"
+          ci-image-name= 'Bridge'
+        />
+        <img
+          ci-src="windmill.jpg"
+          alt="windmill"
+          ci-ratio="1.5"
+          ci-gallery="gallery1"
+          ci-image-name= 'Windmill'
+        />
+        <img
+          ci-src="fox.jpg"
+          alt="fox"
+          ci-ratio="1.5"
+          ci-gallery="gallery1"
+          ci-image-name= 'Fox'
+        />
+      </div>
+    </section>
+
     <section
       class="background-images-section"
       ci-bg-url="BG+image.jpg"

examples/low-preview/src/index.js

@@ -1,4 +1,4 @@
 import '../../../src/low-preview';
 import './init';
 import '../../common/demo';
-import './styles/main.css';
+import './styles/main.css';

examples/low-preview/src/init.js

@@ -4,9 +4,9 @@ window.ciResponsive = new window.CIResponsive({
   lazyLoading: true,
   apiVersion: null,
   lowQualityPreview: {
-    minImgWidth: 180
+    minImgWidth: 180,
   },
-  doNotReplaceURL: true
+  doNotReplaceURL: true,
 });
 
 window.lazySizes.init();

examples/low-preview/src/styles/main.css

@@ -490,6 +490,102 @@ body {
   font-weight: 500;
 }
 
+.gallery-section {
+  background-color: #f2f7fa;
+  padding: 50px 50px 80px 50px;
+  margin-bottom: 80px;
+}
+
+.gallery-section h2 {
+  font-size: 40px;
+  font-weight: 600;
+  color: #203254;
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.gallery {
+  height: max-content;
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  grid-auto-rows: repeat(4, 1fr);
+}
+
+.gallery img {
+  object-fit: cover;
+}
+
+.bird {
+  grid-column: 1/3;
+  grid-row: 1/3;
+  box-sizing: content-box;
+}
+
+.stellers {
+  grid-column: 4/6;
+  grid-row: 2/4;
+}
+
+.road {
+  grid-column: 2/4;
+  grid-row: 3/5;
+}
+
+.zoom-section {
+  padding: 0px 5%;
+}
+
+.zoom-section h2 {
+  font-size: 37px;
+  line-height: 54px;
+  font-weight: 600;
+  text-align: center;
+  color: #203254;
+  margin: 50px 0px 35px;
+}
+
+.zoom {
+  height: max-content;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  column-gap: 15px;
+  padding: 0px 25px;
+  margin-bottom: 80px;
+}
+
+@media (max-width: 700px) {
+  .gallery {
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: repeat(8, 1fr);
+  }
+
+  .gallery-section {
+    padding: 20px 20px 40px 20px;
+  }
+
+  .gallery-section h2 {
+    font-size: 30px;
+  }
+
+  .stellers {
+    grid-column: 1/3;
+    grid-row: 7/9;
+  }
+
+  .road {
+    grid-column: 2/4;
+    grid-row: 4/6;
+  }
+
+  .zoom-section h2 {
+    font-size: 30px;
+  }
+
+  .zoom {
+    column-gap: 10px;
+  }
+}
+
 .background-images-section {
   display: flex;
   flex-direction: column;

package.json

@@ -81,6 +81,7 @@
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-plugin-import": "^2.25.2",
     "extract-text-webpack-plugin": "^1.0.1",
+    "file-loader": "^6.2.0",
     "gh-pages": "^2.2.0",
     "highlight.js": "^11.1.0",
     "html-webpack-plugin": "^5.5.0",