+
+
+
+
+
+
+ 
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.sh
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/product_360_degree_view_in_website/static/src/css/360_view.css b/product_360_degree_view_in_website/static/src/css/360_view.css
new file mode 100644
index 000000000..5072c192f
--- /dev/null
+++ b/product_360_degree_view_in_website/static/src/css/360_view.css
@@ -0,0 +1,22 @@
+@charset "utf-8";
+body, ul, li {
+ margin: 0;
+ padding: 0;
+}
+ul, li {
+ list-style: none;
+}
+#image_360 {
+ width: 400px;
+ margin: 30px auto 0;
+ overflow: hidden;
+}
+#image_360 ul {
+ width: 400px;
+ height: 280px;
+}
+#image_360 ul li img {
+ display: block;
+ width: 400px;
+ height: 280px;
+}
\ No newline at end of file
diff --git a/product_360_degree_view_in_website/static/src/js/360_view.js b/product_360_degree_view_in_website/static/src/js/360_view.js
new file mode 100644
index 000000000..960ba0e1b
--- /dev/null
+++ b/product_360_degree_view_in_website/static/src/js/360_view.js
@@ -0,0 +1,55 @@
+odoo.define('product_360_degree_view_in_website.product_360_degree_view', function (require) {
+ 'use strict';
+ var publicWidget = require('web.public.widget');
+ var rpc = require('web.rpc');
+ var pic_W = $('.list').width() / 2;
+ var center_X = 0 + pic_W;
+ var movestop = pic_W / 10;
+
+ publicWidget.registry.product_view = publicWidget.Widget.extend({
+ selector: '.360_degree_view',
+ events: {
+ 'mousemove.list': 'Move360Image',
+ 'click .360_view': '_360ViewClick',
+ 'click .stop_view': '_stopViewClick',
+ },
+ setup: function () {
+// Calling the moveImg function
+ this._super.apply(this, arguments);
+ this.moveImg();
+ },
+ // Function for calculating the movements of the picture
+ moveImg: function (m_X, m_Y, dir) {
+ var index = Math.ceil(Math.abs(m_X - center_X) / movestop);
+ if (dir) {
+ this.$el.find('.list li').eq(index).show().siblings().hide();
+ } else {
+ this.$el.find('.list li').eq(18 - index).show().siblings().hide();
+ }
+ },
+ // Mousemove of the image
+ Move360Image: function (ev) {
+ var mouse_X = ev.pageX;
+ var mouse_Y = ev.pageY;
+ if (mouse_X - center_X <= 0) {
+ this.moveImg(mouse_X, mouse_Y, 'left');
+ } else {
+ this.moveImg(mouse_X, mouse_Y);
+ }
+ },
+ // Click function of the image to change the 360 degree
+ _360ViewClick: function (ev) {
+ this.$el.find('.carousel-inner, .product_detail_img').css({'display': 'none'});
+ this.$el.find('#image_360').css({'display': 'block'});
+ this.$el.find('.360_view').addClass('d-none'); // Hide the 360 view button
+ this.$el.find('.stop_view').removeClass('d-none'); // Show the stop button
+ },
+// Function for the button stop
+ _stopViewClick: function (ev) {
+ this.$el.find('#image_360').css({'display': 'none'});
+ this.$el.find('.product_detail_img').css({'display': 'block'});
+ this.$el.find('.stop_view').addClass('d-none'); // Hide the stop button
+ this.$el.find('.360_view').removeClass('d-none'); // Show the 360 view button
+ },
+ });
+});
diff --git a/product_360_degree_view_in_website/views/360_view_templates.xml b/product_360_degree_view_in_website/views/360_view_templates.xml
new file mode 100644
index 000000000..a56f9151d
--- /dev/null
+++ b/product_360_degree_view_in_website/views/360_view_templates.xml
@@ -0,0 +1,46 @@
+
+
+
+
+
+ 
+
+ + Product 360 Degree View in Website
++ Make Your Customers View Products From All Angles in Odoo + Website + +
+
+
+
+
+
+
+
+
+
+ + Explore this module +
+
+
+
+
+
+ + Overview +
+
+
+ + This module generates enables us to view products in 360 + degrees, giving us access to all of their angles +
+ +
+
+
+
+
+ + Features +
+
+
+
+ 
+
+
+
+
+ + Customer Can View Each Angle Of The Product In A Mouse Move +
+ +
+
+
+
+
+
+
+
+
+ + Fully Responsive and Mobile Optimized Module. + +
+
+
+
+
+
+
+
+
+
+
+ + Enable/Disable the 360 degree view for a Specific + Product.
+
+
+
+
+
+
+ + Screenshots +
+
+ 
+
+
+ + As seen in the image below, a tab will appear where you may add + various 360-degree images as soon as the Display 360 Image + Checkbox is selected.
+
+
+ 
+
+
+ + We can add images and label Here.
+For a better view add at least 25 images
+
+
+ 
+
+
+ + When comes to website if the product have the 360 images enabled + , a button 360 degree visible in shop.
+
+
+ 
+
+ + 360 degree move with the Mouse
++ After clicking the button when we move mouse over the picture + the product will be moved according to the mouse move + direction
+
+
+ 
+
+ + +
+
+
+ 
+
+ + +
+
+
+ 
+
+ + Stop the 360 move +
+We Can Stop The 360 View of The Product By Clicking The Stop + Button, And It Will Show The 360 Button +
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+ 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
+
+
+
+
+
+
+
+ Need Help?
++
+
+
+
+
+
+
+
+
+
+
+
+ WhatsApp
+
+
+
+
+
+ 
+
+
+
+
+
+ +
+ + +
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+ +
+
+
+
+
+