minor ui changes & lightbox added

diablo1408 · Jan 9, 2021 · 3e7d03c · 3e7d03c
1 parent ac3b720
commit 3e7d03c
Show file tree

Hide file tree

Showing 10 changed files with 489 additions and 424 deletions.
diff --git a/.env b/.env
@@ -1,5 +1,5 @@
 EMAIL = "minorprojectcse2020@gmail.com"
 PASSWORD = "wasd4321"
-  cloud_name: 'dn8binf6d'
-  api_key: '858617943453819'
-  api_secret: 'SmFaiFXHwpB_ZGhUV9zyrdVXKMc'
+  cloud_name= 'dn8binf6d'
+  api_key= '858617943453819'
+  api_secret= 'SmFaiFXHwpB_ZGhUV9zyrdVXKMc'
diff --git a/controller/image/addImage.js b/controller/image/addImage.js
@@ -179,7 +179,7 @@ class AddImage {
                     $set: { 'image': image_mapping ,
                     'image_labels' : label_mapping
                   }}).then((user)=>{
-                    console.log(user)
+                   // console.log(user)
                   });
 
       }).catch((err)=>{

diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -11,10 +11,10 @@
   <link href="css/bootstrap.min.css" rel="stylesheet">
   <!-- Material Design Bootstrap -->
   <!-- Your custom styles (optional) -->
-  <!-- <link href="css/style.min.css" rel="stylesheet"> -->
+  <link href="css/style.min.css" rel="stylesheet">
   <link href="css/custom.css" rel="stylesheet">
-  <!-- <link href="css/mdb.lite.min.css" rel="stylesheet"> -->
-  <!-- <link href="css/mdb.min.css" rel="stylesheet"> -->
+  <link href="css/mdb.lite.min.css" rel="stylesheet"> 
+   <link href="css/mdb.min.css" rel="stylesheet">
 
 
   <style>
@@ -45,6 +45,13 @@
 <script type="text/javascript" src="./js/popper.min.js"></script>
 <script type="text/javascript" src="./js/bootstrap.min.js"></script>
 <script type="text/javascript" src="./js/mdb.min.js"></script>
+<script type="text/javascript" >
+
+$(function () {
+$("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");
+});
+</script>
+
 
 
 </html>
diff --git a/frontend/src/components/ImageTable/index.js b/frontend/src/components/ImageTable/index.js
@@ -11,21 +11,34 @@ export default function ImageTable({ images, currentPage, pageSize, genre }) {
 
   // console.log("images present in image table ");
   // console.log(currentImages);
-  return ( 
-    <div className="row row-eq-height">
-      {!!images &&
-        currentImages.map((image) => {
-          // const encodedImage = new Buffer(image.img_buffer, "binary").toString(
-          //   "base64"
-          // );
-          // const coverImage = "data:image/jpeg;base64," + encodedImage;
-          const coverImage = image.img_name;
-         return( <div className="col-4  " key = {image._id}>
-                <img src={coverImage} className="gallery-img" alt={"cover"} key = {image._id}/>
-                </div>
-          )
-        })}
+
+  return (
+    <div className="col-md-12">
+      <div id="mdb-lightbox-ui"></div>
+      <div class="mdb-lightbox ">
+        {!!images &&
+          currentImages.map((image) => {
+            const coverImage = image.img_name;
+            // const coverImage = "/uploads/" + image.img_name;
+            return (
+              // <div className="col-4  " key={image._id}>
+              //   <img
+              //     src={coverImage}
+              //     className="gallery-img"
+              //     alt={"cover"}
+              //     key={image._id}
+              //   />
+              // </div>
+              <figure class="col-md-4">
+              <a href={coverImage} data-size="1600x1067">
+                <img src={coverImage} class="img-fluid"/>
+              </a>
+              </figure>
+            );
+          })}
+      </div>
+      </div>
 
-    </div>
+
   );
 }