+
+
+
+
+
+ 
+
+
+
+
+
+
+ Odoo.sh
+
+
+ Community
+
+
+ Enterprise
+
+
+
+
+
+
+
+ 
+
+ + Widget Image Preview
+This Module Brings Facility To Enlarge The Size Of Images.
+ +
+
+
+
+ 
+
+
+ Explore This + Module
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ Overview +
+
+
+
+
+
+
+ We can see the enlarged view of images. While we click on the image an enlarged view
+ of the image is displayed, and we can close this view by clicking the close button.
+
+
+
+
+ 
+
+
+ Features +
+
+
+
+
+
+
+
+
+ 
+ Can enlarge the size of image.
+
+
+ Can enlarge the size of image.
+
+
+
+
+ Available in Odoo 15.0
+ Community, Odoo.sh and Enterprise.
+
+
+ Available in Odoo 15.0
+ Community, Odoo.sh and Enterprise.
+
+
+
+ 
+
+
+ Screenshots +
+
+
+
+
+
+
+
+
+
+ 
+
+
+ Image +
+Select the image and click on it. +
+
+
+ 
+
+
+ Enlarged Image. +
+Image shows in enlarged size.
+
+
+ 
+
+ Close The View. +
+Option to close the enlarged image.
+
+
+
+
+ 
+
+
+ Related + Products +
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ 
+
+
+ Our Services +
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Odoo + Customization
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+
+
+ 
+
+
+ + Odoo + Support
+
+
+
+
+ 
+
+
+ + Hire + Odoo + Developer
+
+
+
+
+ 
+
+
+ + Odoo + Integration
+
+
+
+
+
+ 
+
+
+ + Odoo + Migration
+
+
+
+
+ 
+
+
+ + Odoo + Consultancy
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+ 
+
+
+ + Odoo + Licensing Consultancy
+
+
+
+
+ 
+
+
+ Our + Industries +
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Trading +
++ Easily procure + and + sell your products
+
+
+
+
+ 
+
+
+ + POS +
++ Easy + configuration + and convivial experience
+
+
+
+
+ 
+
+
+ + Education +
++ A platform for + educational management
+
+
+
+
+ 
+
+
+ + Manufacturing +
++ Plan, track and + schedule your operations
+
+
+
+
+ 
+
+
+ + E-commerce & Website +
++ Mobile + friendly, + awe-inspiring product pages
+
+
+
+
+ 
+
+
+ + Service Management +
++ Keep track of + services and invoice
+
+
+
+
+ 
+
+
+ + Restaurant +
++ Run your bar or + restaurant methodically
+
+
+
+ 
+
+
+ + Hotel Management +
++ An + all-inclusive + hotel management application
+
+
+
+ 
+
+
+ Support +
+
+
+
\ No newline at end of file
diff --git a/widget_preview_image/static/src/js/image_preview_widget.js b/widget_preview_image/static/src/js/image_preview_widget.js
new file mode 100644
index 000000000..f664faea9
--- /dev/null
+++ b/widget_preview_image/static/src/js/image_preview_widget.js
@@ -0,0 +1,85 @@
+/** @odoo-module **/
+// Model for patch the FieldBinaryImage and add function for image preview
+var basicFields = require('web.basic_fields');
+var FieldBinaryImage = basicFields.FieldBinaryImage;
+import { patch } from 'web.utils';
+
+function removeEnlargedImage() {
+ // Function for close the enlarged image
+ const enlargedImg = document.querySelector(".enlarged-image");
+ document.body.removeChild(enlargedImg);
+ const blurredBg = document.querySelector(".blurred-bg");
+ document.body.removeChild(blurredBg);
+ const closeButton = document.querySelector(".close-button");
+ document.body.removeChild(closeButton);
+ document.body.classList.remove("enlarged-image-body");
+}
+
+patch(FieldBinaryImage.prototype, 'widget_preview_image/static/src/js/image_preview_widget.js', {
+ events: _.extend({}, FieldBinaryImage.prototype.events, {
+ 'click img': function (ev) {
+ this.trigger_up('bounce_edit');
+ this.img_click(ev)
+ },
+ }),
+ img_click(ev) {
+ // Image click function for enlarge the FieldBinaryImage
+ const clickedImg = ev.target;
+ if (document.body.classList.contains("enlarged-image-body")) {
+ removeEnlargedImage();
+ return;
+ }
+ const newImg = document.createElement("img");
+ if (clickedImg.src.includes("avatar_128") && (clickedImg.name != 'avatar_128')){
+ newImg.src = clickedImg.src.replace("avatar_128", "image_1920");
+ }
+ else if (clickedImg.src.includes("image_128") && (clickedImg.name != 'image_128')){
+ newImg.src = clickedImg.src.replace("image_128", "image_1920");
+ }
+ else {
+ newImg.src = clickedImg.src
+ }
+ newImg.classList.add("enlarged-image");
+ newImg.style.position = "fixed";
+ newImg.style.top = 0;
+ newImg.style.bottom = 0;
+ newImg.style.left = 0;
+ newImg.style.right = 0;
+ newImg.style.margin = "auto";
+ newImg.style.maxWidth = "95%";
+ newImg.style.maxHeight = "95%";
+ newImg.style.zIndex = 9999;
+ // Create a div element for the blurred background
+ const blurredBg = document.createElement("div");
+ blurredBg.classList.add("blurred-bg");
+ blurredBg.style.position = "fixed";
+ blurredBg.style.top = 0;
+ blurredBg.style.bottom = 0;
+ blurredBg.style.left = 0;
+ blurredBg.style.right = 0;
+ blurredBg.style.background = "rgba(0, 0, 0, 0.5)";
+ blurredBg.style.backdropFilter = "blur(10px)";
+ blurredBg.style.zIndex = 9998;
+ // Create a button to close the enlarged image
+ const closeButton = document.createElement("button");
+ closeButton.classList.add("close-button");
+ closeButton.innerHTML = "Close";
+ closeButton.style.position = "fixed";
+ closeButton.style.top = "10px";
+ closeButton.style.right = "10px";
+ closeButton.style.padding = "5px";
+ closeButton.style.background = "transparent";
+ closeButton.style.border = "none";
+ closeButton.style.color = "#fff";
+ closeButton.style.fontSize = "16px";
+ closeButton.style.zIndex = 9999;
+ // Add a click event listener to the close button to remove the enlarged image
+ closeButton.addEventListener("click", removeEnlargedImage);
+ // Add the img, div, and button elements to the body
+ document.body.appendChild(blurredBg);
+ document.body.appendChild(newImg);
+ document.body.appendChild(closeButton);
+ // Add a class to the body to indicate that an image is enlarged
+ document.body.classList.add("enlarged-image-body");
+ },
+});
\ No newline at end of file
diff --git a/widget_preview_image/static/src/xml/widget_image_preview.xml b/widget_preview_image/static/src/xml/widget_image_preview.xml
new file mode 100644
index 000000000..870a8f56f
--- /dev/null
+++ b/widget_preview_image/static/src/xml/widget_image_preview.xml
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+